Elemento Microsoft.Common.TextBox dell'interfaccia utente

  • Articolo

L'elemento TextBox dell'interfaccia utente può essere usato per aggiungere testo non formattato. L'elemento è un campo di input a riga singola, ma supporta l'input su più righe con la multiLine proprietà .

Esempio di interfaccia utente

L'elemento TextBox usa una casella di testo a riga singola o a più righe.

Esempio di casella di testo a riga singola.

Screenshot di una casella di testo a riga singola usando l'elemento Dell'interfaccia utente Microsoft.Common.TextBox.

Esempio di casella di testo a più righe.

Screenshot di una casella di testo a più righe usando l'elemento Dell'interfaccia utente 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
}

Output di esempio

"contoso123"

Commenti

  • Utilizzare la toolTip proprietà per visualizzare il testo sull'elemento quando il cursore del mouse viene posizionato sul simbolo di informazioni.
  • La placeholder proprietà è il testo della Guida che scompare quando l'utente inizia a modificare. placeholder Se e defaultValue sono entrambi definiti, ha la defaultValue precedenza e viene visualizzato.
  • La multiLine proprietà è booleana o truefalse. Per usare una casella di testo a più righe, impostare la proprietà su true. Se non è necessaria una casella di testo a più righe, impostare la proprietà su false o escludere la proprietà . Per le nuove righe, l'output JSON viene visualizzato \n per il feed di riga. La casella di testo a più righe accetta \r per un ritorno a capo (CR) e \n per un avanzamento riga (LF). Ad esempio, un valore predefinito può includere \r\n per specificare CRLF.
  • Se constraints.required è impostato su true, la casella di testo deve avere un valore per la convalida. Il valore predefinito è false.
  • La validations proprietà è una matrice in cui si aggiungono condizioni per controllare il valore specificato nella casella di testo.
  • La regex proprietà è un modello di espressione regolare JavaScript. Se specificato, il valore della casella di testo deve corrispondere al modello per la convalida corretta. Il valore predefinito è null. Per altre informazioni sulla sintassi regex, vedere Informazioni di riferimento rapido sulle espressioni regolari.
  • La isValid proprietà contiene un'espressione che restituisce true o false. All'interno dell'espressione viene definita la condizione che determina se la casella di testo è valida.
  • La message proprietà è una stringa da visualizzare quando il valore della casella di testo ha esito negativo.
  • È possibile specificare un valore per regex quando required è impostato su false. In questo scenario non è richiesto un valore perché la convalida della casella di testo abbia esito positivo. Se viene specificato, deve corrispondere al modello di espressione regolare.

Esempio

Negli esempi viene illustrato come usare una casella di testo a riga singola e una casella di testo a più righe.

Riga singola

Nell'esempio seguente viene utilizzata una casella di testo con il controllo Microsoft.Solutions.ArmApiControl per verificare la disponibilità di un nome di risorsa.

In questo esempio, quando si immette un nome dell'account di archiviazione e si esce dalla casella di testo, il controllo controlla se il nome è valido e se è disponibile. Se il nome non è valido o esiste già, viene visualizzato un messaggio di errore. Nell'output viene visualizzato un nome di account di archiviazione valido e disponibile.

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

Multilinea

In questo esempio viene utilizzata la multiLine proprietà per creare una casella di testo a più righe con testo segnaposto.

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

Passaggi successivi