This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
action:Custom_HTML_Prompt [2016/04/27 04:06] peternlewis kmwindowid |
action:Custom_HTML_Prompt [2017/09/07 01:28] peternlewis [See Also] |
||
---|---|---|---|
Line 9: | Line 9: | ||
===== How To Use ===== | ===== How To Use ===== | ||
+ | |||
- Create a standard HTML page with a form that uses [[token:Variable|Keyboard Maestro Variables]] in the Form Field //Name// attribute | - Create a standard HTML page with a form that uses [[token:Variable|Keyboard Maestro Variables]] in the Form Field //Name// attribute | ||
* If the Variable contains spaces, you must replace them with underscores (`_`) in the HTML code | * If the Variable contains spaces, you must replace them with underscores (`_`) in the HTML code | ||
Line 20: | Line 21: | ||
You 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 [[Custom_HTML_Prompt#WebHTML_Editors|Web/HTML Editors]] section at the bottom of this page for editors that others have found useful. | You 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 [[Custom_HTML_Prompt#WebHTML_Editors|Web/HTML Editors]] section at the bottom of this page for editors that others have found useful. | ||
- | |||
- | |||
- | ---- | ||
===== HTML Window Design ===== | ===== HTML Window Design ===== | ||
Line 35: | Line 33: | ||
| data-kmwindowid | an ID that can be used with the [Execute a JavaScript in Custom Prompt](https://wiki.keyboardmaestro.com/action/Execute_a_JavaScript_in_Custom_Prompt) action | | | data-kmwindowid | an ID that can be used with the [Execute a JavaScript in Custom Prompt](https://wiki.keyboardmaestro.com/action/Execute_a_JavaScript_in_Custom_Prompt) action | | ||
- | For example:\\ | + | For example: |
```html | ```html | ||
<body data-kmwindow="SCREEN(Main,Left,20%),SCREEN(Main,Top,20%),420,560"> | <body data-kmwindow="SCREEN(Main,Left,20%),SCREEN(Main,Top,20%),420,560"> | ||
Line 49: | Line 47: | ||
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. | 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. | ||
+ | If you want to be able to inspect your HTML live, you can use the Terminal command: | ||
- | ---- | + | ```sh |
- | ===== Using Keyboard Maestro Variables in the HTML Form ===== | + | defaults write com.stairways.keyboardmaestro.engine WebKitDeveloperExtras TRUE |
+ | ``` | ||
+ | Then you can control-click on elements and use Inspect Element and get an inspector window, including a Console tab. | ||
+ | |||
+ | ===== Using Keyboard Maestro Variables in the HTML Form ===== | ||
- | Keyboard Maestro ensures sync between *Keyboard Maestro Variables* and the HTML form field values. The **[[http://www.w3schools.com/TAgs/att_input_name.asp|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 **[[http://www.w3schools.com/TAgs/tag_input.asp|<input>]]** tag. You must replace spaces in the *Keyboard Maestro Variable* name with underscores when used on the HTML form. | + | Keyboard Maestro ensures sync between *Keyboard Maestro Variables* and the HTML form field values. The **[[http://www.w3schools.com/Tags/att_input_name.asp|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 **[[http://www.w3schools.com/Tags/tag_input.asp|<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*. | (!) 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*. | ||
Line 71: | Line 74: | ||
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. | 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. | + | Note: Prior to 7.1 autofocus did not work for textarea types. |
- | The *Keyboard Maestro Variable* “//**HTML Result Button**//” is set to the parameter in the `Submit()` function. For example:\\ | + | The [[token:HTMLResult|%HTMLResult%]] token (v8+) is set to the the parameter in the `Submit()` function, and can be used in actions later in this instance like any other text token. The deprecated _HTML Result Button_ variable is also set to the parameter. |
+ | |||
+ | For example: | ||
```html | ```html | ||
Line 80: | Line 85: | ||
</button> | </button> | ||
``` | ``` | ||
+ | |||
+ | Prior to version 7.1, the *Keyboard Maestro Variables* //**HTML Result Button**// was not changed when the window was closed by other than a Submit call - as of 7.1+ the variable is cleared when the window first appears. | ||
+ | |||
==== Excluding Set and/or Saving of Form Fields ==== | ==== Excluding Set and/or Saving of Form Fields ==== | ||
You can add one of these HTML attributes to the Form Field: | You can add one of these HTML attributes to the Form Field: | ||
^Attribute ^ Action ^ | ^Attribute ^ Action ^ | ||
- | |*data-ignoreinit* | avoid having the field set initially| | + | |*data-kmignoreinit* | avoid having the field set initially| |
- | |*data-ignoresubmit* |avoid saving form field back to the *Keyboard Maestro Variable*| | + | |*data-kmignoresubmit* |avoid saving form field back to the *Keyboard Maestro Variable*| |
- | |*data-ignore* | avoid setting and saving the form field| | + | |*data-kmignore* | avoid setting and saving the form field| |
- | + | ||
- | + | ||
- | ---- | + | |
===== Using JavaScript ===== | ===== Using JavaScript ===== | ||
- | You may use any JavaScript that you normally could in an HTML page.\\ | + | You may use any JavaScript that you normally could in an HTML page. |
Keyboard Maestro provides the following built-in JavaScript functions: | Keyboard Maestro provides the following built-in JavaScript functions: | ||
Line 100: | Line 106: | ||
| KMWindow() | to return the desired size or frame of the window as a string| | | KMWindow() | to return the desired size or frame of the window as a string| | ||
| KMWillShowWindow() | when the window will be shown| | | KMWillShowWindow() | when the window will be shown| | ||
+ | | KMDidShowWindow() | when the window was just shown (7.1+) | | ||
From within the window, you can call the following functions: | From within the window, you can call the following functions: | ||
Line 111: | Line 118: | ||
| window.KeyboardMaestro.ProcessTokens( '%ShortDate%' ) | returns the text token expansion | | | window.KeyboardMaestro.ProcessTokens( '%ShortDate%' ) | returns the text token expansion | | ||
| window.KeyboardMaestro.Calculate( '10 + 32' ) | returns the result of the calculation | | | window.KeyboardMaestro.Calculate( '10 + 32' ) | returns the result of the calculation | | ||
+ | | window.KeyboardMaestro.Trigger( macro, value ) | triggers the specified macro (7.1+) | | ||
- | ==== Debugging JavaScript in the Form ==== | + | Prior to version 7.1, using SetVariable to set a value to something other than a string can [corrupt the variable](https://forum.keyboardmaestro.com/t/corrupted-variables-after-custom-html-setvariable-update-i-fixed-it-please-read/2881). |
+ | ==== Form Validation ==== | ||
- | Please see this forum post:\\ | + | You can use HTML5’s form validation to automatically validate the fields. Specify their input types (eg "email" or "url" instead of "text"), as well as other properties like minimum/maximum numbers and so on, and then instead of simply: |
- | [How to Enable JavaScript Console for KM Custom HTML Prompt](https://forum.keyboardmaestro.com/t/javascript-console-in-custom-html-prompt/2589/8) | + | |
- | (!) Warning: as of version 7.0.3, using SetVariable to set a value to something other than a string can [corrupt the variable](https://forum.keyboardmaestro.com/t/corrupted-variables-after-custom-html-setvariable-update-i-fixed-it-please-read/2881). | + | onclick="window.KeyboardMaestro.Submit('OK')" |
- | (!) Be aware that the system will not allow Keyboard Maestro Engine to see keys typed in its own windows so the [[trigger:Typed String | Typed String triggers]] will not work within Keyboard Maestro Engine windows. | + | do something like: |
- | ---- | + | onclick="if ( document.getElementById('myform').checkValidity() ) { window.KeyboardMaestro.Submit('OK') } else { document.getElementById('myform').reportValidity() }" |
- | ===== Downloads ==== | + | |
- | - None | + | |
- | ---- | + | ==== Debugging JavaScript in the Form ==== |
- | ===== See Also ===== | + | Please see this forum post [How to Enable JavaScript Console for KM Custom HTML Prompt](https://forum.keyboardmaestro.com/t/javascript-console-in-custom-html-prompt/2589/8). |
- | ---- | + | (!) Be aware that the system will not allow Keyboard Maestro Engine to see keys typed in its own windows so the [[trigger:Typed String | Typed String triggers]] will not work within Keyboard Maestro Engine windows. |
+ | |||
+ | ===== See Also ===== | ||
=== Actions === | === Actions === | ||
- | * [[action:Prompt for User Input|Prompt for User Input]] | + | * [[action:Alert|Alert]] action |
+ | * [[action:Prompt_for_User_Input|Prompt for User Input]] | ||
+ | * [[action:Prompt_With_List|Prompt With List]] action | ||
+ | * [[action:Prompt_for_File|Prompt for File]] action | ||
+ | * [[action:Get_Touch_Bar_Selection|Get Touch Bar Selection]] action | ||
+ | * [[action:Show_Palette_of_Macros|Show Palette of Macros]] action | ||
* [[:Actions|See all Actions]] | * [[:Actions|See all Actions]] | ||
- | ---- | + | === Tokens === |
+ | |||
+ | * [[token:AlertButton|%AlertButton%]] token | ||
+ | * [[token:PromptButton|%PromptButton%]] token | ||
+ | * [[token:HTMLResult|%HTMLResult%]] token | ||
+ | * [[:Tokens|All Tokens]] | ||
=== Forum === | === Forum === | ||
Line 148: | Line 166: | ||
- [[https://forum.keyboardmaestro.com/t/custom-html-result-button-value-when-prompt-is-closed/3213/2|Custom HTML Result Button value when prompt is closed]] | - [[https://forum.keyboardmaestro.com/t/custom-html-result-button-value-when-prompt-is-closed/3213/2|Custom HTML Result Button value when prompt is closed]] | ||
- [[https://forum.keyboardmaestro.com/t/png-optimizer/3282|PNG Optimizer]] | - [[https://forum.keyboardmaestro.com/t/png-optimizer/3282|PNG Optimizer]] | ||
- | - [[https://www.google.fr/search?q=site:forum.keyboardmaestro.com+Custom+HTML+Prompt+action|Keyboard Maestro Forum topics about Custom HTML Prompt action]] | + | - [[https://forum.keyboardmaestro.com/search?q=Custom%20HTML%20Prompt%20action|Keyboard Maestro Forum topics about Custom HTML Prompt action]] |
==== External References ==== | ==== External References ==== | ||
Line 160: | Line 177: | ||
- | * If your favorite Web/HTML editor is not listed here, and you would like to include it, post a request in the [[https://forum.keyboardmaestro.com/c/general|Keyboard Maestro Forum, General section]]. | + | * If your favorite Web/HTML editor is not listed here, and you would like to include it, post a request in the [[https://forum.keyboardmaestro.com/c/wiki|Keyboard Maestro Forum, Wiki section]]. |
+ | |||
+ | **Keywords:* Custom HTML Prompt, User Prompt, HTML, Dialog |