次の方法で共有

Microsoft.Common.TextBox UI 要素

書式設定されていないテキストの追加に使用できる 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')]"
    }
  }
}

次のステップ

  • Last updated on