Comparteix a través de

Elemento de interfaz de usuario Microsoft.Common.TextBox

  • Article

El elemento de interfaz de usuario (UI) TextBox se puede usar para agregar texto sin formato. El elemento es un campo de entrada de una sola línea, pero admite la entrada de varias líneas con la propiedad multiLine.

Ejemplo de interfaz de usuario

El elemento TextBox utiliza un cuadro de texto de una o varias líneas.

Ejemplo de cuadro de texto de una sola línea.

Captura de pantalla de un cuadro de texto de una sola línea utilizando el elemento de UI de Microsoft.Common.TextBox.

Ejemplo de cuadro de texto de varias líneas.

Captura de pantalla de un cuadro de texto de varias líneas utilizando el elemento de UI de 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
}

Salida de ejemplo

"contoso123"

Observaciones

  • Utilice la propiedad toolTip para mostrar texto encima del elemento cuando el cursor del mouse se desplaza sobre el símbolo de información.
  • La propiedad placeholder es el texto de ayuda que desaparece cuando el usuario comienza a editar. Si se definen tanto placeholder como defaultValue, defaultValue tiene prioridad y se muestra.
  • La propiedad multiLine es un valor booleano, true o false. Para usar un cuadro de texto de varias líneas, establezca la propiedad en true. Si no se requiere un cuadro de texto de varias líneas, establezca la propiedad en false o exclúyala. En el caso de las nuevas líneas, la salida JSON muestra \n para el avance de línea. El cuadro de texto de varias líneas acepta \r para un retorno de carro (CR) y \n para un avance de línea (LF). Por ejemplo, un valor predeterminado puede incluir \r\n para especificar retorno de carro y avance de línea (CRLF).
  • Si constraints.required está establecido en true, el cuadro de texto debe contener un valor para que la validación sea correcta. El valor predeterminado es false.
  • La propiedad validations es una matriz en la que se agregan condiciones para comprobar el valor proporcionado en el cuadro de texto.
  • La propiedad regex es un patrón de expresión regular de JavaScript. Si se especifica, el valor del cuadro de texto debe coincidir con el patrón para que la validación sea correcta. El valor predeterminado es null. Para obtener más información sobre la sintaxis de regex, consulte la Referencia rápida de expresiones regulares.
  • La propiedad isValid contiene una expresión que se evalúa como true o false. Dentro de la expresión, se define la condición que determina si el cuadro de texto es válido.
  • La propiedad message es una cadena que se muestra cuando el valor del cuadro de texto no supera la validación.
  • Es posible especificar un valor para regex cuando required está establecido en false. En este escenario, no se requiere un valor para que la validación del cuadro de texto sea correcta. Si se especifica uno, debe coincidir con el patrón de expresión regular.

Ejemplos

En los ejemplos se muestra cómo usar un cuadro de texto de una sola línea y uno de varias líneas.

Una línea

En el ejemplo siguiente se usa un cuadro de texto con el control Microsoft.Solutions.ArmApiControl para comprobar la disponibilidad de un nombre de recurso.

En este ejemplo, al escribir un nombre de cuenta de almacenamiento y salir del cuadro de texto, el control comprueba si el nombre es válido y si está disponible. Si el nombre no es válido o ya existe, se muestra un mensaje de error. En la salida se muestra un nombre de cuenta de almacenamiento válido y disponible.

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

Varias líneas

En este ejemplo se usa la propiedad multiLine para crear un cuadro de texto de varias líneas con texto de marcador de posición.

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

Pasos siguientes