How to Use KM Variables to Set the Title of a Custom HTML Prompt?

Questions & Suggestions
1

I'm trying to figure out how to use KBM variables in a Custom HTML Prompt to set the title or other text. The manual page for the action focuses on using variables to gather input from a form. I'm sure the hints are there, but I'm not getting the magic mental click yet.

When I create a Custom HTML Prompt window based on Peter's sample code answering my question, "How Can I Create a Series of Minimal App Windows That Only Consist of a Titlebar?", as I reported it works great. I have a couple of things to work out to see how well it can work for my purposes, and among them (not previously mentioned because I hadn't thought it through and wasn't yet able to test at all) is this:

How do I get a KBM variable into the HTML for the title?

Here's a fragment of Peter's example:

For what I'm doing, I cannot hard code the value because there will be a different value for each Desktop Workspace and I want/need to be able to change the value for any particular workspace on the fly, without changing code or restarting the macro system.

I have seen places in this forum where constructions like this are referenced:

but I know that I can't just stick that into the HTML in place of the title text. I think that has to be part of a script in the header, but I've never done HTML scripting, so I'm missing a few layers of concept and context. I've worked with JavaScript APIs and JavaScript manipulation of PDFs, so I'm not worried about that level, but where and how it folds into the HTML of a Custom HTML Prompt has not been clear yet.

In the manual page for Custom HTML Prompt it says, "You may use any JavaScript that you normally could in an HTML page." Great. Of course it's not up to the KBM manual to teach me that aspect of HTML, but so far the introductory examples that I have found haven't made sense in the context of KBM.

Can someone help me with the steps that are needed to get a variable, e.g., KMVariableName above, into the <title> text?

Thanks.

2 
function KMInit() {
	document.getElementById('title').innerHTML = window.KeyboardMaestro.GetVariable("Local Title");
	document.title =  window.KeyboardMaestro.GetVariable("Local Title");
}

Custom HTML Prompt Example Window Title.kmmacros (3.4 KB)

Keyboard Maestro Export
Keyboard Maestro Export1242×1788 263 KB

1 Like
3

Thanks Peter. I'll give that a try.

Does this example mean that you have fixed the issue of needing to replace spaces in KBM Variable Names with underscores in the HTML? The Manual/Wiki currently says:

You must replace spaces in the Keyboard Maestro Variable name with underscores when used on the HTML form.

:warning: 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.

To me, that says that your example usage:
"window.KeyboardBaestro.GetVariable("Local Title")"
should instead be
"window.KeyboardBaestro.GetVariable("Local_Title")".

If your example is based on a new feature that hasn't been updated in the manual, that's really cool. (If not, how does this example.work?) [Concept corrected and explained by Peter in following comments.]

When I run your macro, I get this window:

image

In trying to follow the HTML, I don't see the title "Keyboard Maestro Form Example" anywhere. Is it just a placeholder that gets overwritten?

Thanks.

4

No variables are used in a form, so none of that applies.

No. That is not an HTML form.

Yes. The question was how to set the title based on variables, so that is what the example shows.

5

Thanks. I think I had a broader idea of what a "form" is. I was thinking more like a "document". Am I right in understanding that if the HTML is getting data from KBM, then the variables can have spaces, but if an HTML form is saving data into KBM variables, then the underscore syntax is required? Is that the proper distinction?

6

A form is an HTML construct. You don't have to use a form at all. If you do, Keyboard Maestro will pre-populate the values from Keyboard Maestro variables and can write the values back to variables, as described in the Custom HTML Prompt action documentation. The variable names can have spaces in them, but they cannot in the form, so they must have underscores instead of spaces when named in the HTML form. Just like environment variables can't (shouldn't) have spaces in them so variable names with spaces have the spaces replaced with underscores when they are stored in environment variables.