• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Contributor ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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?

TOPICS
How to , UXP Scripting

Views

136

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

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

 

Screen Shot 2023-12-01 at 4.12.59 PM.png

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.

Screen Shot 2023-12-01 at 4.07.25 PM.png

 

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 11, 2023 Dec 11, 2023

Copy link to clipboard

Copied

LATEST

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/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines