Passing KM Variables to Custom HTML Prompt

Questions & Suggestions
1

I'm trying to pass two KM variables to this Custom HTML Prompt. I've read several threads here and also the KM documentation, but it's just not clicking for me.

I want to display a progress meter using HTML. I have the HTML (see below), which works beautifully However, the variables are hard-coded into the HTML.

<html>
<head>
  <style>
    body {
      margin: 0;
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f9f9f9;
      font-family: -apple-system, sans-serif;
    }
    .box {
      text-align: center;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      width: 300px;
    }
    .bar {
      height: 20px;
      background: #ddd;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 10px;
    }
    .fill {
      height: 100%;
      width: VAR_PROGRESS%;
      background: #d2af8a;
      transition: width 0.2s ease;
    }
  </style>
</head>
<body>
  <script>
    // DECLARE YOUR VARIABLES HERE
    var message = "Processing...";    // <-- your progress message
    var progress = 45;                // <-- set a number between 0–100

    // DON’T TOUCH BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
    document.body.innerHTML = `
      <div class="box">
        <div>${message}</div>
        <div class="bar">
          <div class="fill" style="width: ${progress}%;"></div>
        </div>
      </div>
    `;
  </script>
</body>
</html>

I want to declare the variables in KM and then pass them to the HTML. I’ve used the Set Variable action to create a two KM variables: ProgressMessage and ProgressPercent. However, this is where I get stuck. I don’t know how to change the HTML to read those KM variables.

I know this has to be simple, but I’m spent the last two hours trying to figure it out and am stuck. Thanks.

2

Perhaps there's an easier way to do this, but here's how I do it. (I believe I found this in some forum post here, years ago.)

Put your HTML in a variable, call it local_theHTML or whatever. Within that, you can reference variables as you normally would in text, i.e. %Variable%local_myVar%.

Then add a Custom HTML Prompt action, and make the action this:

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

Replace local_theHTML with the name of the variable that's storing your HTML.

-rob.

3

Thanks, Rob. That didn’t work, but perhaps I’m misunderstanding.

I set a variable for the HTML. It’s called ProgressHTML. Here’s what it looks like:

<html>
<head>
  <style>
    body {
      margin: 0;
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f9f9f9;
      font-family: -apple-system, sans-serif;
    }
    .box {
      text-align: center;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      width: 300px;
    }
    .bar {
      height: 20px;
      background: #ddd;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 10px;
    }
    .fill {
      height: 100%;
      width: VAR_PROGRESS%;
      background: #d2af8a;
      transition: width 0.2s ease;
    }
  </style>
</head>
<body>
  <script>
    // DECLARE YOUR VARIABLES HERE
    var message = %variable%ProgressMessage% 
    var progress = %variable%ProgressPercent% 

    // DON’T TOUCH BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
    document.body.innerHTML = `
      <div class="box">
        <div>${message}</div>
        <div class="bar">
          <div class="fill" style="width: ${progress}%;"></div>
        </div>
      </div>
    `;
  </script>
</body>
</html>

In the DECLARE YOUR VARIABLES HERE section, I’ve referenced the KM variables. (Did I do this correctly?)

Then I created a Custom HTML Prompt with:

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

I’m getting a blank window. It doesn’t look like the variables are being passed.
image

4

You missed the last bit of the instructions:

" Replace local_theHTML with the name of the variable that's storing your HTML."

Your Custom prompt is referencing local_theHTML, but you named the variable with the HTML ProgressHTML. So just change the reference, and it should work.

-rob.

5

I actually did replace it, but I copied over your original snippet. Here’s what I have:

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

I’m still getting the same blank window. Thanks!

6

Can you please upload your macro? Select it, click the Share (up arrow in a box) icon, then select the KM Forums. It'll open in a new post; cut all the text and paste here.

-rob.

7

Actually, I found the problem: You removed the quotes around the var message = bit—add them back, and it will work.

-rob.

8

Sub Progress Message Macro (v11.0.4)

Sub Progress Message.kmmacros (3.4 KB)

Keyboard Maestro Export
Keyboard Maestro Export1708×2302 294 KB

9

I’m not clear on where to add the quotes. I tried a couple of things. I also just posted the macro. Thanks for your help!

10

Add them where they were in your original:

var message = "Processing..."; // <-- your progress message

So that becomes...

var message = "%variable%ProgressMessage%"; // <-- your progress message

And it will work.

-rob.

11

Okay, I did that:

    var message = "%variable%ProgressMessage%";
    var progress = "%variable%ProgressPercent%";

That still results in the same blank window.

Here’s the macro:
Sub Progress Message.kmmacros (3.4 KB)

12

The syntax for declaring a KM variable as a JS variable in HTML is:

    var message =  document.kmvar.ProgressMessage;
    var progress =  document.kmvar.ProgressPercent;

You had smart quotes in your ProgressMessage that I removed. So I get:

ss-353

with:

Sub Progress Message.kmmacros (3.4 KB)

1 Like
13

I think he should have said %Variable instead of %variable

14

Boom! That worked. Thanks so much!

1 Like
15

One final question, if any knows … how can I make the window size the same as the HTML page. In other words, I want to get red of the area where the red box is.

image

16

You can use the data-kmwindow attribute to control the size and position of the HTML prompt window.

1 Like
17

Thanks!