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:
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:
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.
