Kanban board

Use lcsKanban for work that moves through stages: tasks, requests, applications, support tickets, content waiting for review. Canvas apps have no Kanban control, and their galleries have no drag-and-drop events, so the usual answers are a code component your admin has to approve or a custom page. This component works in any canvas app:

• Columns and cards from two tables: Columns (Key, Title, Limit) and Cards (Key, Column, Title, Detail, Tag). Your data stays yours: the board shows what you give it.
• Moves with buttons, not dragging: each card has a ← and → button that moves it to the column beside it. They're real buttons, so they work with a mouse, a finger, Tab and Enter, and a screen reader.
• Work-in-progress limits: give a column a Limit and its header shows "2 of 3". At the limit the header says "Full", the column gets an amber edge, and with BlockWhenFull on, nothing can be moved into it.
• Tells your app what happened: OnMove(CardKey, ToColumn, FromColumn) runs when a card moves, and OnCardSelect(CardKey) when one is selected. You save the change; the board shows it as soon as Cards changes.
• Reads at a glance: a tag in your colour, a bold title, one detail line, and the selected card outlined in your colour.
• Motion that feels premium: a card that has just moved glows in your colour, a selected card's outline draws itself around it, a column that fills up pulses in amber, and an empty column shows a tray that rises into place. Turn it off with Motion; it never plays for people who've asked their device for reduced motion.
• AccentColor, a Dark theme, and every word it shows or reads out as an input, for your language.

The examples call it kbTasks on your screen, with your tasks in a collection, colTasks, that has a text column Stage.

Set the columns, with a limit on the middle one:

// kbTasks.Columns
Table(
    {Key: "New", Title: "New", Limit: 0},
    {Key: "Active", Title: "In progress", Limit: 5},
    {Key: "Closed", Title: "Done", Limit: 0}
)

Turn your rows into cards. Each card's Column is the Key of the column it sits in:

// kbTasks.Cards
ForAll(
    colTasks,
    {
        Key: Text(ID),
        Column: Stage,
        Title: Title,
        Detail: "Due " & Text(DueDate, "mmm d"),
        Tag: AssignedTo
    }
)

Save a move. Change the collection, so the board updates at once, and then your data source:

// kbTasks.OnMove
UpdateIf(colTasks, Text(ID) = CardKey, {Stage: ToColumn});
Patch(Tasks, LookUp(Tasks, Text(ID) = CardKey), {Stage: ToColumn})

Open a card's details:

// kbTasks.OnCardSelect
Set(gblTask, LookUp(colTasks, Text(ID) = CardKey));
Navigate(scrTask)

Allow a move into a full column, but warn about it: set BlockWhenFull to false and check FullColumns in OnMove:

// kbTasks.OnMove, with BlockWhenFull set to false
If(
    ("," & ToColumn & ",") in ("," & kbTasks.FullColumns & ","),
    Notify("That column was already at its limit.", NotificationType.Warning)
);
UpdateIf(colTasks, Text(ID) = CardKey, {Stage: ToColumn})

Columns usually come from a Dataverse choice column, such as Stage. Use the choice's labels as the columns' Keys, show the label with Text, and save the move with the choice's own value:

// kbTasks.Columns
Table(
    {Key: "New", Title: "New", Limit: 0},
    {Key: "Active", Title: "In progress", Limit: 5},
    {Key: "Closed", Title: "Done", Limit: 0}
)

// kbTasks.Cards
ForAll(
    colTasks,
    {
        Key: Text(Task),
        Column: Text(Stage),
        Title: Name,
        Detail: "Due " & Text('Due Date', "mmm d"),
        Tag: 'Assigned To'.'Full Name'
    }
)

// kbTasks.OnMove
With(
    { stage: Switch(ToColumn, "New", 'Stage (Tasks)'.New, "Active", 'Stage (Tasks)'.Active, 'Stage (Tasks)'.Closed) },
    UpdateIf(colTasks, Text(Task) = CardKey, { Stage: stage });
    Patch(Tasks, LookUp(Tasks, Task = GUID(CardKey)), { Stage: stage })
)

• Task is the row's unique identifier, the column named after the table; GUID turns the card's key back into it.
• 'Stage (Tasks)'.New is how Power Apps names a Dataverse choice's values; a global choice uses its own name.
• A Users lookup, such as Assigned To, shows a person with 'Full Name'.

• Each card is a button named by its title, tag, detail and column ("Build the approval flow, Automation, Waiting on the finance list, In progress").
• Each move button says exactly what it does ("Move Build the approval flow to In review"), and adds "Full" when the column it would move to is full and the button is off.
• A full column says "Full" in its header as well as turning amber, so colour is never the only signal. The selected card has a thicker outline in your colour.
• The animations are short and play once (the longest, a full column's pulse, two rounds of under a second); none loops, and none plays for people who've asked their device for reduced motion.
• Each column is a list that screen readers announce with its count ("In progress, 2 cards"). All of these words are inputs: BoardLabel, CardsText, OfText, FullText, MoveText, ToText and EmptyText.

• No dragging. Canvas galleries have no drag-and-drop events, so cards move one column at a time with their buttons.
• The arrow keys don't move cards. Canvas components can't read key presses, so Tab moves from button to button and Enter or Space presses one.
• Columns share the board's width. Keep to about six columns, or make the component wider; columns don't scroll sideways.
• Each column is a gallery inside the board's gallery, the most nesting Power Apps allows. Microsoft's gallery guidance notes nested galleries can be slow, so keep a board to a few hundred cards and filter the rest out in Cards.
• Cards show in the order of Cards. Sort your table to change the order.
• The board doesn't change your data. It only reports a move in OnMove; until your app changes the card's Column, the card stays where it was.
• Every card is the same height (CardHeight). A long title wraps and is cut off if it doesn't fit: make the cards taller, or keep titles short.

• 0.1.0: first version: columns and cards from two tables, move buttons with OnMove, work-in-progress limits with BlockWhenFull and FullColumns, selection with OnCardSelect, SelectedCard and ClearSelection(), and motion (Motion).