Picker-kontroll

  • Artikkel

En kontroll som brukes til å levere en søkeopplevelse.

Merk

Full dokumentasjons- og kildekode funnet i GitHub-kodekomponentrepositoriet.

Picker-kontroll.

Bekrivelse

Velgere brukes til å velge et eller flere elementer, for eksempel merker eller filer, fra en stor liste.

Picker-kodekomponenter tillater bruk av Fluent UI Picker-menykomponentene fra lerretsapper og egendefinerte sider.

Merkevelger-kodekomponenten inneholder følgende funksjoner:

  1. Bindes til en inndatasamling for de valgte merkene.
  2. Bindes til en inndatasamling for foreslåtte merker.
  3. Gjør det mulig for brukere å velge blant forslag eller angi et fritekstmerke.
  4. Aktiverer en Ved endring-hendelse når en bruker legger til eller fjerner et merke.
  5. Tillater programmatisk Angi fokus.

Datasett

Merkevelgeren har følgende inndatadatasett, som er beskrevet detaljert i Nøkkelegenskapene senere i denne artikkelen.

  • Tags
    • TagsDisplayName
  • Suggestions
    • SuggestionsDisplayName
    • SuggestionSubDisplayName

Suggestions-datasettet filtreres ved hjelp av SearchTerm-utdataegenskapen, for eksempel:

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

Egenskaper

Nøkkelegenskaper

Egenskap Bekrivelse
Items En samling (tabell) med merker. Appen er ansvarlig for å legge til eller fjerne merker som svar på komponentens legg til- eller fjern-hendelser (beskrevet under OnChange-hendelsesdelen).
Suggestions_Items En samling (tabell) med forslag.
TagMaxWidth Maksimumsbredden for merkene under gjengivelse. Overflyttekst blir avkortet med ellipse, og et verktøytips for pekeren viser hele teksten.
AllowFreeText Når du skriver inn en verdi, velger du ikke automatisk det første forslaget, slik at du kan angi en fritekstoppføring i stedet for å velge fra en forhåndsdefinert liste.
SearchTermToShortMessage Meldingen som vises når søkeord er mindre enn MinimumSearchTermLength.
HintText Meldingen som vises i velgeren når søkeord er angitt.
NoSuggestionsFoundMessage Meldingen som vises når Forslag-samlingen ikke inneholder noen resultater.
MinimumSearchTermLength Minimum antall tegn for å utløse undermenyen forslag.
MaxTags Maksimalt antall merker som kan legges til. Etter dette nummeret blir merkevelgeren bare tilgjengelig på nytt til et merke er fjernet.
Error Sann når den røde feilrammen skal vises.

Items-egenskaper

Egenskap Bekrivelse
TagsDisplayName Satt til navnet på kolonnen som inneholder merkevisningsnavn.

Suggestions-egenskaper

Egenskap Bekrivelse
SuggestionsDisplayName satt til navnet på kolonnen som inneholder forslagsvisningsnavn.
SuggestionsSubDisplayName (Valgfritt) satt til navnet på kolonnen som inneholder den sekundære tekstlinjen.

Stilegenskaper

Egenskap Bekrivelse
Theme Godtar en JSON-streng som genereres ved hjelp av Fluent UI Theme Designer (windows.net). Hvis du lar dette stå tomt, bruker du standardtemaet definert av Power Apps. Se Bruk av tema for hjelp til å konfigurere.
FontSize Skriftstørrelsen for merkene som vises i velgeren.
BorderRadius Rammeradius for merkene som vises i velgeren.
ItemHeight Høyden på merkene (piksler) vises i velgeren.
AccessibilityLabel Skjermleser aria-etikett

Hendelsesegenskaper

Egenskap Bekrivelse
Input Event Angi til hendelsen for å sende til TagPicker

Utdata-egenskaper

Egenskap Bekrivelse
SearchTerm Teksten som er angitt i merkevelgeren som kan brukes til å filtrere datasett.
TagsDisplayName Teksten som brukes til å opprette et nytt Merke når hendelsen Ved endring starter
AutoHeight Når merkevelgeren brytes på flere linjer, kan egenskapen Automatisk høyde brukes til å styre høyden på en responsiv beholderhøyde.

Virkemåte

Støtter SetFocus som en InputEvent.

OnChange-hendelse

TagPicker-komponenten aktiverer en OnChange-hendelse når merker legges til eller fjernes. Egenskapene som brukes, er:

Egenskap Bekrivelse
TagEvent Navnet på hendelsen aktiveres
TagKey Nøkkelen til elementet som har aktivert hendelsen (hvis hendelsen er relatert til et merke)

Hendelsen må inneholde et uttrykk som ligner på følgende:

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) )
);

Begrensninger

Denne kodekomponenten kan bare brukes i lerretsapper og egendefinerte sider.