HTML Prompt Functional with Style HELP

Questions & Suggestions
1

Hi,

I have been messing with HTML prompts for my Macros. I have found a few good examples but implementing a functional Prompt is quite the challenge for me.

I have two examples that I wish to combine.

I would like to give credit to @iNik and @Tom.

Theres two macros, one macro simpy allows text to be saved to a variable via html prompt, this is what I desire. However, the line is small. The reason I am using HTML prompts as opposed to the prompt action is so I can have a bigger text box.

@iNik created a macro that is resizable and remembers the size and position, which I love, he also created a text area part, however that text does not save to a variable.

Can someone please inform me on how to alter @iNik HTML prompt with the practices in @Tom HTML prompt so I can use the fancy mac like HTML prompt to save my text to a varible?

I do like how I can just press enter and it initiates the submit button on @Tom Prompt, this is not implements on @iNik Example. If that is easy to do please let me know how that can be done. HTML HELP Macros.kmmacros (16.2 KB)

2

Hi @Byrein,

I did not look at your macro, but to answer your question, to save your input into a KM variable in the HTML prompt is very simple. If you use a HTML code such as this:

<textarea class="textAreaField" name="instanceMessage"></textarea>

Note the name attribute field. Whatever you input in the text box, it will be saved into a KM variable called "instanceMessage". You can then use this variable in the following KM actions.

I suggest you take a look at the wiki page:

  • Create a standard HTML page with a form that uses Keyboard Maestro Variables in the Form Field Name attribute
  • If the Variable contains spaces, you must replace them with underscores (_) in the HTML code
3

Thank you, will give it a go.

4

for styling HTML, you'll need to add some CSS

I think I've reused some CSS from this one:

5

As @hello points out, Napkin does a lot with CSS and HTML. A cleaner approach using the same tools can be seen in Glossarium. And A Few Favorites provides other solutions using CSS and HTML. Textcavator, too.

Those are all "mini-apps" as @JMichaelTX calls them, that I have developed over a few years using CSS for styling the Custom HTML prompt. You can usually get a sense of what they look like from the original post here (use the Search function to find them by name). One or another might be what you need.

1 Like
6

There are many examples of the KM HTML Prompt that have been posted in this forum.
You can search the forum and find most of these.
Here is a collection of HTML Prompt Macros that I have found useful:

HTML Prompt Using Event Listener for CMD-Return to Submit form @martin @te..
HTML Prompt Example
[Sample] HTML Prompt with Customizable Menu [TOM]
Big Buttons HTML Prompt @mrpasini
Bootstrap HTML Prompt Example @DanT
Custom HTML Prompt Fixed Header and Footer using Flexbox Examples (Author... Custom HTML Prompt that Saves Size and Position @iNik
Custom HTML Prompt that Saves Size and Position V2 @iNik
Custom HTML Prompt with Dynamic Size and Position (Dan)
Execute JavaScript in HTML Prompt [Example]
Fancy HTML Prompts @Nik
Fancy HTML Prompts Revised (Nik)
HTML Prompt Checkboxes (iNik)
Multiple Checkboxes Picklist
Styled HTML Alert
Type-ahead AutoComplete Combo Box (HTML Prompt)
Using Dynamic HTML with KM HTML Prompt @B_Vasconcelos
Using Dynamic HTML with KM HTML Prompt @MrPasini

Those may not be the exact macro or topic title, but they should be close.

Basically the KM HTML Prompt design comes down to two major API sources:

  1. HTML code specific to KM -- Custom HTML Prompt action
  2. Standard HTML, CSS, and JavaScript used on web pages around the world.

#1 provides you with the specifics of how to interface the HTML Window with KM.
#2 provides you will all you need to highly customize the look and feel of the HTML Window.

You can use CSS and JavaScript library files used by many other web pages. You must need the proper reference in the header of your KM HTML window.

Hope this helps.

2 Likes
7

It does. Dissecting HTML has been a difficult task. I make a lot of great macros that are very useful, however, the prompts that I use for them can get crowded. Especially with multiple settings that are set in the beginning. Being able to conquer a drag a drop component into a more open prompt, similar to building a macro would be a great feature. For now, I will continue to piece out from others.

1 Like