Hi everyone!
We put together an example of a custom dropdown with custom checkbox items:
As you may know, there’s already a custom checkbox and a custom dropdown widget included in the Axure Training Library. We also have a couple tutorials here and here. Meanwhile, we also saw some examples where it was useful to combine the two elements, and so we put together a file below:
CustomCheckboxDropdown.rp (111.2 KB) | See it live!
Read on to learn more about the interactions.
**The OnSelected Event**
This screenshot shows how we dynamically add text to the target shape via the Set Text action each time a checkbox item is clicked and set to selected:
For Case 1, if there is no text on the target shape, then the interaction will fire and simply add the text of the clicked item onto the target shape.
For Case 2, on the other hand, if there is already text on the target shape, then this interaction will fire and we’ll effectively create a comma-separated list. This interaction sets the existing text on the target shape, affixes a comma & space (", ") behind it, and then adds the text from the clicked item.
The OnUnselected Event
After an item is selected and its text is added to the target shape, we’ll also want to create the opposite interaction so as to remove the text when an item is deselected. The OnUnselected case is where we determine the portion of text to remove, and we use compound string functions to do that.
(Note: if you’re unfamiliar with using the JavaScript string functions substring() and indexOf(), or with using string functions in the tool in general, check out the linked articles for reference.)
Here's its **Set Text** action in full:
[[target.text.substring(0,target.text.indexOf(this.text))]][[target.text.substring(target.text.indexOf(this.text)+this.text.length+2)]]
The substring() expression in the first set of double-brackets serves as a way to specify the substring in front of the deselected text. It takes the value of target.text (i.e. the text on TargetShape) and returns a portion of the string between a numerically-defined start point and end point. In this part of the function, we’ll enter 0 (zero) for the start point and enter target.text.indexOf(this.text) for the end point. This returns the text of existing list options that’ve been selected and are positioned in front of the deselected text:
The substring() expression in the second set of double-brackets serves as a way to specify the substring behind the deselected text. That is, it returns the text from the index position of where the deselected text is found all the way to the end of the entire string (+1 to accommodate the extra space between list options on the TargetShape widget):
Last, the Fire Event action triggers the TargetShape’s OnMove conditional case, which looks like this:
[quote]If [[This.text.substr(-2)]] equals value ", "
- Set Text on this equal to [[Target.text.substring(0,target.text.length-2)]][/quote]
This action trims any extra comma and space that’s left over at the end of the string, if the last two characters are indeed a comma and space (", ") per the condition.
I hope some of you find this useful! Drop a line if you have followup questions or shoot us an email at support@axure.com.
Alex
