Using a variable in HTML Prompt

I have this HTML

            <div class="field">
                <label for="title">Title:</label>
                <input type="text" id="title" name="title" />
            </div>

and I would like to replace Title: (the text itself) with something else, like this:

            <div class="field">
                <label for="title">NEWTITLEHERE</label>
                <input type="text" id="title" name="title" />
            </div>

where NEWTITLEHERE comes from a variable.

This page mentions the attribute name, but doesn't have any other examples that apply to my case (or so it seems)

1 Like

1 - So for every variable I want to use, I have to add the whole line? If I have 3 variables I will end up with this?

document.write(window.KeyboardMaestro.GetVariable('LocalItems1'));
document.write(window.KeyboardMaestro.GetVariable('LocalItems2'));
document.write(window.KeyboardMaestro.GetVariable('LocalItems3'));

2 - The documentation says "Be aware that you cannot use a Keyboard Maestro Variable which itself contains an “_” , because Keyboard Maestro will replace the “_” in the HTML name attribute with a space before it tries to sync with the Keyboard Maestro Variable."
So how can we workaround this? For example when I use the User Prompt I always use Local__varName, because that allows me to add a custom name without seeing the Local portion. So if my variable is Local__varName I won't be able to use it at all or is there a workaround? The only thing I can think of is to convert Local__varName to a new var Localvarname so I can use it with the HTML Prompt. Is this the only way?

3 - Once I have the variable, how will I use it in the form the way I described above? So if I have <label for="title">Title:</label> how will I use the variable to replace the word Text?

Without seeing your code, I can't be much more help than making general suggestions. Which would be:

  1. Use one JS document.write that includes the whole form, not separate ones for just the variables. Think of the form itself as your variable.

  2. Don't use the User Prompt but use a Custom HTML Prompt with local variables that do not have underscores. (Abandon all underscores. Abandon User Prompt.)

  3. There is no word Text to replace in your #3.

I'm not that advanced in JS to do all that, unfortunately... Even the HTML form, even though I'm pretty comfortable with HTML, is a bit of a complex thing for me.

I use the User Prompt quite often and it's simpler/faster/easier (at least at the moment) than customizing the HTML prompt for simple things that take a few seconds. Maybe in the future, if I see that it's easier and I can come up with a template that replaces the User Prompt, maybe I will.

I use that across all macros. It's visually easier to see things.

Sorry, I meant "Title:"
Not the for="title, but the Title: text.

There's actually no JavaScript involved. You simply put all the HTML for your form in one Keyboard Maestro variable instead of sprinkling Keyboard Maestro variables throughout an HTML form in a Custom HTML Prompt.

Underscores are great. Unless they are prohibited, of course. Like when using the Custom HTML Prompt. Ya gotta play by the rules.

Are you wanting to replace that text on the fly? That is, the HTML is already displayed and you want to change it? Or are you just looking to build the prompt using data in variables? I guess I'm having trouble seeing the big picture of what you're trying to accomplish.

If it's just building the form using variables, I do this by creating a variable for the HTML. Within that variable, you can reference any KM variables that you want to use, i.e.:

<html>
  etc.
  <body>
    <p>I want the title text to be %Variable%local_myTitle%</p>
  </body>
</html>

With that saved in a variable, say named local_theHTML, I then use Custom Prompt with HTML Text:

<script>
document.write(window.KeyboardMaestro.GetVariable('local_theHTML'));
</script>

That pops up the custom prompt with the variables replaced with whatever their values were when the HTML variable was stored.

If you want to replace bits of an existing HTML prompt on the fly, it's more complicated. Instead of trying to explain it, here's a simple macro that puts an HTML prompt on the screen, then changes its contents.

HTML Prompt replacement variables.kmmacros (4.0 KB)

To make this work, there are some requirements:

  • You need a unique id on each item you want to change.
  • The HTML prompt window must have a title, as set in the body tag in the HTML.
  • The HTML prompt must be displayed asynchronously.

Note that I have no idea if this is the right way or the best way … it's just the way I've figured out how to do it over the years :).

-rob.

1 Like

So we use the variables the same way we use them in any other action using %Variable%Local__varName%
I thought it was different like when you use them in shell where you need to add $KMVAR_ or when using it in AppleScript where you need to add more stuff to make them work.
That makes it easier than I thought.
Thanks!

So then for each variable I need to add this line (adapted to each variable of course):
document.write(window.KeyboardMaestro.GetVariable('local_theHTML'));
Right?

For example when I posted this I was trying to figure out how to gather some data and using the User Prompt was not ideal. Then the Custom HMTL Prompt was the second option. My goal was to have 14 text fields and next to each field, that text that corresponds to a song, like a title. So if I was gathering the length of 14 songs, next to each field I would have the title of the song so I could see what info I had to put. And those titles are already saved in variables, because of other macros I run before that Prompt.

Meanwhile, after a lot of trial and error, I found out that AppleScript works for what I wanted, because I also needed to make changes to a Numbers document.

But as always, this information you guys shared is going on my notes for future reference, because I'm sure I will use it eventually

You need to be careful about where you're using them. As noted in the HTML Custom Prompt wiki, if you're trying to use them directly in the prompt, they can't have underscores and they're addressed differently.

But I put all the HTML into a normal KM variable, so you can reference any variable in any form, just like you would in any other variable assignment. I then just display that variable in the Custom HTML Prompt action.

No, not right :). That command is only used once to display the prompt that's stored in local_theHTML. You do all the work before then to create the HTML with the referenced variables, then just display it. But if it's an actual input form, then you'll have to use the form handling as shown in the wiki, too—but it should display just fine with whatever values you have stored in variables.

If I'm understanding it, then you just would have built the HTML you needed, referencing all the variables you'e already created, as shown in the first example in my reply. Whatever variables you reference will be replaced with their data when the form is displayed.

-rob.

1 Like

But I thought you said "abandon underscores, abandon user prompt"... I'm confused...

So this would be my HTML, right? I tried it and it works, but I wonder if there's something else?

image

So my variable Local__theHTML contains the whole HTML code and from there I can add the variables before hand.
Can you confirm this is all I need?

I understand what you and @mrpasini are saying about the HTM being in a form. Check my reply before this one. I just added the section and it seems to work.
Is that all I need? At least for this simple form

Yes, if you build the HTML into a variable, you can reference any existing variable using whatever naming convention, as you're just creating yet another KM variable. And then yes, that would be the correct command to displa the variable in a floating HTML prompt.

-rob.

1 Like

Thanks for confirming!
It makes it so much easier this way. At least, for this particular scenario. Maybe for other things it would require a different approach?
But for now, I will stick to this.
Appreciate it!