Delen via


Microsoft.Common.DropDown UI-element

Een selectie besturingselement met een vervolgkeuzelijst. U kunt selectie van slechts één item of meerdere items toestaan. U kunt eventueel ook een beschrijving toevoegen aan de items.

Ui-voorbeeld

Het dropdown-element heeft verschillende opties waarmee het uiterlijk ervan in de portal wordt bepaald.

Wanneer slechts één item is toegestaan voor selectie, wordt het besturingselement weergegeven als:

Schermopname van het element Microsoft.Common.DropDown UI met één selectie ingeschakeld.

Wanneer beschrijvingen zijn opgenomen, wordt het besturingselement weergegeven als:

Schermopname van het element Microsoft.Common.DropDown UI met één selectie en itembeschrijvingen.

Wanneer meervoudige selectie is ingeschakeld, voegt het besturingselement een optie Alles selecteren en selectievakjes toe voor het selecteren van meer dan één item:

Schermopname van het element Microsoft.Common.DropDown UI met meervoudige selectie ingeschakeld, inclusief een optie Alles selecteren.

Beschrijvingen kunnen worden opgenomen in meervoudige selectie.

Schermopname van het element Microsoft.Common.DropDown UI met meervoudige selectie ingeschakeld en itembeschrijvingen.

Wanneer filteren is ingeschakeld, bevat het besturingselement een tekstvak voor het toevoegen van de filterwaarde.

Schermopname van het element Microsoft.Common.DropDown UI met meervoudige selectie en filtering ingeschakeld.

Schema

{
  "name": "element1",
  "type": "Microsoft.Common.DropDown",
  "label": "Example drop down",
  "placeholder": "",
  "defaultValue": ["Value two"],
  "toolTip": "",
  "multiselect": true,
  "selectAll": true,
  "filter": true,
  "filterPlaceholder": "Filter items ...",
  "multiLine": true,
  "defaultDescription": "A value for selection",
  "constraints": {
    "allowedValues": [
      {
        "label": "Value one",
        "description": "The value to select for option 1.",
        "value": "one"
      },
      {
        "label": "Value two",
        "description": "The value to select for option 2.",
        "value": "two"
      }
    ],
    "required": true
  },
  "visible": true
}

Voorbeelduitvoer

"two"

Opmerkingen

  • Gebruik multiselect dit om op te geven of gebruikers meer dan één item kunnen selecteren.
  • selectAll Standaard geldt true dat wanneer meervoudige selectie is ingeschakeld.
  • Met de filter eigenschap kunnen gebruikers zoeken in een lange lijst met opties.
  • Het label voor constraints.allowedValues is de weergavetekst voor een item en de waarde is de uitvoerwaarde van het element wanneer dit is geselecteerd.
  • Indien opgegeven, moet de standaardwaarde een label zijn dat aanwezig is in constraints.allowedValues. Als dit niet is opgegeven, wordt het eerste item geselecteerd constraints.allowedValues . De standaardwaarde is null.
  • constraints.allowedValues moet ten minste één item hebben.
  • Als u een waarde wilt emuleren die niet vereist is, voegt u een item toe met een label en waarde van "" (lege tekenreeks) aan constraints.allowedValues.
  • De defaultDescription eigenschap wordt gebruikt voor items die geen beschrijving hebben.
  • De placeholder eigenschap is Help-tekst die verdwijnt wanneer de gebruiker begint met bewerken. Als de placeholder en defaultValue beide zijn gedefinieerd, heeft de defaultValue prioriteit en wordt deze weergegeven.

Opmerking

In het volgende voorbeeld wordt het defaultValue gedefinieerd met behulp van de waarden van de allowedValues labels in plaats van de labels. De standaardwaarde kan meerdere waarden bevatten wanneer multiselect deze is ingeschakeld.

Schermopname van het element Microsoft.Common.DropDown UI met meervoudige selectie ingeschakeld en meerdere standaardwaarden.

{
  "name": "element1",
  "type": "Microsoft.Common.DropDown",
  "label": "Example drop down",
  "placeholder": "",
  "defaultValue": [{"value": "one"}, {"value": "two"}],
  "toolTip": "Multiple values can be selected",
  "multiselect": true,
  "selectAll": true,
  "filter": true,
  "filterPlaceholder": "Filter items ...",
  "multiLine": true,
  "defaultDescription": "A value for selection",
  "constraints": {
    "allowedValues": [
      {
        "label": "Value one",
        "description": "The value to select for option 1.",
        "value": "one"
      },
      {
        "label": "Value two",
        "description": "The value to select for option 2.",
        "value": "two"
      }
    ],
    "required": true
  },
  "visible": true
}

Volgende stappen