First part: Setting the state of a dynamic panel depending on dates in a repeater dataset.
Let’s assume you have a table repeater with dates, and you’d like to add a dynamic panel to your repeater that changes its state depending on what dates are currently in the repeater dataset.
For my demo project, I have a repeater table with the following columns: Project Name, Start Date, End Date, and Status. There is also a dynamic panel with three states: Completed, Future, and Active inside the repeater.
I want to set up the state “Completed” for the projects that have their end date in the past, “Future” for the projects that have their start date in the future, and “Active” for others. It should look this way:
To do that, I use the “Date.Parse” function. This function takes a date string as an input and returns a number representing the time difference since January 1, 1970, in milliseconds. I want my data to change dynamically, so I compare the dates in the repeater dataset with the current date by setting conditions on the “Item Loaded” event for the repeater and then use the “Set Panel State” action to set up the corresponding panel state. The final version looks like that:
When I preview my project, I see that it works as I expected.
Important: The dates in your repeater must be in a format that Date.Parse() understands.
Now, the second part: Sorting data in the repeater by the state of the dynamic panel.
I want to be able to sort the repeater data by state set in this dynamic panel: completed projects should go first, then the active and future ones. To do that, we’ll need to edit rows in the repeater dataset depending on what state is set for the dynamic panel:
If the project is complete, then we put the value to “1” for these rows;
if it’s active–the value is “2”;
and if it’s a future project–the value is “3”.
Firstly, I added the sorting icon to the status header. Now, when you click on this icon, you set a “listener” event by moving a widget inside a repeater by (0;0)–you do it to be able to access repeater data. In our case, it is the widget that holds information about the project names.
Then, I added the “Moved” interaction for the widget that holds information about the project names and set the conditions where we edit the row data in a “virtual” column, “Status”, depending on the state of the dynamic panel.
After this, Axure went back to the next action on the “Click or Tap” interaction for the “Sorting icon”, where I added the sort.
The final version after sorting:
Here is my Dates_andDP.rp (70.5 KB) file and the link. Happy prototyping!
