Aracılığıyla paylaş

Microsoft.Common.EditableGrid Kullanıcı Arabirimi öğesi

  • Makale

Tablosal giriş toplama denetimi. Kılavuzdaki tüm alanlar düzenlenebilir ve satır sayısı farklılık gösterebilir.

Kullanıcı arabirimi örneği

Düzenlenebilir alanlar ve değişen satırlar içeren Microsoft.Common.EditableGrid kullanıcı arabirimi öğesinin ekran görüntüsü.

Şema

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

Örnek çıktı

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

Açıklamalar

  • Sütunlar dizisi içindeki tek geçerli denetimler TextBox, OptionsGroup ve DropDown'dır.

  • $rowIndex Değişkeni yalnızca kılavuzun sütunlarının alt öğeleri içinde yer alan ifadelerde geçerlidir. Öğenin göreli satır dizinini temsil eden bir tamsayıdır ve sayı birden başlar ve bir artar. Şemanın "columns": bölümünde gösterildiği gibi, $rowIndex doğrulama için kullanılır.

  • Değişken kullanılarak $rowIndex doğrulamalar gerçekleştirildiğinde ve take() komutlarını birleştirerek geçerli satırın last() değerini almak mümkündür.

    Örneğin:

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

  • label özelliği denetimin bir parçası olarak görünmez, ancak son sekme özetinde görüntülenir.

  • ariaLabel özelliği, kılavuzun erişilebilirlik etiketidir. Ekran okuyucu kullanan kullanıcılar için yararlı metin belirtin.

  • constraints.width özelliği, kılavuzun genel genişliğini ayarlamak için kullanılır. Seçenekler Tam, Orta, Küçük şeklindedir. Varsayılan değer Tam'dır.

  • width Sütunların alt öğelerindeki özelliği, sütun genişliğini belirler. Genişlikler 3fr gibi kesirli birimler kullanılarak belirtilir ve toplam alan kendi birimleriyle orantılı olarak sütunlara ayrılmıştır. Sütun genişliği belirtilmezse, varsayılan değer 1fr'dir.

Sonraki adımlar