Issue with Custom HTML Prompt is making me crazy!


#1

I'm having trouble with a particular aspect of the KMInit() function of a Custom HTML Form action I'm displaying as part of a macro.

The first action in my macro runs an AppleScript to pull header text and the hidden attribute from columns in an Excel spreadsheet and stores those values in a KM local variable. The values are stored like this:

Column1|true
Column2|false
Column3|true
...etc...

with true indicating the column is visible, false that it's not.

This variable is then read in the Custom HTML Prompt action's KMInit() function and parsed to add the column names to a select element that allows multiple selections (i.e., a listbox). The selected attribute should be set for any column marked true.

This all works fine EXCEPT for the part about setting the selected attribute. No matter how I try to set it, it just ain't getting set.

Here's the relevant part of the HTML I'm using:

<body data-kmwindow="SCREEN(Main,Left,20%),SCREEN(Main,Top,20%),245,320">
    <form action="#" method="post">
        <table>
            <tbody>
                <tr>
                    <td class="select">
                        <select id="ColumnList" name="ColumnList" size="20" multiple>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <script>
    
    function KMInit() {
        const
            columnList = document.getElementById('ColumnList'),
            columns = window.KeyboardMaestro.GetVariable('LocalColumnState')
                        .split('\n')
                        .filter( x => x !== '' )
        columns.forEach( (c, i) => {
            let
                [optTxt, optSel] = c.split('|'),
                isSelected = ( optSel === 'true' )
            columnList.add( new Option(
                    optTxt,
                    `${i + 1}`,
                    isSelected, 
                    isSelected
                ) 
            )
        } )
    }
    </script>
</body>

Here's the result:

select_issue_km

And the resulting HTML snippet looks like this:

<td class="select">
    <select id="ColumnList" name="ColumnList" size="20" multiple="">
        <option value="1">Column1</option>
        <option value="2">Column2</option>
        <option value="3">Column3</option>
        <option value="4">Column4</option>
    </select>
</td>

So, clearly, the code is working to get the column names but it's just not applying the boolean to the selected attribute.

The new Option() line should create an <option> element with the selected flag set, per MDN, which describes the fourth parameter as:

A Boolean that sets the option's selected state; the default is false (not selected). If omitted, even if the defaultSelected argument is true, the option is not selected.

Now, here's the twist! None of the options are pre-selected when run via the Custom HTML Prompt action, but if I save the HTML into a separate file, call the function from <body onload="KMInit()"> and populate the column list with a text array rather than a KM variable, then open it in Safari, the options are correctly selected!

Here's the result:

select_issue_safari

and the HTML in that case:

<td class="select">
    <select id="ColumnList" name="ColumnList" size="20" multiple="">
        <option value="1" selected="">Column1</option>
        <option value="2" selected="">Column2</option>
        <option value="3">Column3</option>
        <option value="4" selected="">Column4</option>
    </select>
</td>

Using the web inspector's console, I have verified that isSelected = ( optSel === 'true' ) is being set properly as a boolean variable.

I have tried numerous different approaches here and none of them work. Halp!

(Pardon the crappy color scheme; I was trying to match it to Excel's dark mode look.)

Edit: Oops, uploaded the wrong image for the Safari results.


#2

I tried to have a quick look at this, but I couldn't get the HTML looking anything like what you have.

Create an example macro with the variables preset to problematic values, and the Custom HTML Prompt action, and upload that and I will take a look.


#3

OK, I hope I did this right. First time posting a KM macro.

And, to be honest, I haven't really looked at this macro in a couple of months, so I was quite surprised to see your response. Had to go back an refamiliarize myself with this.

Running the macro produces this result for me:
31

With this source shown in the web inspector:

Which is more correct than in my original post but still not 100% correct.

Display Excel Column Hidden State.kmmacros (4.7 KB)


#4

The Custom HTML Prompt action sets the form values from Keyboard Maestro variables unless you tell it not too.

See: https://wiki.keyboardmaestro.com/action/Custom_HTML_Prompt#Excluding_Set_andor_Saving_of_Form_Fields

You need to add the data-kmignoreinit attribute to the select element so that Keyboard Maestro does not try to write its value in init.

<select id="ColumnList" name="ColumnList" size="20" multiple="multiple" data-kmignoreinit="1">

#5

Yep, that fixed it. Thanks!

And your resurrecting this thread after so many months inspired me to get back to the project I had originally created this macro to facilitate, which had fallen to the wayside a while back, so double thanks are owed.


#6

Yes, sorry for the delay, when something is complicated, or I think someone else will have a better answer, I will often leave it behind, but leave it marked unread in my email, and I am finally going back over all of them to clear any that were never answered. So I'm glad I finally got to this, but sorry I didn't get to it earlier (I sort of assumed in was an HTML thing, when in fact it was a Keyboard Maestro/Custom HTML Prompt thing).