Microsoft.Common.TextBox, element interfejsu użytkownika

  • Artykuł

Element TextBox interfejsu użytkownika może służyć do dodawania niesformatowanych tekstu. Element jest jednowierszowym polem wejściowym, ale obsługuje wprowadzanie wielowierszowe z właściwością multiLine .

Przykład interfejsu użytkownika

Element TextBox używa jednowierszowego lub wielowierszowego pola tekstowego.

Przykład jednowierszowego pola tekstowego.

Zrzut ekranu przedstawiający jednowierszowe pole tekstowe z elementem Microsoft.Common.TextBox UI.

Przykład pola tekstowego z wieloma wierszami.

Zrzut ekranu przedstawiający pole tekstowe z wieloma wierszami przy użyciu elementu Microsoft.Common.TextBox UI.

Schemat

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

Przykładowe dane wyjściowe

"contoso123"

Uwagi

  • toolTip Użyj właściwości , aby wyświetlić tekst o elemecie po umieszczeniu kursora myszy na symbolu informacji.
  • Właściwość placeholder to tekst pomocy, który zniknie po rozpoczęciu edytowania przez użytkownika. placeholder Jeśli parametr i defaultValue są zdefiniowane, defaultValue ma pierwszeństwo i jest wyświetlany.
  • Właściwość multiLine jest wartością logiczną true lub false. Aby użyć wielowierszowego pola tekstowego, ustaw właściwość na true. Jeśli pole tekstowe wielowierszowe nie jest potrzebne, ustaw właściwość na false lub wykluczyć właściwość. W przypadku nowych wierszy dane wyjściowe JSON są wyświetlane \n dla kanału informacyjnego wiersza. Wielowierszowe \r pole tekstowe akceptuje zwrot karetki (CR) i \n dla kanału informacyjnego wiersza (LF). Na przykład wartość domyślna może obejmować \r\n określenie crLF.
  • Jeśli constraints.required ustawiono truewartość , pole tekstowe musi mieć wartość do pomyślnego zweryfikowania. Wartość domyślna to false.
  • Właściwość to tablica validations , w której można dodawać warunki sprawdzania wartości podanej w polu tekstowym.
  • Właściwość regex jest wzorcem wyrażenia regularnego języka JavaScript. Jeśli zostanie określona, wartość pola tekstowego musi być zgodna ze wzorcem, aby pomyślnie zweryfikować. Wartość domyślna to null. Aby uzyskać więcej informacji na temat składni regex, zobacz Szybki przewodnik dotyczący wyrażenia regularnego.
  • Właściwość isValid zawiera wyrażenie, które daje wartość true lub false. W wyrażeniu zdefiniujesz warunek określający, czy pole tekstowe jest prawidłowe.
  • Właściwość message jest ciągiem do wyświetlenia, gdy wartość pola tekstowego kończy się niepowodzeniem walidacji.
  • Istnieje możliwość określenia wartości dla regex parametru , gdy required jest ustawiona wartość false. W tym scenariuszu wartość nie jest wymagana, aby pole tekstowe zostało pomyślnie zweryfikowane. Jeśli zostanie określony, musi być zgodny ze wzorcem wyrażenia regularnego.

Przykłady

W przykładach pokazano, jak używać jednowierszowego pola tekstowego i pola tekstowego wielowierszowego.

Jednowierszowe

W poniższym przykładzie użyto pola tekstowego z kontrolką Microsoft.Solutions.ArmApiControl w celu sprawdzenia dostępności nazwy zasobu.

W tym przykładzie po wprowadzeniu nazwy konta magazynu i wyjściu z pola tekstowego kontrolka sprawdza, czy nazwa jest prawidłowa i czy jest dostępna. Jeśli nazwa jest nieprawidłowa lub już istnieje, zostanie wyświetlony komunikat o błędzie. Nazwa konta magazynu, która jest prawidłowa i dostępna, jest wyświetlana w danych wyjściowych.

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

Wiele wierszy

W tym przykładzie multiLine użyto właściwości do utworzenia pola tekstowego wielowierszowego z tekstem zastępczym.

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

Następne kroki