Dropdown Next and Previous Buttons

A while ago I had found a way to get the selected index from a dropdown component using a value change script on the value property. I've found a much better (cleaner, more direct) way to do this, and it is a much better way to achieve my initial goal:

Rather than have extra properties that rely on a change script to search through the options array, rely on the value property to always be equal to the index and simply add prop(s) for each object in the options array. This extra prop can then be the "value" that you would have used elsewhere (bindings, etc.). The dropdown will still grab the value and label props for use. Because we have the index of the options array, it's easy to get the associated props. (*not to mention that searching through is inefficient to begin with.)

  1. Create the array of objects for the options list.

    • value - always equal to the index of the options array.
    • label - this is the string that is displayed for selection in the dropdown.
    • tag - this is the property that is used in bindings as needed.
    • <other props> etc...
  2. Now, the selection of the dropdown gives the selected index (via value) so it's easy to get the tag with a binding to the options array. Create a property on the dropdown component to hold the selectedTag.

    • {this.props.options}[{this.props.value}]["tag"]

      (in my case the options array is created using a script transform binding, but it could be hard-coded as well)
  3. Now the buttons become quite trivial. Increase/decrease the value by one and check bounds.

def runAction(self, event):
	val = self.getSibling("Dropdown").props.value
	count = self.getSibling("Dropdown").custom.options_count
	
	if val > 0:
		self.getSibling("Dropdown").props.value = val - 1
	else:
		self.getSibling("Dropdown").props.value = count - 1

(where count is a custom property on the dropdown : len({this.props.options}) )

An example like this might be a good addition to the manual.

@mdemaris

4 Likes

That looks pretty clean! Going to have to bookmark this for reference when I do more work with tags. Current focus is using mostly queries.