Commands

The command palette is the quickest way round an application: press Ctrl + K (⌘ + K on a Mac), type a few letters, press Enter. It finds actions, pages and records together — “nwi” finds New invoice, “acme” finds the customer — and remembers what the reader ran last.

Commands come in groups with icons, shortcuts and badges. A command can open a page of its own choices, loaded when it is opened (Assign to… a person). Your own data is searched as the reader types, from as many sources as you give it, with slow answers abandoned when the query moves on. Shortcuts run their commands from anywhere on the page. It opens as a dialog over the page or sits in it, and the keyboard, the screen reader and right-to-left text are all looked after.

An application, run from the keyboard

A billing application with its palette. Press Ctrl + K or the search box, then try nwi, theme, assign, a customer such as harbour or an invoice number such as 1042. Alt + Shift + N raises an invoice from anywhere on this page without opening the palette.

Ledgerline

Dashboard

Twelve invoices are due this week. Two are overdue.

Nothing run yet.
Get the code
<script src="/assets/bmx-components.min.js"></script>

<bmx-command-palette id="cm-palette" global-shortcuts label="Ledgerline commands" placeholder="Search commands, customers and invoices"></bmx-command-palette>

Finding what people mean

The palette in the page this time, always open. Matching rewards the starts of words, so initials work (cdn finds Create a credit note), letters can be missed out, and a match in the name counts for more than one in the keywords. Matched letters are marked. Press one of the buttons to type its query, or type your own.

cdn exp csv vat dark refund
Get the code
<script src="/assets/bmx-components.min.js"></script>

<bmx-command-palette id="cm-inline" mode="inline" hotkey="" label="Quick actions" placeholder="What would you like to do?" max-recent="0" style="inline-size: min(100%, 40rem); --bmx-command-palette-list-height: 17rem"></bmx-command-palette>

Ten thousand reports

A reporting system with ten thousand saved reports, every one a command. Each key searches all of them; the palette lists the best fifty, and the readout says how many matched and how long it took.

Get the code
<script src="/assets/bmx-components.min.js"></script>

<bmx-command-palette id="cm-many" mode="inline" hotkey="" label="Reports" placeholder="Find a report: try “q3 margin north”" max-results="50" max-recent="0" style="inline-size: min(100%, 40rem); --bmx-command-palette-list-height: 15rem"></bmx-command-palette>