Picker controllare

Un comando utilizzato per fornire un'esperienza di ricerca.

Nota

Documentazione e codice sorgente sono disponibili nel repository dei componenti del codice GitHub.

Description

I selettori vengono utilizzati per selezionare uno o più elementi, come tag o file, da un elenco di grandi dimensioni.

Il componente di codice del selettore consente l'utilizzo dei componenti del menu del selettore dell'interfaccia utente Fluent dall'interno di app canvas e pagine personalizzate.

Il componente di codice del selettore di tag fornisce le seguenti funzionalità:

1. Si collega a una raccolta di input per i tag scelti.
2. Si collega a una raccolta di input per i tag consigliati.
3. Consente agli utenti di selezionare dai suggerimenti o di inserire un tag di testo libero.
4. Crea un evento In caso di modifica quando un utente aggiunge o rimuove un tag.
5. Consente Imposta stato attivo programmatico.

Set di dati

Il selettore di tag ha i seguenti set di dati di input, descritti in dettaglio in Proprietà chiave più avanti in questo articolo.

• Tags
  • TagsDisplayName
• Suggestions
  • SuggestionsDisplayName
  • SuggestionSubDisplayName

I set di dati Suggestions dovrebbero essere filtrati usando la proprietà di output SearchTerm, ad esempio:

Search(colSuggestions,TagPicker.SearchTerm,"name")

Proprietà

Proprietà chiave

Proprietà	Descrizione
Items	Una raccolta (tabella) di tag. L'app è responsabile dell'aggiunta o della rimozione di tag in risposta alla creazione di eventi Aggiungi o Rimuovi da parte del componente (descritti di seguito Sezione eventi OnChange).
Suggestions_Items	Una raccolta (tabella) di consigli.
TagMaxWidth	La larghezza massima dei tag durante il rendering. Il testo in eccesso verrà troncato con i puntini di sospensione e un suggerimento al passaggio del mouse mostra il testo completo.
AllowFreeText	Quando digiti un valore, non selezionare automaticamente il primo suggerimento in modo che sia possibile fornire una voce di testo libera anziché selezionarla da un elenco predefinito.
SearchTermToShortMessage	Il messaggio da visualizzare quando termine di ricerca è inferiore a MinimumSearchTermLength.
HintText	Il messaggio da visualizzare all'interno del selettore quando non viene fornito un termine di ricerca.
NoSuggestionsFoundMessage	Il messaggio da visualizzare quando la raccolta Suggerimenti non contiene risultati.
MinimumSearchTermLength	Il numero minimo di caratteri per attivare il riquadro a comparsa dei suggerimenti.
MaxTags	Il numero massimo di tag che è possibile aggiungere. Dopo questo numero, il selettore di tag sarà riattivato solo fino alla rimozione di un tag.
Error	Vero quando dovrebbe essere visualizzato il bordo rosso dell'errore.

Items proprietà

Proprietà	Descrizione
TagsDisplayName	Imposta sul nome della colonna che contiene il nome visualizzato del tag.

Suggestions proprietà

Proprietà	Descrizione
SuggestionsDisplayName	impostato sul nome della colonna che contiene il nome visualizzato del consiglio.
SuggestionsSubDisplayName	(Facoltativo): imposta il nome della colonna che contiene la riga di testo secondaria.

Proprietà di stile

Proprietà	Descrizione
Theme	Accetta una stringa JSON generata utilizzando la finestra di progettazione del tema dell'interfaccia utente Fluent (windows.net). Lasciare questo vuoto comporterà l'utilizzo del tema predefinito definito da Power Apps. Vedi la creazione di temi per istruzioni su come eseguire la configurazione.
FontSize	la dimensione del carattere dei tag mostrati all'interno del selettore.
BorderRadius	il raggio del bordo dei tag mostrati all'interno del selettore.
ItemHeight	l'altezza dei tag (in pixel) mostrati all'interno del selettore.
AccessibilityLabel	Etichetta aria per utilità per la lettura dello schermo

Proprietà dell'evento

Proprietà	Descrizione
Input Event	Imposta sull'evento da inviare a TagPicker

Proprietà di output

Proprietà	Descrizione
SearchTerm	Il testo inserito nel selettore di tag che può essere utilizzato per filtrare il set di dati dei suggerimenti.
TagsDisplayName	il testo utilizzato per creare uno nuovo Tag quando l'evento In caso di modifica viene attivato
AutoHeight	Quando il selettore di tag occupa più righe, la proprietà Altezza automatica può essere utilizzata per controllare l'altezza di un contenitore reattivo.

Comportamento

Supporta SetFocus come un InputEvent.

Evento OnChange

Il componente TagPicker genera un evento OnChange quando i tag vengono aggiunti o rimossi. Le proprietà usate sono:

Proprietà	Descrizione
TagEvent	Nome dell'evento generato
TagKey	La chiave dell'elemento che ha generato l'evento (se l'evento è correlato a un tag)

L'evento dovrebbe contenere un'espressione simile a:

If( TagPicker.TagEvent = "Add" && CountRows(Filter(colTags,name=TagPicker.TagsDisplayName)) = 0,
    Collect( colTags, { name:TagPicker.TagsDisplayName })
);

If( TagPicker.TagEvent="Remove",
 RemoveIf( colTags,name=Text(TagPicker.TagsDisplayName) )
);

Limiti

Questo componente di codice può essere usato solo nelle app canvas e nelle pagine personalizzate.