Bagikan melalui

Elemen antarmuka pengguna Microsoft.Common.EditableGrid

  • Artikel

Kontrol untuk mengumpulkan input tabular. Semua bidang dalam kisi dapat diedit dan jumlah baris mungkin bervariasi.

Sampel UI

Cuplikan layar elemen UI Microsoft.Common.EditableGrid dengan bidang yang dapat diedit dan berbagai baris.

Skema

{
  "name": "people",
  "type": "Microsoft.Common.EditableGrid",
  "ariaLabel": "Enter information per person",
  "label": "People",
  "constraints": {
    "width": "Full",
    "rows": {
      "count": {
        "min": 1,
        "max": 10
      }
    },
    "columns": [
      {
        "id": "colName",
        "header": "Name",
        "width": "1fr",
        "element": {
          "type": "Microsoft.Common.TextBox",
          "placeholder": "Full name",
          "constraints": {
            "required": true,
            "validations": [
              {
                "isValid": "[startsWith(last(take(steps('grid').people, $rowIndex)).colName, 'contoso')]",
                "message": "Must start with 'contoso'."
              },
              {
                "regex": "^[a-z0-9A-Z]{1,30}$",
                "message": "Only alphanumeric characters are allowed, and the value must be 1-30 characters long."
              }
            ]
          }
        }
      },
      {
        "id": "colGender",
        "header": "Gender",
        "width": "1fr",
        "element": {
          "name": "dropDown1",
          "type": "Microsoft.Common.DropDown",
          "placeholder": "Select a gender...",
          "constraints": {
            "allowedValues": [
              {
                "label": "Female",
                "value": "female"
              },
              {
                "label": "Male",
                "value": "male"
              },
              {
                "label": "Other",
                "value": "other"
              }
            ],
            "required": true
          }
        }
      },
      {
        "id": "colContactPreference",
        "header": "Contact preference",
        "width": "1fr",
        "element": {
          "type": "Microsoft.Common.OptionsGroup",
          "constraints": {
            "allowedValues": [
              {
                "label": "Email",
                "value": "email"
              },
              {
                "label": "Text",
                "value": "text"
              }
            ],
            "required": true
          }
        }
      }
    ]
  }
}

Sampel output

{
  "colName": "contoso",
  "colGender": "female",
  "colContactPreference": "email"
}

Keterangan

  • Satu-satunya kontrol yang valid dalam array kolom adalah TextBox, OptionsGroup, dan DropDown.

  • Variabel $rowIndex hanya valid dalam ekspresi yang terkandung dalam anak kolom kisi. Ini adalah bilangan bulat yang mewakili indeks baris relatif elemen dan hitungannya dimulai pada satu dan bertambah satu per satu. Seperti yang ditunjukkan di bagian "columns": skema, bagian $rowIndex digunakan untuk validasi.

  • Saat validasi dilakukan menggunakan variabel $rowIndex, nilai baris saat ini bisa didapatkan dengan menggabungkan perintah last() dan take().

    Contohnya:

    last(take(<reference_to_grid>, $rowIndex))

  • Properti label tidak muncul sebagai bagian dari kontrol tetapi ditampilkan pada ringkasan tab akhir.

  • Properti ariaLabel adalah label aksesibilitas untuk kisi. Menentukan teks bermanfaat bagi pengguna yang menggunakan pembaca layar.

  • Properti constraints.width ini digunakan untuk mengatur lebar keseluruhan kisi. Pilihannya Penuh, Sedang, Kecil. Pilihan defaultnya adalah Penuh.

  • Properti width pada anak-anak kolom menentukan lebar kolom. Lebar ditentukan menggunakan unit pecahan seperti 3fr, dengan total ruang dialokasikan ke kolom yang proporsional dengan unitnya. Jika tidak ada lebar kolom yang ditentukan, unit defaultnya adalah 1fr.

Langkah berikutnya