Delen via

Picker controle

  • Artikel

Een besturingselement dat wordt gebruikt om een zoekervaring te bieden.

Notitie

Volledige documentatie en broncode vindt u in de GitHub-opslagplaats voor codeonderdelen.

Besturingselement Picker

Omschrijving

Pickers worden gebruikt om een of meer items, zoals tags of bestanden, uit een grote lijst te selecteren.

Picker-codeonderdelen maken het gebruik mogelijk van de Fluent UI-picker-menuonderdelen vanuit canvas-apps en aangepaste pagina's.

Het codeonderdeel Tag Picker biedt de volgende functies:

  1. Bindt aan een invoerverzameling voor de gekozen tags.
  2. Bindt aan een invoerverzameling voor voorgestelde tags.
  3. Stelt gebruikers in staat te kiezen uit suggesties of een vrije teksttag in te voeren.
  4. Activeert een OnChange-gebeurtenis wanneer een gebruiker een tag toevoegt of verwijdert.
  5. Staat programmatische Focus instellen toe.

Gegevenssets

De Tag Picker heeft de volgende invoergegevebssets, die in detail worden beschreven in Belangrijkste eigenschappen verderop in dit artikel.

  • Tags
    • TagsDisplayName
  • Suggestions
    • SuggestionsDisplayName
    • SuggestionSubDisplayName

De gegevensset Suggestions moet worden gefilterd met de uitvoereigenschap SearchTerm, bijvoorbeeld:

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

Eigenschappen

Belangrijke eigenschappen

Eigenschappen Omschrijving
Items Een verzameling (tabel) met tags. De app is verantwoordelijk voor het toevoegen of verwijderen van tags als reactie op het aanmaken van Toevoegen- of Verwijderen-gebeurtenissen van het onderdeel (beschreven in de onderstaande sectie OnChange-gebeurtenis).
Suggestions_Items Een verzameling (tabel) met suggesties.
TagMaxWidth De maximale breedte van de tags bij het weergeven. Overlooptekst wordt afgekapt met beletseltekens en een zwevende knopinfo toont de volledige tekst.
AllowFreeText Selecteer bij het typen van een waarde niet automatisch de eerste suggestie zodat een vrije tekstinvoer kan worden geleverd in plaats van te selecteren uit een vooraf gedefinieerde lijst.
SearchTermToShortMessage Het bericht dat moet worden weergegeven wanneer de zoekterm korter is dan de MinimumSearchTermLength.
HintText Het bericht dat moet worden weergegeven in de kiezer wanneer geen zoekterm wordt opgegeven.
NoSuggestionsFoundMessage Het bericht dat moet worden weergegeven wanneer de collectie Suggesties geen resultaten bevat.
MinimumSearchTermLength Het minimum aantal tekens om de flyout van suggesties te activeren.
MaxTags Het maximum aantal tags dat kan worden toegevoegd. Na dit aantal wordt de tagkiezer alleen opnieuw gebruikt totdat een tag wordt verwijderd.
Error Waar als de rode foutrand moet worden weergegeven.

Items eigenschappen

Eigenschappen Omschrijving
TagsDisplayName Ingesteld op de naam van de kolom die de weergavenaam voor de tag bevat.

Suggestions eigenschappen

Eigenschappen Omschrijving
SuggestionsDisplayName ingesteld op de naam van de kolom die de weergavenaam voor de suggestie bevat.
SuggestionsSubDisplayName (Optioneel): ingesteld op de naam van de kolom die de secundaire tekstregel bevat.

Stijleigenschappen

Eigenschappen Omschrijving
Theme Accepteert een JSON-tekenreeks die is gegenereerd met Ontwerper van Fluent UI Theme (windows.net). Als u dit leeg laat, wordt het standaardthema gebruikt dat door Power Apps is gedefinieerd. Zie Themagebruik voor richtlijnen voor configureren.
FontSize De lettergrootte van de tags die in de kiezer worden weergegeven.
BorderRadius De randradius van de tags die in de kiezer worden weergegeven.
ItemHeight De hoogte van de tags (pixels) die in de kiezer worden weergegeven.
AccessibilityLabel Arialabel voor schermlezers

Eigenschappen van gebeurtenis

Eigenschappen Omschrijving
Input Event Instellen op de gebeurtenis die naar de TagPicker moet worden verzonden

Uitvoereigenschappen

Eigenschappen Omschrijving
SearchTerm De tekst die is ingevoerd in de tagkiezer die kan worden gebruikt om de gegevensset met suggesties te filteren.
TagsDisplayName De tekst die wordt gebruikt om een nieuwe Tag te maken wanneer de gebeurtenis OnChange wordt geactiveerd
AutoHeight Wanneer de tagkiezer meerdere regels omvat, kan de eigenschap Automatische hoogte worden gebruikt om de hoogte van een responsieve containerhoogte te bepalen.

Gedrag

Ondersteunt SetFocus als een InputEvent.

OnChange-gebeurtenis

Het onderdeel TagPicker activeert een gebeurtenis OnChange wanneer tags worden toegevoegd of verwijderd. De gebruikte eigenschappen zijn:

Eigenschappen Omschrijving
TagEvent De naam van de geactiveerde gebeurtenis.
TagKey De sleutel van het item waarmee de gebeurtenis is geactiveerd (als de gebeurtenis is gerelateerd aan een tag)

De gebeurtenis moet een uitdrukking bevatten die lijkt op:

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

Beperkingen

Dit codeonderdeel kan alleen worden gebruikt in canvas-apps en aangepaste pagina's.