Tag picker

Use lcsTagPicker for skills on a profile, categories on a request, labels on a task: a few values from a longer list, shown as chips. The combo box does multi-select, but it keeps the choices inside a dropdown, can't add a value that isn't in the list, and shows nothing of what's chosen until you open it. This component puts the choices in front of people:

• Chips for the tags chosen so far, in your accent colour, each with a remove button named "Remove Power Apps";
• Suggestions as you type, from Options, with the ones already chosen left out and a limit on how many show;
• New tags from what's typed, when AllowNew is on and nothing matches exactly;
• MaxTags: at the limit the box says so and stops suggesting;
• SelectedKeys (a comma list for a text column) and SelectedTags (a table for a choices column or a related table), OnChange, and Add, Remove and Clear from your app.

The examples call it tpSkills on a profile form.

Options from a Dataverse table, the chosen keys saved to a text column:

// tpSkills.Options
ShowColumns(RenameColumns(Skills, "Skill", "Key", "Name", "Label"), "Key", "Label")

// tpSkills.DefaultKeys
varProfile.Skills

// btnSave.OnSelect
Patch(Profiles, varProfile, {Skills: tpSkills.SelectedKeys})

Save to a many-to-many relationship instead:

// btnSave.OnSelect
ForAll(tpSkills.SelectedTags As tag, Relate(varProfile.'Profile Skills', LookUp(Skills, Skill = tag.Key)))

Let people add a skill that isn't in the list yet:

// tpSkills.AllowNew
true

// tpSkills.OnChange, creating the new ones on the server
ForAll(Filter(tpSkills.SelectedTags As tag, IsBlank(LookUp(Skills, Skill = tag.Key))), Patch(Skills, Defaults(Skills), {Name: tag.Label}))

Load options from the server as they type, for very long lists:

// tpSkills.Options
If(Len(tpSkills.SearchText) >= 2, ShowColumns(RenameColumns(Filter(Skills, StartsWith(Name, tpSkills.SearchText)), "Skill", "Key", "Name", "Label"), "Key", "Label"), Table({Key: "", Label: ""}))

• Columns. Options wants exactly Key and Label; RenameColumns and ShowColumns get them from any table. Use the row's GUID or a stable code as Key, because that is what SelectedKeys stores.
• Choices columns. For a multi-select choices column, build Options from the choice values (Table({Key: "1", Label: "Power Apps"}, …) or Choices), and patch the column with ForAll(tpSkills.SelectedTags, Value(Key)) mapped to the choice values.
• Searching on the server. The suggestions filter Options in the app with in, which is fine for a few hundred options; past that, filter on the server with StartsWith on SearchText, which is delegable, as in the last example.
• A tag already chosen is left out of the suggestions, and Add ignores a key that is already there, so a double Patch never happens.

• The chips are a group named "Chosen tags"; each remove control is a button named "Remove" and the label. The box is named by its placeholder, and the suggestions are a group named "Suggestions" of buttons named by the label and "add" (or "as a new tag"). Tab moves from the chips to the box to the suggestions; Enter and Space add or remove.
• At the limit, the box is disabled and its placeholder says "Limit of 3 reached", so the state is in words.
• With Motion on, a chip pops in when its tag is added, in a quarter of a second. None plays for people who've asked their device for reduced motion, and Motion off shows it at once.

• The component keeps room for two rows of chips (or enough for MaxTags, up to three), the box and MaxSuggestions suggestions: Studio can't size a component from what's inside it (it falls back to a default size), so its height doesn't follow the chips. More chips scroll in their rows.
• Every chip is ChipWidth wide, because a gallery's cells share one width; a long label is cut, and the full label stays in the tooltip and the remove button's name. Set ChipWidth for your longest usual label.
• Enter doesn't add the first suggestion: the modern text input raises its change when focus leaves it, so people Tab to the suggestion or select it.
• A new tag's Key is its text; if you store keys as GUIDs, create the record in OnChange and refresh DefaultKeys from the server afterwards.
• SelectedKeys is a comma list, so a key can't contain a comma.

• 0.1.0: first version: chips with remove, suggestions as you type, new tags, the limit, SelectedKeys, SelectedTags, Count, SearchText, OnChange, Add, Remove, Clear, light and dark, the chip motion.