Custom checklist/radiobutton selection dialogs for Drafts 21

Drafts 21 is out today, and it brings a major new feature for Actions developers: the ability to create custom user interfaces using the HTMLPreview window, which can now execute JavaScript and pass data back out to the calling context or action.

Accordingly, I’ve released MGCheckListPrompt (and MGListPrompt), a pair of custom list/picker dialogs which let you choose from a list of options — which can be either drafts, or arbitrary choices. There are lots of configurable options and conveniences, including: full keyboard navigation/control (no pointing devices/fingers required!); support for Mac, iPad, and iPhone; automatic light/dark theme support; customisable appearance via CSS; optional type-to-select mode; and so on.

MGCheckListPrompt is the multiple-selection (checkboxes-type) variant, and MGListPrompt is the single-selection (radio-buttons-type) variant. Both are fully documented, include various example actions, and work with Drafts 21 or later on iPadOS, iOS, and macOS.

These should also serve as useful examples of what you can do with the new HTMLPreview functionality in Drafts 21.

Here’s a screenshot of MGCheckList Prompt (on iPad, in the light theme).

I hope you’ll find these reusable custom prompts useful in your own Actions and workflows.

5 Likes

HTML/CSS people interested in expanding on these new HTML Preview options should read the Advanced HTML Previews article in the User Guide. It covers the basics of custom interactions.

@mattgemmell: speaking from the middle of a particularly depressing week, this post brings me a lot of joy. Thank you. I’m looking forward to experimenting with these.

Aside from building Drafts prompts with this, the fact that lists in Shortcuts don’t offer a full screen mode has always irked me, so now I’m also excited to see how smoothly I can integrate these menus with some of the list-driven shortcuts that I trigger from home-screen icons.

The “type to select” option is good to see. Am I right in thinking that it only works with a physical keyboard? And: how difficult might it be for someone to add a filter field to the top of one of these menu instances to filter options while typing?

(Also, obviously, thanks to @agiletortoise for making this kind of development possible.)

1 Like

Hi! Thanks, and you’re welcome.

There would be some work needed on the underlying JavaScript to make a filter field work, because right now the prompt uses the keyboard focus to select items in the list (and takes advantage of the fact that pressing Spacebar when focused on a checkbox will toggle its checked status). I think you’d need to decouple the focus aspect of it, because obviously you’d want the keyboard focus to remain upon the filter field while you were typing.

Having said that, maybe it would be mostly a matter of enhancing the keystroke handler to know whether you’re currently in the list or the filter field, and doing appropriate things. I certainly see no reason why it wouldn’t be completely possible; it would just need some tweaking!

1 Like

Two quick new features just implemented. Code and documentation have been updated, including additional example actions.

Rounded checkboxes

Choose circular checkboxes (checkdiscs?) instead of the usual square shape. Off by default.

Numeric shortcuts

As long as the optional “type to select” mode is off, you can use the number keys 1-0 to directly select items 1-10 respectively. Now, you can also choose to show those numeric shortcut keys within the corresponding checkboxes when they’re unchecked, as a visual reminder. Off by default.

These two settings can be used in any combination. Thanks for reading.

A quick note that I’ve combined the two projects, into MGCheckListPrompt. That’s the one to use. It now contains all the features of both, including two selection modes: multiple selection (checkboxes), and single-selection (radio-buttons). The look and feel has also been unified. Any future development will be in MGCheckListPrompt, the unified project.

And here’s a screenshot of its radio-buttons mode:

I hope it’ll be useful.

1 Like

@jsamlarose Just a note that I got around to implementing list-filtering in the prompt; the code has been updated, and there’s a new example action included called “Demo: Type-to-Filter”.

image

2 Likes

One more update: custom validation functions that run within the prompt/HTMLPreview itself. This should open up a lot of flexibility for using the prompt in your own scripts. Here’s the relevant section of the documentation: https://mattgemmell.com/mgchecklistprompt-docs/#validation

1 Like

Hear that? It’s the sound of my weekend disappearing into another round of Drafts hackery… *grins

I’ll say again, these are some solid menus. Kudos.