Partager via

Élément d’interface utilisateur Microsoft.Common.DropDown

  • Article

Contrôle de sélection avec liste déroulante. Vous pouvez autoriser la sélection d’un seul élément ou celle de plusieurs éléments. Vous pouvez également joindre une description aux éléments.

Exemple d’interface utilisateur

L’élément DropDown a différentes options qui déterminent son apparence dans le portail.

Quand un seul élément peut être sélectionné, le contrôle s’affiche comme suit :

Capture d’écran de l’élément de l’interface utilisateur Microsoft.Common.DropDown avec la sélection unique activée.

Lorsque des descriptions sont incluses, le contrôle s’affiche comme suit :

Capture d’écran de l’élément de l’interface utilisateur Microsoft.Common.DropDown avec une unique sélection et les descriptions de l’élément.

Lorsque la sélection multiple est activée, le contrôle ajoute une option Sélectionner tout et des cases à cocher pour sélectionner plusieurs éléments :

Capture d’écran de l’élément de l’interface utilisateur Microsoft.Common.DropDown avec la multisélection activée, notamment l’option Tout sélectionner.

Les descriptions peuvent être incluses lorsque la sélection multiple est activée.

Capture d’écran de l’élément de l’interface utilisateur Microsoft.Common.DropDown avec la multisélection activée et les descriptions de l’élément.

Lorsque le filtrage est activé, le contrôle comprend une zone de texte pour ajouter la valeur de filtrage.

Capture d’écran de l’élément de l’interface utilisateur Microsoft.Common.DropDown avec la multisélection et le filtrage activés.

schéma

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

Exemple de sortie

"two"

Notes

  • Utilisez multiselect pour spécifier si les utilisateurs peuvent sélectionner plus d’un élément.
  • Par défaut, selectAll est défini true lorsque la sélection multiple est activée.
  • La propriété filter permet aux utilisateurs de rechercher parmi une longue liste d’options.
  • L’étiquette de constraints.allowedValues est le texte qui s’affiche pour un élément, et sa valeur est la valeur de sortie de l’élément sélectionné lors de la sélection.
  • Si elle est spécifiée, la valeur par défaut doit être une étiquette présente dans constraints.allowedValues. Dans le cas contraire, le premier élément de constraints.allowedValues est sélectionné. La valeur par défaut est null.
  • constraints.allowedValues doit avoir au moins un élément.
  • Pour émuler une valeur qui n’est pas requise, ajoutez un élément avec une étiquette et la valeur de "" (chaîne vide) à constraints.allowedValues.
  • La propriété defaultDescription est utilisée pour les éléments qui n’ont pas de description.
  • La propriété placeholder est un texte d’aide qui disparaît lorsque l’utilisateur commence à modifier. Si les placeholder et defaultValue sont définis, le defaultValue est prioritaire et est affiché.

Exemple

Dans l’exemple suivant, le defaultValue est défini à l’aide des valeurs de allowedValues au lieu d’étiquettes. La valeur par défaut peut contenir plusieurs valeurs lorsque multiselect est activé.

Capture d’écran de l’élément de l’interface utilisateur Microsoft.Common.DropDown avec la multisélection activée et plusieurs valeurs par défaut. 

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

Étapes suivantes