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/07 01:28]
peternlewis [See Also]
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 14: Line 13:
   - 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 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. 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.
Line 50: Line 53:
  
 ```sh ```sh
-defaults write com.stairways.keyboardmaestro.engine WebKitDeveloperExtras ​TRUE+defaults write com.stairways.keyboardmaestro.engine WebKitDeveloperExtras ​-bool YES
 ``` ```
  
Line 95: Line 98:
 |*data-kmignoresubmit* |avoid saving form field back to the *Keyboard Maestro Variable*| |*data-kmignoresubmit* |avoid saving form field back to the *Keyboard Maestro Variable*|
 |*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 100: Line 111:
 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 ==== ==== Form Validation ====
  
Line 146: Line 162:
 * [[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_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:​Prompt_for_File|Prompt for File]] action
 * [[action:​Get_Touch_Bar_Selection|Get Touch Bar Selection]] action * [[action:​Get_Touch_Bar_Selection|Get Touch Bar Selection]] action
 * [[action:​Show_Palette_of_Macros|Show Palette of Macros]] 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]]
  
Line 165: 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://​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 172: 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
  
  
action/Custom_HTML_Prompt.1504762095.txt.gz · Last modified: 2017/09/07 01:28 by peternlewis