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/10/20 06:29]
peternlewis WebKitDeveloperExtras
action:Custom_HTML_Prompt [2021/12/11 10:14] (current)
peternlewis [HTML Window Design]
Line 1: Line 1:
-{{:​action:​html-form-icon.png?​nolink|}} 
 ====== Custom HTML Prompt Action ====== ====== Custom HTML Prompt Action ======
  
Line 9: Line 8:
  
 ===== 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
   - If you want default values in the form, set these //​Variables//​ in a [[action:​Set_Variable_to_Text|Set Variable to Text]] Action   - If you want default values in the form, set these //​Variables//​ in a [[action:​Set_Variable_to_Text|Set Variable to Text]] Action
   - Execute the //Custom HTML Prompt// Action   - Execute the //Custom HTML Prompt// Action
-    * The HTML code can be in a file, or as text in the Action+    * The HTML code can be in a ''​.html'' ​file, or as text (html code) in the Action
   - When the User clicks on the OK button, the //Keyboard Maestro Variables// will be updated   - When the User clicks on the OK button, the //Keyboard Maestro Variables// will be updated
   - 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 codewhich 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+), make the window *Transparent* (v10.0+), or turn off the *Window Title Bar* (v10.0+) 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 36:
 | 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 52: Line 53:
  
 ```sh ```sh
-defaults write com.stairways.keyboardmaestro.engine WebKitDeveloperExtras ​TRUE+defaults write com.stairways.keyboardmaestro.engine WebKitDeveloperExtras ​-bool YES
 ``` ```
  
 Then you can control-click on elements and use Inspect Element and get an inspector window, including a Console tab. 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 ===== ===== 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 80: Line 79:
 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 89: Line 90:
  
 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 95: Line 95:
 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 ^
-| KMInit() | to initialize fields or other features| +`KMInit()| to initialize fields or other features| 
-| 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:
  
 ^ Function ^ Purpose ^ ^ Function ^ Purpose ^
-| window.KeyboardMaestro.Submit( buttonName ) | submit the form and write the *Keyboard Maestro Variables* | +`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.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.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"​)\\ Also see [Resizing Window Using Current Position](https://​forum.keyboardmaestro.com/​t/​resizing-html-window-with-javascript-keyboardmaestro-resizewindow-moves-it/​21579/​7) | 
-| 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.ProcessTokens( '​%ShortDate%'​ ) | returns the text token expansion | +`window.KeyboardMaestro.GetDictionary( '​Dictionary',​ '​Key'​ )` | returns the value of a dictionary entry | 
-| window.KeyboardMaestro.Calculate( '10 + 32' ) | returns the result of the calculation | +| `window.KeyboardMaestro.SetDictionary( '​Dictionary',​ '​Key',​ '​value'​ )` | sets the value of a dictionary entry | 
-| window.KeyboardMaestro.Trigger( macro, value ) | triggers the specified macro (7.1+) |+| `window.KeyboardMaestro.ProcessTokens( '​%ShortDate%'​ )| returns the text token expansion | 
 +`window.KeyboardMaestro.ProcessAppleScript( 'tell app "​Finder"​ to activate'​ )` | executes the AppleScript and returns the result (v10.0+) | 
 +| `window.KeyboardMaestro.Calculate( '10 + 32' )| returns the result of the calculation | 
 +`window.KeyboardMaestro.Trigger( macro, value )| triggers the specified macro (7.1+) | 
 +| `window.KeyboardMaestro.Log( '​Message'​ )` | log a message in the Engine.log file (10.0.2+) |
  
 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).
  
-===== See Also =====+(!) 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_Screen_Rectangle|Prompt for Screen Rectangle]] 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 
 +* [[action:​Display_Progress|Display Progress]] 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 160: Line 183:
 - [[https://​forum.keyboardmaestro.com/​t/​corrupted-variables-after-custom-html-setvariable-update-i-fixed-it-please-read/​2881|Corrupted Variables after Custom HTML SetVariable (Update: I fixed it)]] - [[https://​forum.keyboardmaestro.com/​t/​corrupted-variables-after-custom-html-setvariable-update-i-fixed-it-please-read/​2881|Corrupted Variables after Custom HTML SetVariable (Update: I fixed it)]]
 - [[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]]
 +- [Resizing Window Using Current Position](https://​forum.keyboardmaestro.com/​t/​resizing-html-window-with-javascript-keyboardmaestro-resizewindow-moves-it/​21579/​7)
 - [[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 168: Line 192:
  
 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. 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.
-  * [TextWrangler](http://​www.barebones.com/​products/​textwrangler/) -- a free, but powerfulplain text editor ​that has syntax support for HTML.  Also includes a powerful ​RegEx (Grep) ​find and replace tool+  * [BBEdit](http://​www.barebones.com/​products/​bbedit/) -- powerful plain text editor, including ​RegEx (Grep). Available as a free version ​and a paid version with more features. ​ See [BBEdit Free vs Paid Comparison Chart](http://​www.barebones.com/​products/​bbedit/​comparison.html)
-  * [BlueGriffon](http://bluegriffon.org/) -- a free, but powerful, WYSIWYG content ​editor ​powered by Gecko, ​the rendering engine of Firefox.  It has very powerful ​and easy-to-use table design/​layout/​editing, and WYSIWYG setting of CSS and form element properties. ​ It also has direct HTML code editing+  * [Atom](https://atom.io/) -- A hackable text editor ​for the 21st Century.  It is a free and open-source text and source code editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in JavaScript, and embedded Git Control, developed by GitHub
-  * FIXME  Wiki editors ​please add HTML editors you have found that work well.+  * [Visual Studio Code](https://code.visualstudio.com/​) -- a freeware source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting,​ intelligent code completion, snippets, code refactoring,​ and embedded Git. Users can change the theme, keyboard shortcuts, preferences,​ and install extensions that add additional functionality 
  
 +  * 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]].
  
-  ​If your favorite Web/HTML editor is not listed hereand you would like to include itpost a request in the [[https://​forum.keyboardmaestro.com/​c/​general|Keyboard Maestro ForumGeneral section]].+**Keywords:​* ​ Custom ​HTML PromptUser PromptHTMLDialog
action/Custom_HTML_Prompt.1476959343.txt.gz · Last modified: 2016/10/20 06:29 by peternlewis