MainUI: Sorting choices provided by thing channel

I have created a widget to control items based on things provided by the WLED binding. It contains a list of possible effects to choose from.

For that I use oh-repeater with sourceType itemStateOptions. Since these options are provided by the WLED binding, they come unsorted. Since it’s a pretty long list that doesn’t seem to be sorted in any way I’d like to know, if there is any possibility to sort the list alphabetically before or while being processed by oh-repeater?

- component: f7-list
config:
  virtualList: true
slots:
  default:
	- component: oh-repeater
	  config:
		sourceType: itemStateOptions
		itemOptions: =props.effectItem
		for: item
		fragment: true
	  slots:
		default:
		  - component: oh-list-item
			config:
			  title: =loop.item.label
			  radio: true
			  checked: =items[props.effectItem].state == loop.item.value
			  popupClose: true
			  noChevron: true
			  action: command
			  actionItem: =props.effectItem
			  actionCommand: =loop.item.value

They are sorted by numerical order, aka the order they got added to the WLED firmware. I agree Alphabetical would be better and that’s on the todo list for the binding to do it internally so that it matches the order that the wled UI shows them in.

You can order it manually by using ADD METADATA and then select COMMAND OPTIONS on the item. If you were to use a spreadsheet program you could reorder them pretty quickly after first fetching the list using the WLED API in any web browser.

not sure if that really addresses your problem, but I think this tag might by useful

widgetOrder

see here

That will only sort an array of items returned by one of the item source types and only if those items have the relevant widgetOrder metadata. This repeater is sorting the option defined for a single item.

Short answer: no. matt1’s answer of doing it manually is about the only option at the moment if you’re using the itemStateOptions source type.

Long answer: I’m not familiar with the WLED binding so I don’t know about the format or length of this list, but I suspect there might be a way to reformat your widget so that it uses a static list of options (sorted however you choose) and then filters that list down to those options available for the particular item. This would be a more complicated build for sure, but I don’t think it’s out of the realm of possibility.

I figured as much, which is why I’ve added a thing option to sort the effects alphabetically while keeping “Solid” at the top. Would a PR be appreciated?

Yes a PR would be great, thanks. The other change worth considering would be to add the number to the effect name so people know what command needs to be sent to load that effect.

In rules you need to send the number as the api takes numbers in and out.

The number is already part of the StateOption object (value vs. label), so the user can decide to show both within the UI if desired.

- component: oh-repeater
  config:
    sourceType: itemStateOptions
    itemOptions: =props.effectItem
    for: item
  slots:
    default:
      - component: Label
        text: =loop.item.value + " - " + loop.item.label

Thanks for the PR, much apricated and great that it is merged in time for 3.2 Stable.