Custom HTML Prompt: How to Supply This Data via a KM Variable?

Questions & Suggestions
1

I'm going to show a lot of ignorance here, but we're all among friends, right?

I'm working on getting a Custom Html Prompt to work with Bootstrap and Typeahead. I've got most things working, but I don't know enough Javascript to take an example with hard-coded data and change it to getting the data from a KM variable.

Here's the Javascript in question:

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#typeahead-div .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'typeahead',
  source: substringMatcher(states)
});

I want to supply the data in the "states" variable at runtime, via a KM variable. FYI, it could also be in JSON format, if this helps.

Can someone help? Thanks.

2

Figured it out! Ugh. Took forever, partially because I spelled something wrong and didn’t realize it. sigh

3

Could you please post your solution? Thanks.

4

Absolutely! Planning on it. It’s pretty cool.

I guess it should go in the Macro category, right? Also, I’ll need to include a zip file, because of the HTML and supporting files. That’s all OK, right?

5

That’s all good. Thanks.

6

I know this is an old topic, but I'm just discovering the Custom HTML Prompt due to a need to replace the VBA UserForm for MS Excel for Mac. I need assistance with how to dynamically provide the PopUp Menu options for the selections in my custom prompt. I believe this was the same or similar question posed by DanThomas here in this post and a couple of others but unfortunately, this post nor the others provide a clear enough answer for my extremely limited understanding of Javascript and HTML.

I've modeled my prompt after the Demo Using KM Custom HTML Prompt with AppleScript & JXA posted by JMichaelTX shown below.

image
image1086×402 96.9 KB

image
image1720×190 73.3 KB

image
image1496×602 132 KB

where I'd like to dynamically supply a list of existing employee names whose profile is to be edited or deleted where one is to be selected from my code's prompt. I will duplicate the solution for the Employee Role to also be dynamically provided from the available roles.

7

Try something like this:

function fillListbox(listbox, values) {
	values.forEach(function(value) {
		var opt = document.createElement('option');
			opt.innerHTML = value;
			listbox.appendChild(opt);
	});
}

Call it passing your "selectField" element, and a list of values.

8

Dan,

My apologies, but as I stated my understanding of Javascript and HTML is extremely limited so I'm having difficulties understanding how all the different parts fit together which is why JMichaelTX's example from the Macro Library was so helpful.

For understanding of your function, should what you show as "values" be replaced with my KM variable name (e.g."EditEmployeeName")? Is "EditedName" the "selectField" element which also is the HTML id?

9

Dan,

Also, Dan,

Do I place your suggested function in the AppleScript (e.g. do JavaScript), or if as provided, in the HTML file or in an Execute Javascript action in Keyboard Maestro (KM) prior to (or after?) the AppleScript action which invokes the HTML file? Should all the name options be separated by a linefeed or is some other delimiter required?

It might also be helpful if I could find where you posted your solution to this original post of yours. JMichaelTX requested that you post your solution, but I couldn't find where you did that. Perhaps, what you are offering here is part of that solution.

Since I'm actually working from JMichaelTX's Macro Library example, I've also asked if he could include a case of supplying the PopUP Menu and List options via Keyboard Maestro variables.

10

I understand your questions, but honestly, I don't have time to answer them. There's just too much for you to learn right now. Perhaps @JMichaelTX has the time. Sorry.

11

My macro Mirror Mirror uses the HTML prompt with several dynamic popup menus.

The trick is to wrap the actions in a loop that builds a variable for the popup which the prompt can display using a Javascript call. All of that is illustrated in the macro linked above.

12

Thanks mrpasini! Sorry I wasted your time DanThomas.