Condividi tramite

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 utilizza 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 con 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"

Osservazioni:

  • Utilizzare la toolTip proprietà per visualizzare 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 la modifica. placeholder Se e defaultValue sono entrambi definiti, l'oggetto defaultValue ha la precedenza e viene visualizzato.
  • La multiLine proprietà è booleana true o false. Per utilizzare 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 convalidare correttamente. Il valore predefinito è null. Per altre informazioni sulla sintassi regex, vedere Riferimento rapido all'espressione regolare.
  • La isValid proprietà contiene un'espressione che restituisce true o false. All'interno dell'espressione si definisce la condizione che determina se la casella di testo è valida.
  • La message proprietà è una stringa da visualizzare quando il valore della casella di testo non riesce a convalidare.
  • È 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.

Esempi

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 usata 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 di 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')]"
    }
  }
}

Multiriga

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