I have a dropdown select element to allow a user to filter the data on the page by varying date ranges. At the bottom of the list of dates is a link to define a custom date range. As of now, I have a workflow attached to the on change event for the parent element (the one which encompasses the select div and the option div). When the user selects “custom range,” a modal pops up and allows the user to select a custom range using a date range element.
The problem I am trying to solve is, given the way I have it designed right now, if a user wanted to edit the custom date range, the would have to change date ranges in the dropdown and then change back to “custom range” to trigger the workflow—not the most elegant UX. I’ve explored attaching an on click event to the option, but that seems to interrupt the on change workflow and prevents the dropdown from closing.
Is there a way to achieve this that I’m just failing to see?
What do you think about displaying a different option called Edit custom range if Custom range is selected? You can do this with a bit of logic in binding of Select Options
This sounds interesting, and certainly not opposed to it, but could you share more/fill in the blanks in my understanding:
I’m assuming that I would create a variable to determine if “custom range” has been clicked—let’s call it customRange_isClicked. If true then bind a similar list of value:labels to the select in which the last option is “edit custom range.” If false, switch back to the list with “custom range.” In doing so, I’d always instantiate the on change event. Am I following?
To continue, I imagine I’d have to switch back to just “custom range” again to trigger the on change event on the subsequent click. If I’m following this correctly, I’d basically have 2 select lists which toggle back and forth to force the eventing, and if this is the case, do I really need to even change the text to “edit custom range”
@luka thank you so much for this walkthrough! Very helpful.
I ended up adding some more features on top of the original date selector to improve the clarity, which changed the interaction with the custom range—specifically, allowing the user to quick select the last saved custom range or explicitly edit the custom range. In the end I didn’t employ the exact recommendation, but your walkthrough opened my mind to some new ways of thinking that I’d like to share my progress.
Here’s a Loom recording with a full walkthrough. Or feel free to read through the highlights below.
I created 2 new variables to store the custom date start and end. These variables influence the presentation. If null, then the user is prompted to “select” a custom date range either by clicking anywhere in the cell (using pass through logic on the onclick) or by clicking the CTA explicitly.
When the custom date start and end variables are set, the range displays, with an explicit “edit” CTA next to it. The user can change to any of the other system provided data ranges, or change back to the last set custom range with one easy click.
Once a data range is set, if the user wants to set a new custom date range, they can click directly on the “edit” to open the date range modal to set new start and end values.
Lastly, I have a question regarding your previous instruction. This is the first time I’ve seen Event.value and Item.data.value used, whereas I’ve been using the component’s select - value historically. Can you share more about when/why to use one versus the other?
