Microsoft.Common.TextBox UI 要素

[アーティクル]
06/24/2024

書式設定されていないテキストの追加に使用できる TextBox ユーザーインターフェイス (UI) 要素。この要素は単一行の入力フィールドですが、multiLine プロパティがあれば複数行を入力できます。

UI サンプル

TextBox 要素では、単一行または複数行のテキストボックスが使用されます。

単一行のテキストボックスの例。

Microsoft.Common.TextBox の UI 要素を使用した単一行テキストボックスのスクリーンショット。

複数行のテキストボックスの例。

Microsoft.Common.TextBox の UI 要素を使用した複数行テキストボックスのスクリーンショット。

スキーマ

{
  "name": "nameInstance",
  "type": "Microsoft.Common.TextBox",
  "label": "Name",
  "defaultValue": "contoso123",
  "toolTip": "Use only allowed characters",
  "placeholder": "",
  "multiLine": false,
  "constraints": {
    "required": true,
    "validations": [
      {
        "regex": "^[a-z0-9A-Z]{1,30}$",
        "message": "Only alphanumeric characters are allowed, and the value must be 1-30 characters long."
      },
      {
        "isValid": "[startsWith(steps('resourceConfig').nameInstance, 'contoso')]",
        "message": "Must start with 'contoso'."
      }
    ]
  },
  "visible": true
}

サンプル出力

"contoso123"

解説

マウスのカーソルが情報記号の上に置かれているとき、要素に関するテキストを表示するには、toolTip プロパティを使用します。
placeholder プロパティは、ユーザーが編集を開始したときに消えるヘルプテキストです。 placeholder と defaultValue の両方が定義されている場合は、defaultValue が優先され、表示されます。
multiLine プロパティはブール値、すなわち、true か false です。複数行のテキストボックスを使用するには、プロパティを true に設定します。複数行のテキストボックスが不要な場合、プロパティを false に設定するか、プロパティを除外します。改行については、JSON 出力にはラインフィードの \n が表示されます。複数行のテキストボックスでは、キャリッジリターン (CR) として \r が、ラインフィード (LF) として \n が受け取られます。たとえば、既定値には、復帰と改行 (CRLF) を指定する \r\n を含めることができます。
constraints.required が true に設定されている場合、テキストボックスには、正常に検証を完了できる値を指定する必要があります。既定値は false です。
validations プロパティは、テキストボックスに入力された値を確認するための条件を追加する配列です。
regex プロパティは JavaScript の正規表現パターンです。指定されている場合、テキストボックスの値はパターンに一致しないと、有効性が正常に確認されません。既定値は null です。正規表現構文の詳細については、正規表現のクイックリファレンスを参照してください。
isValid プロパティには、true または false に評価される式が格納されます。式内で、テキストボックスが有効かどうかを決定する条件を定義します。
message プロパティはテキストボックスの値の検証に失敗したときに表示される文字列です。
required が false に設定されている場合、regex の値を指定することができます。このシナリオでは、テキストボックスに正常に検証を完了できる値を指定する必要はありません。指定する場合、正規表現パターンと一致する必要があります。

例

この例からは、単一行のテキストボックスと複数行のテキストボックスを使用する方法を確認できます。

単一行

次の例では、Microsoft.Solutions.ArmApiControl コントロールと共にテキストボックスを使用し、リソース名が使用可能かどうか確認します。

この例では、ストレージアカウント名を入力してテキストボックスを終了すると、コントロールでは名前が有効かどうか、および使用可能かどうかを確認します。名前が無効であるか、既に存在する場合は、エラーメッセージが表示されます。有効で使用可能なストレージアカウント名が出力に表示されます。

{
  "$schema": "https://schema.management.azure.com/schemas/0.1.2-preview/CreateUIDefinition.MultiVm.json#",
  "handler": "Microsoft.Azure.CreateUIDef",
  "version": "0.1.2-preview",
  "parameters": {
    "basics": [
      {
        "name": "nameApi",
        "type": "Microsoft.Solutions.ArmApiControl",
        "request": {
          "method": "POST",
          "path": "[concat(subscription().id, '/providers/Microsoft.Storage/checkNameAvailability?api-version=2021-09-01')]",
          "body": {
            "name": "[basics('txtStorageName')]",
            "type": "Microsoft.Storage/storageAccounts"
          }
        }
      },
      {
        "name": "txtStorageName",
        "type": "Microsoft.Common.TextBox",
        "label": "Storage account name",
        "constraints": {
          "validations": [
            {
              "isValid": "[basics('nameApi').nameAvailable]",
              "message": "[basics('nameApi').message]"
            }
          ]
        }
      }
    ],
    "steps": [],
    "outputs": {
      "textBox": "[basics('txtStorageName')]"
    }
  }
}

複数行

この例では、multiLine プロパティを使用し、プレースホルダーテキストを含む複数行のテキストボックスを作成します。

{
  "$schema": "https://schema.management.azure.com/schemas/0.1.2-preview/CreateUIDefinition.MultiVm.json#",
  "handler": "Microsoft.Azure.CreateUIDef",
  "version": "0.1.2-preview",
  "parameters": {
    "basics": [
      {
        "name": "demoTextBox",
        "type": "Microsoft.Common.TextBox",
        "label": "Multi-line text box",
        "defaultValue": "",
        "toolTip": "Use 1-60 alphanumeric characters, hyphens, spaces, periods, and colons.",
        "placeholder": "This is a multi-line text box:\nLine 1.\nLine 2.\nLine 3.",
        "multiLine": true,
        "constraints": {
          "required": true,
          "validations": [
            {
              "regex": "^[a-z0-9A-Z -.:\n]{1,60}$",
              "message": "Only 1-60 alphanumeric characters, hyphens, spaces, periods, and colons are allowed."
            }
          ]
        },
        "visible": true
      }
    ],
    "steps": [],
    "outputs": {
      "textBox": "[basics('demoTextBox')]"
    }
  }
}

次のステップ

UI 定義作成の概要については、「Azure マネージドアプリケーションの作成エクスペリエンスのための CreateUiDefinition.json」を参照してください。
UI 要素の共通プロパティの説明については、「CreateUiDefinition の要素」を参照してください。
関数の詳細については、「CreateUiDefinition 関数」を参照してください。

次の方法で共有