Bootstrap 3 + Auto-Complete HTML Prompt Example

Macro Library
,
1

EDIT: Fixed small bug in the HTML file, which was fixed by handling the "KMDidShowWindow()" event. Zip file now contains version 1.2.

  • NOTE: The actual window is wider than this, but I had to cut down the image so it would display correctly on the forum. By default, Bootstrap won't let you get the window this narrow. But see my reply that explains how to get around this, if you want a narrower form.

Bootstrap Html Prompt Example v1.2.zip (406.5 KB)

Purpose

This macro and associated HTML files provide an example of how to make a Custom HTML Prompt using the Bootstrap framework. See http://getbootstrap.com/ for more information.

Like the standard Custom HTML Example macro, this example shows how to setup the various control types, like text boxes, dropdown lists, etc. It also shows how to use variables to initialize the various fields, and retrieve the results when done.

The items for the various dropdown lists are also supplied through variables, not hard-coded in the HTML file.

typeahead.js

“typeahead.js” is used to show how to make an auto-completion control. See typeahead.js for more information. You supply the auto-complete items via a KM variable. You can also supply a variable with a list of suggested items that pop up when the user enters the control, but hasn’t typed anything yet.

Unzipping the files

Unzip the files, and place the HTML files and folders together in a folder, like the image above shows.

The Macro

Import the macro library. It is thoroughly commented, and works out-of-the-box, with the following exception:

In the macro, you need to enable the above Action, and put the location of the HTML file in it. If you forget to do this before you run the macro, it will tell you.

Final Words

Comments are provided in the HTML file, in an attempt to make it easier for you to mold it into whatever you need. I’m no HTML expert by any means, but I think this is a fairly clean example.

I hope this is useful. Please let me know if anything doesn’t work correctly, or if you have questions or suggestions.

Thanks!

6 Likes
2

Bootstrap, as it comes out of the box, has very definite opinions on the minimum widths it wants things to be. Sometimes it’s obnoxious. But don’t fret - there’s a really easy way to solve these types of problems.

Go to http://getbootstrap.com/customize/. Go down to the “Less Variables” section, then to “Media Queries Breakpoints”. Change the values on the left. Then go to the bottom of the page and click the Download button. Use the resulting .css, fonts, and .js files.

Once you have them, try shrinking the width of your form. Don’t forget that it’s specified in 2 places in the HTML file.

That’s it! Easy peasy.

2 Likes
3

RE: Adding Multiple Dynamic Dropdown Boxes to a GUI

I have tried to adapt DanThomas great example macro that shows how a GUI can be built using Javascript and KM's Custom HTML Prompt action.

Specifically I have 2 Dropdown Menus:
-- The first (Dropdown Menu) to select a CONTINENT.
-- The second (Dropdown Menu #2) to select a COUNTRY.

I am using the Javascript ONCHANGE action to have my choice in Dropdown Menu #1 of CONTINENT determine which choice list I get of COUNTRY's in Dropdown Menu #2. (not working.)

e.g. It is supposed to just show the European COUNTRY's if the CONTINENT chosen is Europe.

Can anyone point out my error? Dropdown Menu #2 choices are incorrectly chosen and also incorrectly "appended" instead of "replaced". Thanks.

Bootstrap HTML Prompt MODS.zip (415.4 KB)

Screen Shot 2020-05-05 at 21.56.30
Screen Shot 2020-05-05 at 21.56.30789Ă—96 6.54 KB

4

Hello,

I'm using this awsome Dan Thomas's macro to make a nice prompt.
I'would like to have a button to select multiple files and/or folders.
I found this link with an exemple:

But my html knowledge is limited. It would be very nice if someone can give me a hint how to implement this.

Thanks