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
Last revision Both sides next revision
action:Custom_HTML_Prompt [2017/09/05 01:49]
peternlewis [See Also]
action:Custom_HTML_Prompt [2017/10/04 02:51]
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 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 145: Line 152:
  
 (!) 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 158:
  
 * [[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 177: Line 181:
 - [[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]]
- 
 ==== External References ==== ==== External References ====
  
Line 189: 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/​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: 2017/10/04 02:54 by peternlewis