User-customizable dropdown in HTML prompt?

I’m trying to update some of my old macros to the new and nice HTML prompt.

Now I stumbled upon one of my (old style) user prompts where I could add new items to the dropdown menu through the front-end of the macro by appending new “|”-separated values to an existing variable in the dropdown menu.

Is it understandable what I mean?

The menu was basically built like this:

%Variable%ES__Save to%|-|~/Desktop__Desktop|~/Downloads__Downloads|-|📥 Add new destination|-|%Variable%ES__Added destinations%

Now I’m wondering how/if I can achieve something similar with the HTML prompt?

Thanks for any hints.

Tom

Tom, take a look at this thread/macro. It should give you some ideas.

Thanks for the link, JMichael. I’ve already managed to set up a customizable dropdown with the help of the javascript from there. Just struggling now to make it remember the previously selected value. But I’ll figure out…

When you submit the HTML prompt form, the KM vars are set to what the user has selected. So the next time you run the prompt, it should show that selection if you did not delete or reset the KM var.

Yes, today I’ve already build a HTML prompt where it works this way. But somehow it doesn’t work with the js-built selection list. The value gets submitted to the variable but the corresponding option is not selected in the next run.

iNik reported a similar issue, which he fixed with a delay. But perhaps using the
<script>document.write(window.KeyboardMaestro.GetVariable('Initial'))</script>
that Peter suggested will fix it.

See the discussion near the bottom of

Bingo, what was needed was the

function KMInit() {
  append…();
}

instead of the timeout. Seems to work now.

Thanks for the pointers!

You’re welcome. If you don’t mind sharing, I’d love to see your finished macro and JavaScript.

I’ll rewrite my old macro tomorrow, but here is a working minimal example that solves the initial question of this thread:

  • It has a prepopulated (HTML) dropdown menu
  • It lets you add items to the menu via a Choose Folder dialog
  • It remembers the items and the last selection

The js code is mostly stolen from this thread. So, credits go to @iNik, @peternlewis, @ComplexPoint, @JMichaelTX and others.

[Sample] HTML Prompt with Customizable Menu.kmmacros (11.5 KB)

1 Like

Another one is updated now!

Great work, Tom.

How do you remember the last selection? I looked through all the code, but didn’t see it. Please help a blind man. :sunglasses:

It’s in the tmpSaveTo variable, which also forms the name attribute of the select menu (<select name="tmpSaveTo">). It matches the value attribute of one of the option tags (<option value=…>), which are built by the javascript from the tmpSaveToList array.