Benutzeroberflächenelement „Microsoft.Common.TextBox UI“

  • Artikel

Das Benutzeroberflächenelement (UI) TextBox kann zum Hinzufügen von unformatiertem Text verwendet werden. Das Element ist ein einzeilige Eingabefeld, das aber mehrzeilige Eingaben mit der multiLine-Eigenschaft unterstützt.

Benutzeroberflächenbeispiel

Das TextBox-Element verwendet ein einzeiliges oder mehrzeiliges Textfeld.

Beispiel für einzeiliges Textfeld.

Screenshot: einzeiliges Textfeld unter Verwendung des Benutzeroberflächenelements „Microsoft.Common.TextBox“

Beispiel für ein mehrzeiliges Textfeld.

Screenshot: mehrzeiliges Textfeld unter Verwendung des Benutzeroberflächenelements „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
}

Beispielausgabe

"contoso123"

Bemerkungen

  • Verwenden Sie die toolTip-Eigenschaft, um Text zum Element anzuzeigen, wenn sich der Mauszeiger über dem Informationssymbol befindet.
  • Die placeholder-Eigenschaft ist Hilfetext, der ausgeblendet wird, wenn der Benutzer mit der Bearbeitung beginnt. Wenn sowohl placeholder als auch defaultValue definiert ist, hat defaultValue Vorrang und wird angezeigt.
  • Die multiLine-Eigenschaft ist ein boolescher Wert, true oder false. Um ein mehrzeiliges Textfeld zu verwenden, legen Sie die Eigenschaft auf true fest. Wenn kein mehrzeiliges Textfeld benötigt wird, legen Sie die Eigenschaft auf false fest, oder schließen Sie die Eigenschaft aus. Bei neuen Zeilen zeigt die JSON-Ausgabe \n für den Zeilenvorschub an. Das mehrzeilige Textfeld akzeptiert \r für einen Wagenrücklauf (CR) und \n für einen Zeilenvorschub (LF). Ein Standardwert kann z. B. \r\n zum Angeben von CRLF enthalten.
  • Wenn constraints.required auf true festgelegt ist, muss das Textfeld für eine erfolgreiche Überprüfung einen Wert enthalten. Standardwert: false.
  • Die validations-Eigenschaft ist ein Array, in dem Sie Bedingungen zum Überprüfen des im Textfeld angegebenen Werts hinzufügen.
  • Die Eigenschaft regex ist ein reguläres JavaScript-Ausdrucksmuster. Wenn der Wert des Textfelds angegeben wird, muss er für eine erfolgreiche Überprüfung dem Muster entsprechen. Standardwert: null. Weitere Informationen zur RegEx-Syntax finden Sie unter Sprachelemente für reguläre Ausdrücke – Kurzübersicht.
  • Die isValid-Eigenschaft enthält einen Ausdruck, dessen Auswertung true oder false ergibt. Innerhalb des Ausdrucks definieren Sie die Bedingung, die bestimmt, ob das Textfeld gültig ist.
  • Die Eigenschaft message ist eine Zeichenfolge, die angezeigt wird, wenn bei der Überprüfung des Werts des Textfelds ein Fehler auftritt.
  • Für regex kann ein Wert angegeben werden, wenn required auf false festgelegt ist. In diesem Szenario ist für eine erfolgreiche Überprüfung des Textfelds kein Wert erforderlich. Wird ein Wert angegeben, muss er dem Muster des regulären Ausdrucks entsprechen.

Beispiele

In den Beispielen wird gezeigt, wie ein einzeiliges Textfeld und ein mehrzeiliges Textfeld verwendet werden.

Einzeilig

Im folgenden Beispiel wird ein Textfeld mit dem Microsoft.Solutions.ArmApiControl-Steuerelement verwendet, um die Verfügbarkeit eines Ressourcennamens zu überprüfen.

Wenn Sie in diesem Beispiel einen Speicherkontonamen eingeben und das Textfeld verlassen, überprüft das Steuerelement, ob der Name gültig und ob er verfügbar ist. Wenn der Name ungültig oder bereits vorhanden ist, wird eine Fehlermeldung angezeigt. Ein Speicherkontoname, der gültig und verfügbar ist, wird in der Ausgabe angezeigt.

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

Mehrzeilig

In diesem Beispiel wird die multiLine-Eigenschaft verwendet, um ein mehrzeiliges Textfeld mit Platzhaltertext zu erstellen.

{
  "$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ächste Schritte