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 [2017/09/05 01:49]
peternlewis [See Also]
action:Custom_HTML_Prompt [2021/03/03 10:29] (current)
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.
- 
----- 
-===== Downloads ==== 
-  - None 
- 
----- 
- 
  
 ===== See Also ===== ===== See Also =====
Line 158: 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 175: 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 183: 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.1504590572.txt.gz · Last modified: 2017/09/05 01:49 by peternlewis