This shows you the differences between two versions of the page.
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 [See Also] |
action:Custom_HTML_Prompt [2017/09/07 05:34] peternlewis |
||
---|---|---|---|
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+) | | ||
From within the window, you can call the following functions: | From within the window, you can call the following functions: | ||
Line 145: | Line 151: | ||
(!) 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 157: | ||
* [[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 180: | ||
- [[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 191: | ||
* 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 |