Dela via

Picker kontroll

  • Artikel

En kontroll som används för att ge sökupplevelse.

Kommentar

Fullständig dokumentation och källkod finns i lagringsplatsen för GitHub-kodkomponenter.

Picker-kontroll.

Beskrivning

Väljare används för att välja ett eller flera objekt, till exempel taggar eller filer, i en lång lista.

Väljarkodkomponenter gör det möjligt att använda menykomponenter för Fluent UI-väljare inifrån arbetsyteappar och anpassade sidor.

Kodkomponenten Taggväljare innehåller följande funktioner:

  1. Kopplas till en indatasamling för de valda taggarna.
  2. Kopplas till en indatasamling för föreslagna taggar.
  3. Tillåter användare att välja bland förslag eller ange en fritexttagg.
  4. Skapar en Vid förändring-händelse när en användare lägger till eller tar bort en tagg.
  5. Tillåter programmatisk Ställ in fokus.

Datauppsättningar

Taggväljaren har följande indatauppsättningar, som beskrivs i detalj i Viktiga egenskaper längre fram i den här artikeln.

  • Tags
    • TagsDisplayName
  • Suggestions
    • SuggestionsDisplayName
    • SuggestionSubDisplayName

Datauppsättningen Suggestions bör filtreras med hjälp av utdataegenskapen SearchTerm, till exempel:

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

Egenskaper

Nyckelegenskaper

Property Beskrivning
Items En samling (tabell) med taggar. Programmet ansvarar för att lägga till eller ta bort taggar som svar på komponentens höjning av Lägg till eller Ta bort händelser (beskrivs i avsnittet om OnChange-händelse) nedan.
Suggestions_Items En samling (tabell) med förslag.
TagMaxWidth Taggarnas maximala bredd vid återgivningen. Spilltext kommer att trunkeras med ellipser och ett hovringsverktygstips visar hela texten.
AllowFreeText När du skriver ett värde ska du inte automatiskt välja det första förslaget så att du kan ange en fritext i stället för att välja en fördefinierad lista.
SearchTermToShortMessage Det meddelande som ska visas när sökterm är mindre än MinimumSearchTermLength.
HintText Meddelandet som ska visas i väljaren när ingen sökterm anges.
NoSuggestionsFoundMessage Meddelandet som ska visas när förslagssamlingen inte innehåller några resultat.
MinimumSearchTermLength Minsta antal tecken för att utlösa utfällbar meny för förslag.
MaxTags Det maximala antalet taggar som kan läggas till. Efter det här numret kan taggväljaren endast visas på nytt tills en tagg tas bort.
Error Sant när den röda felkanten ska visas.

Items Egenskaper

Property Beskrivning
TagsDisplayName Anges som namnet på kolumnen som innehåller taggens visningsnamn.

Suggestions Egenskaper

Property Beskrivning
SuggestionsDisplayName anges till namnet på kolumnen som innehåller förslag visningsnamn.
SuggestionsSubDisplayName (Valfritt) anges till namnet på kolumnen som innehåller den andra textraden.

Stilegenskaper

Property Beskrivning
Theme Godkänner en JSON-sträng som genereras med Fluent UI temadesigner (windows.net). Om du lämnar detta tomt används standardstandarden som definieras av Power Apps. Se tema för vägledning om hur du konfigurerar.
FontSize teckenstorleken för de taggar som visas i väljaren.
BorderRadius kantlinjeradien för de taggar som visas i väljaren.
ItemHeight höjden på de taggar (bildpunkter) som visas i väljaren.
AccessibilityLabel Aria-etikett för skärmläsare

Händelseegenskaper

Property Beskrivning
Input Event Ställ in den händelse som ska skickas till TagPicker

Utdataegenskaper

Property Beskrivning
SearchTerm Text som angetts i taggväljaren och som kan användas för att filtrera förslag datauppsättning.
TagsDisplayName Texten som används för att skapa en ny tagg när händelsen Vid ändring utlöses
AutoHeight När taggväljaren radas in på flera rader kan egenskapen Automatisk höjd användas för att styra höjden på en behållare med höjden.

Funktionssätt

Stödjer SetFocus som en InputEvent.

OnChange-händelse

Komponenten TagPicker förser en OnChange-händelse med taggar som läggs till eller tas bort. Följande egenskaper används:

Property Beskrivning
TagEvent Namnet på händelsen som utlöstes
TagKey Nyckeln för objektet som har utlöst händelsen (om händelsen är relaterad till en tagg)

Händelsen ska innehålla ett uttryck liknande:

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

Begränsningar

Den här kodkomponenten kan endast användas i arbetsyteappar och anpassade sidor.