Microsoft.Common.TextBox UI 要素
書式設定されていないテキストの追加に使用できる TextBox ユーザーインターフェイス (UI) 要素。 この要素は単一行の入力フィールドですが、multiLine プロパティがあれば複数行を入力できます。
UI サンプル
TextBox 要素では、単一行または複数行のテキスト ボックスが使用されます。
単一行のテキスト ボックスの例。
複数行のテキスト ボックスの例。
スキーマ
{
"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 関数」を参照してください。