Comparteix a través de

Control Picker

  • Article

Control utilitzat per proporcionar una experiència de cerca.

Nota

Trobareu la documentació completa i el codi font al dipòsit de components de codi de GitHub.

Control de recol·lectors.

Descripció

Els Pickers s'utilitzen per seleccionar un o diversos elements, com ara etiquetes o fitxers, d'una llista gran.

Els components de codi dels Pickers permeten utilitzar els components de menú de picker de Fluent UI des de les aplicacions del llenç i les pàgines personalitzades.

El component de codi Selector d'etiquetes proporciona les característiques següents:

  1. S'enllaça amb una col·lecció d'entrades per a les etiquetes triades.
  2. S'enllaça amb una col·lecció d'entrades per a les etiquetes suggerides.
  3. Permet als usuaris seleccionar entre suggeriments o introduir una etiqueta de text lliure.
  4. Crea una incidència Quan canviï quan un usuari afegeix o suprimeix una etiqueta.
  5. Permet Definir el focus amb programació.

Conjunts de dades

El selector d'etiquetes té els següents conjunts de dades d'entrada, que es descriuen detalladament a Propietats clau, més endavant en aquest article.

  • Tags
    • TagsDisplayName
  • Suggestions
    • SuggestionsDisplayName
    • SuggestionSubDisplayName

El conjunt de dades Suggestions s'ha de filtrar amb la propietat de sortida SearchTerm, per exemple:

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

Propietats

Propietats de la clau

Propietat Descripció
Items Una col·lecció (taula) d'etiquetes. L'aplicació és la responsable d'afegir o suprimir etiquetes com a resposta a les incidències Addició o supressió d'incidències del component (descrites a la secció d'incidències onChange).
Suggestions_Items Una col·lecció (taula) de suggeriments.
TagMaxWidth L'amplada màxima de les etiquetes en representar-les. El text de desbordament es trunca amb punts suspensius i un indicador de funció del cursor mostra tot el text.
AllowFreeText Quan escriviu un valor, no seleccioneu automàticament el primer suggeriment perquè es pugui proporcionar una entrada de text lliure en lloc de seleccionar-la d'una llista predefinida.
SearchTermToShortMessage El missatge que es mostrarà quan el terme de cerca sigui inferior al MinimumSearchTermLength.
HintText El missatge que es mostrarà dins del Picker quan no es proporcioni cap terme de cerca.
NoSuggestionsFoundMessage El missatge que es mostrarà quan la col·lecció Suggeriments no contingui resultats.
MinimumSearchTermLength Nombre mínim de caràcters per activar el desplegable de suggeriments.
MaxTags Nombre màxim d'etiquetes que es poden afegir. Després d'aquest nombre, el selector d'etiquetes es tornarà a utilitzar fins que se suprimeixi una etiqueta.
Error Cert quan s'ha de visualitzar la vora vermella d'error.

Propietats dels Items

Propietat Descripció
TagsDisplayName Definiu el nom de la columna que conté el nom de visualització de l'etiqueta.

Propietats dels Suggestions

Propietat Descripció
SuggestionsDisplayName definiu el nom de la columna que conté el nom de visualització del suggeriment.
SuggestionsSubDisplayName (Opcional) definit com el nom de la columna que conté la línia de text secundària.

Propietats d'estil

Propietat Descripció
Theme Accepta una cadena JSON generada mitjançant el Fluent UI Theme Designer (windows.net). Deixant aquest camp en blanc s'utilitzarà el tema per defecte definit per Power Apps. Per obtenir ajuda sobre com s'ha de configurar, vegeu temes.
FontSize mida del tipus de lletra de les etiquetes que es mostren a l'interior del Picker.
BorderRadius radi de la vora de les etiquetes que es mostren a l'interior del Picker.
ItemHeight l'alçada de les etiquetes (píxels) que es mostren a l'interior del selector.
AccessibilityLabel Etiqueta aria de lector de pantalla

Propietats de la incidència

Propietat Descripció
Input Event Es defineix en la incidència per enviar a TagPicker

Propietats de sortida

Propietat Descripció
SearchTerm Text introduït al selector d'etiquetes que es pot utilitzar per filtrar el conjunt de dades de suggeriments.
TagsDisplayName text utilitzat per crear una etiqueta nova quan s'activa la incidència Quan canvia
AutoHeight Quan el selector d'etiquetes s'ajusta a diverses línies, la propietat Alçada automàtica es pot utilitzar per controlar l'alçada del contenidor dinàmic.

Comportament

Admet SetFocus com un InputEvent.

Incidència OnChange

El component TagPicker crea una incidència OnChange quan s'afegeixen o se suprimeixen etiquetes. Les propietats utilitzades són:

Propietat Descripció
TagEvent El nom de la incidència creada
TagKey La clau de l'element que ha creat la incidència (si la incidència està relacionada amb una etiqueta)

La incidència hauria de contenir una expressió semblant 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) )
);

Limitacions

Aquest codi del llenç només es pot utilitzar a les aplicacions del llenç i a les pàgines personalitzades.