The Custom HTML Prompt action allows you to display an entirely customized window to gather or display information in any way desired (v7.0+).
This is quite an advanced action, and requires designing the window in HTML (including CSS and JavaScript), so its not as simple as most actions in Keyboard Maestro. To get started, see these examples:
_
) in the HTML codeYou design the HTML form using standard HTML code, which can be stored in either a file or as text in the Action. You can, of course, use any Web/HTML editor you like. If you'd like some suggestions, see the Web/HTML Editors section at the bottom of this page for editors that others have found useful.
You can define the size and position of the window using any of the following attributes to the HTML body element:
HTML Body Attribute | Definition/Use |
---|---|
data-kmwindow | May be either: a size (width, height) a rectangle (left, top, width, height) |
data-kmwidth | width |
data-kmheight | height |
data-kmleft | position of left side |
data-kmtop | position of top |
For example:
<body data-kmwindow="SCREEN(Main,Left,20%),SCREEN(Main,Top,20%),420,560">
You will probably also need to specify the body
width in the body
CSS in order to ensure proper HTML display:
body {width: 420px;}
Alternatively you can implement the JavaScript function KMWindow() which returns either a window size (width,height) or window rectangle (left,top,width,height) as a string. Keyboard Maestro will evaluate any calculations you include.
Keyboard Maestro ensures sync between Keyboard Maestro Variables and the HTML form field values. The HTML name attribute is used to identify the Keyboard Maestro Variable. For example, Web Name
is the Keyboard Maestro Variable shown below in the HTML <input> tag. You must replace spaces in the Keyboard Maestro Variable name with underscores when used on the HTML form.
⚠️ 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.
Here is an example:
<div class="row"> <label class="col1">Name:</label> <span class="col2"> <input name="Web_Name" class="input" type="text" id="name" autofocus /> </span> </div>
When the HTML prompt/form is initialized, Keyboard Maestro will set all of the HTML form fields to the value of the Keyboard Maestro Variable prior to display. If the user closes the prompt/form by clicking the OK
button or otherwise submitting the form, then the data on the form is saved back to the corresponding Keyboard Maestro Variable. If the user clicks Cancel
, or presses the ESC
key, or otherwise not submitting the form, the prompt/form is closed without saving any data.
⚠️ Be aware that as of version 7.0.3, the Keyboard Maestro Variable HTML Result Button is NOT changed when presses the ESC
key.
The Keyboard Maestro Variable “HTML Result Button” is set to the parameter in the Submit()
function. For example:
<button name="OK" type="button" onclick="window.KeyboardMaestro.Submit('OK')">OK </button>
You can add one of these HTML attributes to the Form Field:
Attribute | Action |
---|---|
data-ignoreinit | avoid having the field set initially |
data-ignoresubmit | avoid saving form field back to the Keyboard Maestro Variable |
data-ignore | avoid setting and saving the form field |
You may use any JavaScript that you normally could in an HTML page.
Keyboard Maestro provides the following built-in JavaScript functions:
Function | Called |
---|---|
KMInit() | to initialize fields or other features |
KMWindow() | to return the desired size or frame of the window as a string |
KMWillShowWindow() | when the window will be shown |
From within the window, you can call the following functions:
Function | Purpose |
---|---|
window.KeyboardMaestro.Submit( buttonName ) | submit the form and write the Keyboard Maestro Variables |
window.KeyboardMaestro.Cancel( buttonName ) | close the window, do not write the Keyboard Maestro Variables |
window.KeyboardMaestro.ResizeWindow( “1,2,3,4” ) | resize the window to the specified size or frame as a string with commas (“width,height” or “left,top,width,height”) |
window.KeyboardMaestro.GetVariable( 'KMVariableName' ) | returns the value of a variable |
window.KeyboardMaestro.SetVariable( 'KMVariableName', 'value' ) | sets the value of a variable |
window.KeyboardMaestro.ProcessTokens( '%ShortDate%' ) | returns the text token expansion |
window.KeyboardMaestro.Calculate( '10 + 32' ) | returns the result of the calculation |
Please see this forum post:
How to Enable JavaScript Console for KM Custom HTML Prompt
⚠️ Warning: as of version 7.0.3, using SetVariable to set a value to something other than a string can corrupt the variable.
⚠️ Be aware that the system will not allow Keyboard Maestro Engine to see keys typed in its own windows so the Typed String triggers will not work within Keyboard Maestro Engine windows.
There are a wide variety of Web/HTML editors available. You may use any editor you prefer, as long as it will produce HTML code that you can use in the Keyboard Maestro Custom HTML Prompt. These range from very simple, plain-text editors, to very sophisticated web content editors. Below are a few editors that Keyboard Maestro users have found useful. These are presented in no particular order.