Dela via

Microsoft.Common.TextBox UI-element

  • Artikel

Användargränssnittselementet TextBox (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 egenskapen multiLine .

Exempel på användargränssnitt

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

Exempel på enradstextruta.

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

Exempel på textruta med flera rader.

Skärmbild av en textruta med flera rader 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 och defaultValue definieras har de defaultValue företräde och visas.
  • Egenskapen multiLine är boolesk eller true 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 linjefeeden. Textrutan med flera rader accepterar \r för en vagnretur (CR) och \n för en radmatning (LF). Ett standardvärde kan till exempel vara \r\n att ange vagnretur och radmatning (CRLF).
  • Om constraints.required är inställt på truemåste textrutan ha ett värde för att verifieras. 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 reguljärt JavaScript-uttrycksmönster. Om det anges måste textrutans värde matcha mönstret för att verifieras. 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 inte kan valideras.
  • Det är möjligt att ange ett värde för regex när required är inställt på false. I det här scenariot krävs inget värde för att textrutan ska kunna verifieras. 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.

I det här exemplet kontrollerar kontrollen om namnet är giltigt och om det är tillgängligt när du anger ett lagringskontonamn och avslutar textrutan. 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 rader

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