Microsoft.Common.TextBox UI-element

  • Artikel

Elementet TextBox användargränssnitt (UI) kan användas för att lägga till oformaterad text. Elementet är ett indatafält med en rad, men stöder indata med flera rader med multiLine egenskapen .

Exempel på användargränssnitt

Elementet TextBox använder en textruta med en rad eller flera rader.

Exempel på textruta med en rad.

Skärmbild av en textruta med en rad med elementet Microsoft.Common.TextBox UI.

Exempel på textruta med flera rader.

Skärmbild av en flerradstextruta med elementet Microsoft.Common.TextBox UI.

Schema

{
  "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
}

Exempelutdata

"contoso123"

Kommentarer

  • Använd egenskapen toolTip för att visa text om elementet när musmarkören hovras över informationssymbolen.
  • Egenskapen placeholder är hjälptext som försvinner när användaren börjar redigera. placeholder Om båda har defaultValue definierats defaultValue och har företräde och visas.
  • Egenskapen multiLine är boolesk, true eller false. Om du vill använda en textruta med flera rader anger du egenskapen till true. Om en textruta med flera rader inte behövs anger du egenskapen till false eller exkluderar egenskapen. För nya rader visas \n JSON-utdata för radmatningen. Textrutan med flera rader accepterar \r för en vagnretur (CR) och \n för en radmatning (LF). Ett standardvärde kan till exempel innehålla \r\n för att ange CRLF.
  • Om constraints.required är inställt på truemåste textrutan ha ett värde för att valideras. Standardvärdet är false.
  • Egenskapen validations är en matris där du lägger till villkor för att kontrollera värdet som anges i textrutan.
  • Egenskapen regex är ett mönster för reguljära JavaScript-uttryck. Om det anges måste textrutans värde matcha mönstret för att valideras. Standardvärdet är null. Mer information om regex-syntax finns i Snabbreferens för reguljära uttryck.
  • Egenskapen isValid innehåller ett uttryck som utvärderas till true eller false. I uttrycket definierar du villkoret som avgör om textrutan är giltig.
  • Egenskapen message är en sträng som ska visas när textrutans värde misslyckas med valideringen.
  • Det går att ange ett värde för regex när required har angetts till false. I det här scenariot krävs inget värde för att textrutan ska kunna valideras. Om en anges måste den matcha mönstret för reguljära uttryck.

Exempel

Exemplen visar hur du använder en textruta med en rad och en textruta med flera rader.

Enkelrad

I följande exempel används en textruta med kontrollen Microsoft.Solutions.ArmApiControl för att kontrollera tillgängligheten för ett resursnamn.

När du i det här exemplet anger ett lagringskontonamn och avslutar textrutan kontrollerar kontrollen om namnet är giltigt och om det är tillgängligt. Om namnet är ogiltigt eller redan finns visas ett felmeddelande. Ett lagringskontonamn som är giltigt och tillgängligt visas i utdata.

{
  "$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')]"
    }
  }
}

Flera linjer

I det multiLine här exemplet används egenskapen för att skapa en textruta med flera rader med platshållartext.

{
  "$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')]"
    }
  }
}

Nästa steg