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
Next revision Both sides next revision
action:Custom_HTML_Prompt [2017/09/05 01:49]
peternlewis [Downloads]
action:Custom_HTML_Prompt [2021/03/03 10:29]
JMichaelTX [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 57: Line 59:
 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 100: Line 100:
 |*data-kmignore* | 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 =====
Line 107: Line 112:
 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 113: 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 120: Line 127:
 | 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.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 128: 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 ==== ==== Form Validation ====
  
Line 145: Line 153:
  
 (!) 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. (!) 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 =====
Line 153: Line 159:
  
 * [[action:​Alert|Alert]] action * [[action:​Alert|Alert]] action
-* [[action:​Prompt for User Input|Prompt for User Input]]+* [[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]]
  
Line 170: Line 180:
 - [[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://​forum.keyboardmaestro.com/​search?​q=Custom%20HTML%20Prompt%20action|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]]
Line 178: Line 189:
  
 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. 
 +  * [Visual Studio Code](https:​//code.visualstudio.com/​) -- a freeware source-code editor made by Microsoft for WindowsLinux and macOSFeatures include support for debugging, syntax highlighting,​ intelligent ​code completion, snippets, code refactoring,​ and embedded GitUsers can change the theme, keyboard shortcuts, preferences,​ and install extensions that add additional functionality
   * FIXME  Wiki editors: ​ please add HTML editors you have found that work well.   * FIXME  Wiki editors: ​ please add HTML editors you have found that work well.
  
  
   * 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 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 **Keywords:​* ​ Custom HTML Prompt, User Prompt, HTML, Dialog
action/Custom_HTML_Prompt.txt · Last modified: 2021/12/11 10:14 by peternlewis