Compartilhar via

Elemento de interface do usuário Microsoft.Common.TextBox

  • Artigo

Um elemento de UI (interface do usuário) TextBox que pode ser usado para adicionar texto não formatado. O elemento é um campo de entrada de linha única, mas dá suporte à entrada multilinha com a propriedade multiLine.

Exemplo de interface do usuário

O elemento TextBox usa uma caixa de texto de linha única ou de várias linhas.

Exemplo de caixa de texto de linha única.

Captura de tela de uma caixa de texto de linha única usando o elemento de interface do usuário do Microsoft.Common.TextBox.

Exemplo de caixa de texto multilinha.

Captura de tela de uma caixa de texto de várias linhas usando o elemento de interface do usuário do Microsoft.Common.TextBox.

Esquema

{
  "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
}

Saída de exemplo

"contoso123"

Comentários

  • Use a propriedade toolTip para exibir o texto sobre o elemento quando o cursor do mouse estiver sobre o símbolo de informações.
  • A propriedade placeholder é um texto de ajuda que desaparece quando o usuário começa a edição. Se placeholder e defaultValue forem definidos, defaultValue terá precedência e será exibido.
  • A multiLine propriedade é booliana true ou false. Para usar uma caixa de texto de várias linhas, de definir a propriedade como true. Se uma caixa de texto de várias linhas não for necessária, de definir a propriedade como false ou excluir a propriedade. Para novas linhas, a saída JSON mostra \n o feed de linha. A caixa de texto de várias linhas aceita \r para um CR (retorno de carro) e \n para um LF (alimentação de linha). Por exemplo, um valor padrão pode incluir \r\n para especificar o retorno de carro e a alimentação de linha (CRLF).
  • Se constraints.required estiver definido como true, a caixa de texto deve ter um valor para validar com êxito. O valor padrão é false.
  • A validations propriedade é uma matriz em que você adiciona condições para verificar o valor fornecido na caixa de texto.
  • A propriedade regex é um padrão de expressão regular JavaScript. Se especificado, o valor da caixa de texto deve corresponder ao padrão para validar com êxito. O valor padrão é null. Para obter mais informações sobre sintaxe regex, consulte Referência rápida de expressão regular.
  • A propriedade isValid contém uma expressão que é avaliada como true ou false. Na expressão, você define a condição que determina se a caixa de texto é válida.
  • A propriedade message é uma cadeia de caracteres a ser exibida quando o valor da caixa de texto falha na validação.
  • É possível especificar um valor para regex quando required é definido como false. Nesse cenário, um valor não é necessário para a caixa de texto para validar com êxito. Se um valor for especificado, ele deve corresponder ao padrão da expressão regular.

Exemplos

Os exemplos mostram como usar uma caixa de texto de linha única e uma caixa de texto de várias linhas.

Linha única

O exemplo a seguir usa uma caixa de texto com o controle Microsoft. Solutions. ArmApiControl para verificar a disponibilidade de um nome de recurso.

Neste exemplo, quando você insere um nome de conta de armazenamento e sai da caixa de texto, o controle verifica se o nome é válido e se está disponível. Se o nome for inválido ou já existir, uma mensagem de erro será exibida. Um nome de conta de armazenamento válido e disponível é mostrado na saída.

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

Várias linhas

Este exemplo usa a multiLine propriedade para criar uma caixa de texto de várias linhas com texto de espaço reservado.

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

Próximas etapas