Starting with Custom HTML Prompts

Questions & Suggestions
,
#1

Hi KM Users,

Happy new year and thanks to anyone who chooses to read this and shares their knowledge.

I have gotten really good with KM, and designing macros for my business. What I have yet to conquer would be the HTML prompts.

I do not have any coding background or experience. I am looking into learning and using my skills to drive my business and open up other opportunities.

I have downloaded some example Custom HTML prompts and I get the basics as to what the lines of the code do. However creating that on my own would be near impossible with my level of understanding.

HTML prompts will solve a lot of issues and allow me to create a seamless engagement for users and the mechanics of my macros.

I feel as if the most important part would be simplicity and functionality, I don't need it to look entirely pretty. I just need the button to interact with the values of the variables and for it to not take up the whole screen or mess with if then statements in KM if I need multiple prompts.

How did you learn to create HTML prompts? IS there some general rules to help with the fundamentals and foundations when creating these? Where should I start?

Thank you and I look forward to learning!

#2

Most programmers, like myself, almost always start with something that works, and then strip out what you don't need, and add what you do need. For someone like yourself, the learning curve will be steep at first, but doing things in small increments is the best advice.

So take one of the examples on this forum that looks like it might have some of the functionality you want, and start playing around. Also, learn to ignore anything in the HTML code that doesn't make sense to you. If it's got a bunch of styling, that's OK, just ignore it. That's much easier to do if you use a decent code editor that supports "folding".

Personally, I work on my Custom HTML prompts in VS Code. Of course, getting and setting KM variables won't work there, but I get everything working like I want then paste it into KM and get the variables working.

If there's something specific you want to start with, let me know and I'll see if I have something that might work.

2 Likes
#3

this :point_up_2:

#4

Thank you,

I think I would need a clear example setting the values or variables in the HTML prompts. For example, prompts in KM are very simple, variable on the left, value on the right.

Making drop down lists and fill in the blank would be a great starter kit.

I basically just have a ton of settings for the different macros and being able to design the prompt to fit the selections in preferred areas that make sense when going in order, reading the prompt left to right, and grouping settings that are alike etc etc

What other types of selection functions (drop down, checkbox etc) can you use in HTML prompts?

Could you possibly provide a start for me that is has one example of each and then the code groups certain alike variables?

Example I guess would be variable grouping 1 on the left with a few different styles for selecting values, grouping 2 in the middle and grouping 3 on the right and of course clearly identifying where the name of the variable is that I am setting the value to.

I hope that makes sense

#5

Screen Shot 2021-01-11 at 10.38.11 a.m.
Screen Shot 2021-01-11 at 10.38.11 a.m.1038×1438 138 KB

Screen Shot 2021-01-11 at 10.38.49 a.m.
Screen Shot 2021-01-11 at 10.38.49 a.m.1050×1108 131 KB

Screen Shot 2021-01-11 at 10.39.07 a.m.
Screen Shot 2021-01-11 at 10.39.07 a.m.2038×1146 258 KB

Here is an example with more settings.

Clearly identifying titles vs settings would be great for grouping.

I sell health insurance and texting is a huge part of it, I use KM to count words from replies and then result the type of response based on key words. From that point on I can bulk reply to those resulted responses much much faster, and also clear my inbox.

Being able to REALLY have control over what is where since the entire macro for the user is several prompts would be great.

#6

Turns out there's already a decent starting example. In the KM editor, go to Window->Macro Library. Click the Category "All Entries", then select the macro "Custom HTML Prompt Example", then click "Insert".

"Try" it from the editor, and you'll see it has most of what you want. When you're not sure about something in the example, check out the Wiki entry.

The rest of your examples are more complicated.

2 Likes
#7

Thank you

#8

And if you want full HTML capability, you can use any browser as your input prompt:

#9

Does that example save the result to a variable? If so what variable name? I cannot locate it.

#10

In the action for the Custom HTML Prompt, click the "gear icon" in the upper right, and click "Help". Then look at the section " Using Keyboard Maestro Variables in the HTML Form".

Then look through the HTML for variable names. Hint: In this example, all variables are named starting with "Web_", which means when you refer to them in KM, they start with "Web " (note the space). Personally, I don't use spaces in variable names, but this example was just demonstrating what happens if you do.

Anyway, you can set the value of these variables before showing the HTML prompt, and if the user clicks OK, these variables will be set to whatever was entered in the prompt.

#11

Thanks @DanThomas

I tried that but I do not see the value of the variables appearing or changing in the Value Inspector - why might that be?

#12

I have used this one as starting point:

1 Like
#13

Got it - that works really well

Many thanks

#14

This works:

image
image1052×1394 109 KB

1 Like
#15

@ccstone Hey Chris - what did you edit? Not that I mind, but I don't really see any changes.

#16

Image scaling?

Screen Shot 2021-01-16 at 14.10.30
Screen Shot 2021-01-16 at 14.10.301628×242 37.8 KB

2 Likes
#17

Thanks, and yes, that's what he did. He answered me in a PM. Probably should have mentioned that here. :smirk:

2 Likes