User Tools

Site Tools


action:Custom_HTML_Prompt

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
action:Custom_HTML_Prompt [2016/04/27 04:17]
peternlewis [Using JavaScript]
action:Custom_HTML_Prompt [2017/10/04 02:54] (current)
peternlewis [Using JavaScript]
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 17: Line 18:
   - Use these //​Variables//​ in any other Actions you need   - Use these //​Variables//​ in any other Actions you need
  
 +The action will wait for the window to complete before continuing unless you turn on *Asynchronously* (v8+) in the gear BUTTON{{{⚙}}} menu.
  
 +By default, the window floats above all others, but you can optionally turn off *Floating* (v8+) in the gear BUTTON{{{⚙}}} menu.
  
-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 can optionally turn on *Resizable* (v8+) in the gear BUTTON{{{⚙}}} menu.
  
- +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 37:
 | 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 51:
 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.
Line 73: Line 80:
 Note: Prior to 7.1 autofocus did not work for textarea types. 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 82: Line 91:
  
 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. 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 ====
Line 88: Line 96:
 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|
  
 +==== Handling HTTP links ====
  
-----+By default, http: and other links (everything except file: links) are passed to the  to open as normal. 
 + 
 +You can elect (v8+) to handle schemes yourself by including a `data-kmhandleschemes` attribute in the body element, or by implementing the `KMHandleSchemes()` function. 
 + 
 +Either can return the schemes you want to handle (most likely only http) as a comma or space separated list.
  
 ===== 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 ​calls the following JavaScript functions:
  
 ^ Function ^ Called ^ ^ Function ^ Called ^
Line 104: Line 118:
 | 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+) |+| KMDidShowWindow() | when the window was just shown (v7.1+) | 
 +| KMHandleSchemes() | to return the schemes you wish to handle within the web page (v8+) | 
 +| KMWillCloseWindow() | called when the window is about to be closed (v8.0.3+) |
  
 From within the window, you can call the following functions: From within the window, you can call the following functions:
Line 114: Line 130:
 | window.KeyboardMaestro.GetVariable( '​KMVariableName'​ ) | returns the value of a variable | | window.KeyboardMaestro.GetVariable( '​KMVariableName'​ ) | returns the value of a variable |
 | window.KeyboardMaestro.SetVariable( '​KMVariableName',​ '​value'​ ) | sets the value of a variable | | window.KeyboardMaestro.SetVariable( '​KMVariableName',​ '​value'​ ) | sets the value of a variable |
 +| window.KeyboardMaestro.GetDictionary( '​Dictionary',​ '​Key'​ ) | returns the value of a dictionary entry |
 +| window.KeyboardMaestro.SetDictionary( '​Dictionary',​ '​Key',​ '​value'​ ) | sets the value of a dictionary entry |
 | 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 |
Line 119: Line 137:
  
 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). 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 ====
  
-==== Debugging JavaScript in the Form ====+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:
  
 +    onclick="​window.KeyboardMaestro.Submit('​OK'​)"​
  
-Please see this forum post:\\ +do something like:
-[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.+    onclick="​if ​document.getElementById('​myform'​).checkValidity() ) { window.KeyboardMaestro.Submit('​OK'​) } else { document.getElementById('​myform'​).reportValidity() }"
  
----- +==== Debugging JavaScript in the Form ====
-===== Downloads ​===+
-  - None+
  
----- 
  
 +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 ===== ===== 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 154: Line 181:
 - [[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 166: Line 192:
  
  
-  * 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
action/Custom_HTML_Prompt.1461745037.txt.gz · Last modified: 2016/04/27 04:17 by peternlewis