Condividi tramite


Elemento Microsoft.Common.DropDown dell'interfaccia utente

Controllo di selezione con elenco a discesa. È possibile consentire la selezione di un solo elemento o di più elementi. Facoltativamente, è anche possibile includere una descrizione con gli elementi.

Esempio di interfaccia utente

L'elemento DropDown include opzioni diverse che ne determinano l'aspetto nel portale.

Quando è consentito solo un singolo elemento per la selezione, il controllo viene visualizzato come segue:

Screenshot dell'elemento Microsoft.Common.DropDown dell'interfaccia utente con selezione singola abilitata.

Quando vengono incluse descrizioni, il controllo viene visualizzato come segue:

Screenshot dell'elemento Microsoft.Common.DropDown dell'interfaccia utente con descrizioni di selezione singola e elemento.

Quando è abilitata la selezione multipla, il controllo aggiunge un'opzione Seleziona tutto e le caselle di controllo per la selezione di più elementi:

Screenshot dell'elemento Microsoft.Common.DropDown dell'interfaccia utente con selezione multipla abilitata, inclusa un'opzione Seleziona tutto.

Le descrizioni possono essere incluse con selezione multipla abilitata.

Screenshot dell'elemento Microsoft.Common.DropDown dell'interfaccia utente con descrizioni di elementi e con selezione multipla abilitata.

Quando il filtro è abilitato, il controllo include una casella di testo per aggiungere il valore di filtro.

Screenshot dell'elemento Microsoft.Common.DropDown dell'interfaccia utente con selezione multipla e filtro abilitato.

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
}

Output di esempio

"two"

Osservazioni:

  • Usare multiselect per specificare se gli utenti possono selezionare più di un elemento.
  • Per impostazione predefinita, selectAll è true quando è abilitata la selezione multipla.
  • La filter proprietà consente agli utenti di eseguire ricerche in un lungo elenco di opzioni.
  • L'etichetta per constraints.allowedValues è il testo visualizzato per un elemento e il rispettivo valore è il valore di output dell'elemento in caso di selezione.
  • Se specificato, il valore predefinito deve essere un'etichetta presente in constraints.allowedValues. Se non è specificato, viene selezionato il primo elemento in constraints.allowedValues. Il valore predefinito è null.
  • constraints.allowedValues deve contenere almeno un elemento.
  • Per emulare un valore non richiesto, aggiungere un elemento con un'etichetta e un valore "" (stringa vuota) a constraints.allowedValues.
  • La defaultDescription proprietà viene utilizzata per gli elementi che non hanno una descrizione.
  • La placeholder proprietà è il testo della Guida che scompare quando l'utente inizia la modifica. placeholder Se e defaultValue sono entrambi definiti, l'oggetto defaultValue ha la precedenza e viene visualizzato.

Esempio

Nell'esempio seguente l'oggetto defaultValue viene definito usando i valori di allowedValues anziché le etichette. Il valore predefinito può contenere più valori quando multiselect è abilitato.

Screenshot dell'elemento Microsoft.Common.DropDown dell'interfaccia utente con selezione multipla abilitata e più valori predefiniti.

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

Passaggi successivi