Share via

Elemen UI Microsoft.Common.TextBox

  • Artikel

Elemen antarmuka pengguna (UI) TextBox dapat digunakan untuk menambahkan teks yang tidak diformat. Elemen adalah bidang input baris tunggal, tetapi mendukung input multibaris dengan properti multiLine.

Sampel UI

Elemen TextBox menggunakan kotak teks baris tunggal atau multibaris.

Contoh kotak teks baris tunggal.

Cuplikan layar kotak teks satu baris menggunakan elemen UI Microsoft.Common.TextBox.

Contoh kotak teks multibaris.

Cuplikan layar kotak teks multibaris menggunakan elemen UI Microsoft.Common.TextBox.

Skema

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

Sampel output

"contoso123"

Keterangan

  • Gunakan properti toolTip untuk menampilkan teks tentang elemen saat kursor mouse mengarah ke simbol informasi.
  • Properti placeholder adalah teks bantuan yang menghilang saat pengguna mulai mengedit. Jika placeholder dan defaultValue sudah didefinisikan, yang defaultValue akan diutamakan dan ditampilkan.
  • Properti multiLine ini adalah boolean, true atau false. Untuk menggunakan kotak teks multibaris, atur properti ke true. Jika kotak teks multi-baris tidak diperlukan, atur properti ke false atau kecualikan properti. Untuk baris baru, output JSON menunjukkan \n untuk umpan baris. Kotak teks multibaris menerima \r untuk pengembalian pengangkutan (CR) dan \n untuk umpan baris (LF). Misalnya, nilai default dapat mencakup \r\n untuk menentukan CRLF.
  • Jika constraints.required diatur ke true, maka kotak teks harus memiliki nilai agar berhasil divalidasi. Nilai defaultnya adalah false.
  • Properti validations adalah larik tempat Anda menambahkan kondisi untuk memeriksa nilai yang disediakan dalam kotak teks.
  • Properti regex adalah pola ekspresi reguler JavaScript. Jika ditentukan, maka nilai kotak teks harus cocok dengan pola agar berhasil divalidasi. Nilai defaultnya adalah null. Untuk informasi selengkapnya tentang sintaks regex, lihat Referensi cepat ekspresi reguler.
  • Properti isValid berisi ekspresi yang mengevaluasi ke true atau false. Dalam ekspresi, Anda menentukan kondisi yang menentukan apakah kotak teks valid.
  • Properti message adalah string untuk ditampilkan saat nilai kotak teks gagal divalidasi.
  • Menentukan nilai regex saat required diatur ke false itu mungkin. Dalam skenario ini, nilai tidak diperlukan agar kotak teks berhasil divalidasi. Jika suatu nilai ditentukan,nilai itu harus cocok dengan pola ekspresi reguler.

Contoh

Contoh menunjukkan cara menggunakan kotak teks baris tunggal dan kotak teks multibaris.

Baris tunggal

Contoh berikut menggunakan kotak teks dengan kontrol Microsoft.Solutions.ArmApiControl untuk memeriksa ketersediaan nama sumber daya.

Dalam contoh ini, saat Anda memasukkan nama akun penyimpanan dan keluar dari kotak teks, kontrol akan memeriksa apakah nama tersebut valid dan tersedia. Jika nama tidak valid atau sudah ada, pesan kesalahan akan ditampilkan. Nama akun penyimpanan yang valid dan tersedia ditampilkan dalam output.

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

Multibaris

Contoh ini menggunakan properti multiLine untuk membuat kotak teks multibaris dengan teks tempat penampung.

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

Langkah berikutnya