Accordion

Use lcsAccordion for help text, FAQs, a long form split into named parts, or any screen where people want the headings first and the detail only when they ask for it. Canvas apps have no accordion; makers build one from a gallery and a visibility variable, and the row heights fight them. This component is that gallery done once:

• Sections from a table of Key, Title and Body; each row grows to fit its text, open or closed;
• One open at a time (the default), or several with MultipleOpen;
• OpenKeys and OpenCount outputs, and OnToggle(Key, IsOpen) when a section changes;
• Toggle(Key), ExpandAll() and CollapseAll() actions, so a link or a search can open the right section;
• Headers that are real buttons, named "expanded" or "collapsed" for screen readers, each section a rounded tile, the open one white with an edge and its chevron in a circle tinted in your colour.

The examples call it accHelp on a help screen.

Sections from your own table, kept in a collection so the text can live in a list or a Dataverse table:

// Screen.OnVisible
ClearCollect(colHelp, ShowColumns(SortByColumns(HelpTopics, "Order"), "Key", "Title", "Body"))

// accHelp.Items
colHelp

Open the section a search found:

// btnSearch.OnSelect
accHelp.CollapseAll();
accHelp.Toggle(LookUp(colHelp, StartsWith(Title, txtSearch.Value)).Key)

Open the first section when the screen loads:

// accHelp.DefaultOpenKeys
First(colHelp).Key

It's 400 pixels tall; set its Height on the screen to the room you have, and the sections scroll inside it. To fill the space down to the bottom of the screen:

// accHelp.Height
Parent.Height - accHelp.Y - 24

Remember which sections someone opened:

// accHelp.OnToggle
Patch(UserPrefs, varMyPrefs, {OpenHelp: accHelp.OpenKeys})

• Columns. Items wants exactly Key, Title and Body. From a Dataverse table, ShowColumns and RenameColumns to those names (use the logical names, such as cr123_title), as in Use it.
• Multiline text columns come through as plain text with line breaks, which the body keeps; rich text (HTML) doesn't render, so store help text as plain text or strip the tags in a flow.
• Sorting a Dataverse table with SortByColumns delegates; keep the collection small, because every row is rendered.

• Each header is a button named by its title plus "expanded" or "collapsed", so a screen reader hears the state; Enter and Space toggle it; Tab moves between headers (and through the open bodies' text).
• The open section is a white tile with an edge, and its chevron points up in a tinted circle; state is never colour alone.
• With Motion on, the chevron's circle pops in as a section opens, in about a third of a second. None plays for people who've asked their device for reduced motion, and Motion off draws it at once.

• The component doesn't grow as sections open: Studio can't size a component from what's inside it (it falls back to a default size), so it keeps the Height you set and its sections scroll inside it.
• Bodies are plain text (line breaks are kept); for links or formatting, put a control under the accordion that shows the open section's detail using OpenKeys.
• Row heights come from the flexible-height gallery: if a body shows cut off, the app's Studio version may lay the row out late; selecting the section again redraws it.
• ExpandAll with MultipleOpen off opens only the first section, because only one can be open.

• 0.1.0: first version: sections from a table, one or several open, OpenKeys, OpenCount, OnToggle, Toggle, ExpandAll, CollapseAll, light and dark, the underline motion.