Trying to Create a Listbox Type UI that could be made with scriptUI but with UXP

[John D Herzog]

I need to create a list where I can select multiple options from that list to add to a file later.

I have created one that is similar with a table but it is clunky and does not have complete functionality in UXP scripting, I cannot collapse the cell borders. I would like something cleaner especially when I don't need multiple cells of information for each line item.

sp-menu gives the option of the list, but I cannot get it to accept multiple selections.

select will only do a drop down even if you specify a size.

What am I missing?

[Eugene Tyson]

Hard to know without seeing it - what you're tyring to do - what's your code? 

What have you tried so far? What's working/not working and what are you expecting, and what's the outcome you want?

[John D Herzog]

I am looking for something similar to scriptUI's listbox.

 

This is a screen shot of what I was able to do with listbox. As an exercise I am converting all of my CEP scripts into UXP versions. For the most part I have been able to find comparable solutions except for the listbox. I have tried:

sp-dropbox with a size equal to the length of my list. This in theory should make the view area the whole list, but it stays a single line dropbox. It does not allow for multiple selections.

sp-picker is the same as sp-dropbox.

Using sp-menu by itself works as displaying a list that you can select, but it does not allow for multiple selections which I need. If you look at the spectrum api for sp-menu it shows a selects attribute which you can set to multiple. It is not working in InDesign UXP for me.

The closest I have gotten is using a <table> with event listeners for the <tr>s. The only thing that bothers me about doing it this way is that the border-collapse attribute does not function on the tables in UXP. I can change their color and thickness but cannot collapse them.

If there is not a cleaner solution, I will keep using the tables. Just figured I would see if anyone had a better solution. 

 

[Mayhem SWE]

Are tables even supported by UXP? Considering the documentation for CSS property display does not list any of the table values, you probably should be lucky it renders that far…

https://developer.adobe.com/indesign/uxp/reference/uxp-api/reference-css/Styles/display/

[AntonN]

Hi John! Try using the <sp-picker> tag and you will be able to access the selected one using "value".

.html
<sp-picker id="picker">
  <sp-menu slot="options">
    <sp-menu-item> 1 </sp-menu-item>
    <sp-menu-item> 2 </sp-menu-item>
    <sp-menu-item> 3 </sp-menu-item>
  </sp-menu>
</sp-picker>

.js
const picker = document.getElementById("picker")
const value = picker.value
console.log(value) // will show the selected item from the list as text

[AntonN]

In the indesign, the Spectrum components are very limited; it may not be possible to select several values in the picker.