User-customizable dropdown in HTML prompt?

[Tom]

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

[JMichaelTX]

@Tom

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

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

HashTag Macro KM 7.0

I've been enjoying messing with HTML prompts, so I thought I'd take a stab at this. As with all my JXA and JavaScript, it's pretty fugly, but it does what it needs to do - takes a comma-delimited list of hashtags and creates an HTML prompt with checkboxes for your tags, then pushes those back out to a variable. Peter, one oddity I ran into is in the inserting the checkboxes variable by JavaScript. When I put them in there, they're automatically set to checked, even though that isn't the value i…

[Tom]

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…

[JMichaelTX]

@Tom

Just struggling now to make it remember the previously selected value.

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.

[Tom]

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.

[JMichaelTX]

@Tom

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

HashTag Macro KM 7.0

I've been enjoying messing with HTML prompts, so I thought I'd take a stab at this. As with all my JXA and JavaScript, it's pretty fugly, but it does what it needs to do - takes a comma-delimited list of hashtags and creates an HTML prompt with checkboxes for your tags, then pushes those back out to a variable. Peter, one oddity I ran into is in the inserting the checkboxes variable by JavaScript. When I put them in there, they're automatically set to checked, even though that isn't the value i…

[Tom]

Bingo, what was needed was the

function KMInit() {
  append…();
}

instead of the timeout. Seems to work now.

Thanks for the pointers!

[JMichaelTX]

@Tom

Thanks for the pointers!

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

[Tom]

@JMichaelTX

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)

[Tom]

Another one is updated now!

[JMichaelTX]

@Tom

It remembers the items and the last selection

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.

[Tom]

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.