Microsoft.Common.TextBox UI, element

  • Artykuł

Element TextBox interfejsu użytkownika może służyć do dodawania niesformatowanych tekstu. Element to jednowierszowe pole wejściowe, 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 elementu Microsoft.Common.TextBox.

Przykład wielowierszowego pola tekstowego.

Zrzut ekranu przedstawiający wielowierszowe pole tekstowe elementu Microsoft.Common.TextBox.

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

  • Użyj właściwości , toolTip aby wyświetlić tekst dotyczący elementu po umieszczeniu kursora myszy na symbolu informacji.
  • Właściwość placeholder jest tekstem pomocy, który zniknie po rozpoczęciu edycji przez użytkownika. placeholder Jeśli wartości i defaultValue są zdefiniowane, pierwszeństwo defaultValue ma wartość i jest wyświetlana.
  • Właściwość multiLine ma wartość logiczną true lub false. Aby użyć wielowierszowego pola tekstowego, ustaw właściwość na truewartość . Jeśli pole tekstowe z wieloma wierszami nie jest potrzebne, ustaw właściwość na false lub wyklucz właściwość . W przypadku nowych wierszy dane wyjściowe JSON są wyświetlane \n dla kanału informacyjnego wiersza. Wielowierszowe pole tekstowe akceptuje zwrot karetki \r (CR) i \n źródło wiersza (LF). Na przykład wartość domyślna może obejmować \r\n określenie wartości CRLF.
  • Jeśli constraints.required jest ustawiona wartość true, pole tekstowe musi mieć wartość do pomyślnego zweryfikowania. Wartość domyślna to false.
  • Właściwość validations jest tablicą, w której dodaje się warunki sprawdzania wartości podanej w polu tekstowym.
  • Właściwość regex jest wzorcem wyrażeń regularnych języka JavaScript. Jeśli zostanie określony, wartość pola tekstowego musi być zgodna ze wzorcem w celu pomyślnego zweryfikowania. Wartość domyślna to null. Aby uzyskać więcej informacji na temat składni wyrażenia regularnego, zobacz Skrócona dokumentacja wyrażeń regularnych.
  • 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, który ma być wyświetlany, gdy walidacja wartości pola tekstowego zakończy się niepowodzeniem.
  • 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 jest 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 z wieloma wierszami.

Jednowierszowe

W poniższym przykładzie użyto pola tekstowego z kontrolką Microsoft.Solutions.ArmApiControl , aby sprawdzić dostępność 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 użyto multiLine właściwości do utworzenia wielowierszowego pola tekstowego 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