Share via

Microsoft.Common.TextBox UI-element

  • Artikel

Het TextBox element user-interface (UI) kan worden gebruikt om niet-opgemaakte tekst toe te voegen. Het element is een invoerveld met één regel, maar ondersteunt invoer met meerdere regels met de multiLine eigenschap.

Ui-voorbeeld

Het TextBox element maakt gebruik van een tekstvak met één regel of meerdere regels.

Voorbeeld van tekstvak met één regel.

Schermopname van een tekstvak met één regel met behulp van het ui-element Microsoft.Common.TextBox.

Voorbeeld van tekstvak met meerdere regels.

Schermopname van een tekstvak met meerdere regels met behulp van het ui-element Microsoft.Common.TextBox.

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
}

Voorbeelduitvoer

"contoso123"

Opmerkingen

  • Gebruik de toolTip eigenschap om tekst over het element weer te geven wanneer de muisaanwijzer boven het informatiesymbool wordt beweegt.
  • De placeholder eigenschap is Help-tekst die verdwijnt wanneer de gebruiker begint met bewerken. Als de placeholder en defaultValue beide zijn gedefinieerd, heeft de defaultValue prioriteit en wordt deze weergegeven.
  • De multiLine eigenschap is booleaanse waarde, true of false. Als u een tekstvak met meerdere regels wilt gebruiken, stelt u de eigenschap in op true. Als een tekstvak met meerdere regels niet nodig is, stelt u de eigenschap false in op of sluit u deze uit. Voor nieuwe regels wordt de JSON-uitvoer weergegeven \n voor de regelfeed. Het tekstvak met meerdere regels accepteert \r voor een regelterugloop (CR) en \n voor een regelinvoer (LF). Een standaardwaarde kan bijvoorbeeld bestaan uit \r\n het opgeven van regelterugloop en regelinvoer (CRLF).
  • Als constraints.required dit is ingesteld true, moet het tekstvak een waarde hebben om te valideren. De standaardwaarde is false.
  • De validations eigenschap is een matrix waarin u voorwaarden toevoegt voor het controleren van de waarde in het tekstvak.
  • De regex eigenschap is een javaScript-patroon voor reguliere expressies. Indien opgegeven, moet de waarde van het tekstvak overeenkomen met het patroon om te valideren. De standaardwaarde is null. Zie Snelzoekgids voor reguliere expressies voor meer informatie over regex-syntaxis.
  • De isValid eigenschap bevat een expressie die resulteert in true of false. In de expressie definieert u de voorwaarde die bepaalt of het tekstvak geldig is.
  • De message eigenschap is een tekenreeks die moet worden weergegeven wanneer de waarde van het tekstvak mislukt.
  • Het is mogelijk om een waarde op te geven voor regex wanneer required deze is ingesteld op false. In dit scenario is een waarde niet vereist voor het valideren van het tekstvak. Als er een is opgegeven, moet deze overeenkomen met het reguliere expressiepatroon.

Voorbeelden

In de voorbeelden ziet u hoe u een tekstvak met één regel en een tekstvak met meerdere regels gebruikt.

Eén regel

In het volgende voorbeeld wordt een tekstvak gebruikt met het besturingselement Microsoft.Solutions.ArmApiControl om de beschikbaarheid van een resourcenaam te controleren.

Wanneer u in dit voorbeeld een naam voor een opslagaccount invoert en het tekstvak afsluit, controleert het besturingselement of de naam geldig is en of deze beschikbaar is. Als de naam ongeldig is of al bestaat, wordt er een foutbericht weergegeven. In de uitvoer wordt een geldige en beschikbare opslagaccountnaam weergegeven.

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

Meerdere regels

In dit voorbeeld wordt de multiLine eigenschap gebruikt om een tekstvak met meerdere regels met tijdelijke aanduidingen te maken.

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

Volgende stappen