Partilhar via

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

  • Artigo

O TextBox elemento user-interface (UI) pode ser usado para adicionar texto não formatado. O elemento é um campo de entrada de linha única, mas suporta entrada de várias linhas com a multiLine propriedade.

Exemplo de interface do usuário

O TextBox elemento usa uma caixa de texto de linha única ou 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 Microsoft.Common.TextBox UI.

Exemplo de caixa de texto com várias linhas.

Captura de tela de uma caixa de texto de várias linhas usando o elemento Microsoft.Common.TextBox UI.

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"

Observações

  • Use a toolTip propriedade para exibir texto sobre o elemento quando o cursor do mouse estiver pairado sobre o símbolo de informações.
  • A placeholder propriedade é o texto de ajuda que desaparece quando o usuário começa a editar. Se o placeholder e defaultValue são ambos definidos, o defaultValue tem precedência e é mostrado.
  • A multiLine propriedade é booleana, true ou false. Para usar uma caixa de texto com várias linhas, defina a propriedade como true. Se uma caixa de texto com várias linhas não for necessária, defina a propriedade como false ou exclua a propriedade. Para novas linhas, a saída JSON é exibida \n para o feed de linha. A caixa de texto de várias linhas aceita \r para um retorno de carro (CR) e \n para uma alimentação de linha (LF). Por exemplo, um valor padrão pode incluir \r\n para especificar retorno de carro e alimentação de linha (CRLF).
  • Se constraints.required estiver definido como true, a caixa de texto deve ter um valor para ser validada com êxito. O valor predefinido é false.
  • A validations propriedade é uma matriz onde você adiciona condições para verificar o valor fornecido na caixa de texto.
  • A regex propriedade é um padrão de expressão regular JavaScript. Se especificado, o valor da caixa de texto deve corresponder ao padrão para ser validado com êxito. O valor predefinido é null. Para obter mais informações sobre sintaxe regex, consulte Referência rápida de expressão regular.
  • A isValid propriedade contém uma expressão que avalia como true ou false. Dentro da expressão, você define a condição que determina se a caixa de texto é válida.
  • A message propriedade é uma cadeia de caracteres a ser exibida quando o valor da caixa de texto falhar 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 for especificado, ele deve corresponder ao padrão de 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, será exibida uma mensagem de erro. 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')]"
    }
  }
}

Multi-linha

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óximos passos