Skip to main content
John D Herzog
John D Herzog
Inspiring
November 30, 2023
Question

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

  • November 30, 2023
  • 2 replies
  • 653 views

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?

This topic has been closed for replies.

2 replies

A
AntonN
Known Participant
December 1, 2023

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

 

A
AntonN
Known Participant
December 1, 2023

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

E
Community Expert
Eugene TysonCommunity Expert
Community Expert
December 1, 2023

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
    John D HerzogAuthor
    Inspiring
    December 1, 2023

    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
    Mayhem SWE
    Inspiring
    December 11, 2023

    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/

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices