Axure Tutorial: Date Filtering - Repeater Advanced Tutorial
Demand
Date filtering is a common feature in the interface design. Users can quickly filter the required data according to different date range. So let's learn how to filter dates in Axure.
Features to be Realized
1. When only start date is entered, click the search button to filter the data after start date.
2. When only end date is entered, click the search button to filter the data before end date.
3. When the data of start date and end date are entered, click the search button to filter the data between start date and end date.
4. Click the reset button to restore the original state.
How to Realize these Features
The table is realized through a repeater. Add a filter to the repeater to compare the entered date with the date in the table. Filter out appropriate data.
Preview the completed prototype for this tutorial
Widgets Setup
1. Use the prototype in Axure Tutorial: Table Making - Repeater Elementary Tutorial.
2. Add a label Start date and a label End date, two text fields as start date and end date inputs, a search button, a reset button.
Interactions Setup
1. When the Search button is clicked. It is filtered according to the date range selected by the user. Here we will discuss it in four cases.
Case 1: the start filtering date and end filtering date are not empty, that is, the user's start and end dates are selected.
Here, we filter by [[Date.parse(Item.Birthday)>=Date.parse(LVAR1)&&Date.parse(Item.Birthday)<=Date.parse(LVAR2)]]. The parse (datestring) function can count the number of milliseconds between the date and 00:00:00 on January 1, 1970, so date Parse (item.Birthday) is to convert the date in the table into a number. Date Parse (LVAR1) this is to convert the selected start date into a number, Date.parse (LVAR2) converts the end date to a number. In fact, the date format yyyy / mm / dd is converted into numbers and then compared. The meaning of the whole formula is that the date in the table should be greater than the selected start date and less than the selected end date.
Case 2: the start filtering time is not empty and the end filtering date is empty, that is, the user only selects the start date
Here, we filter by [[Date.parse(Item.Birthday)>=Date.parse(LVAR1)]], similarly, date Parse (item.Birthday) is to convert the date in the table into a number, date Parse (LVAR1) this is to convert the selected start date into a number. The meaning of the whole formula is that the date in the filtered table is greater than the selected start date.
Case 3: the start filtering time is empty and the end filtering date is not empty, that is, the user only selects the end date.
Here, we filter by [[Date.parse(Item.Birthday)<=Date.parse(LVAR1)]], similarly, date Parse (item.Birthday) is to convert the date in the table into a number , date Parse (LVAR1) this is to convert the selected start date into a number. The meaning of the whole formula is that the date in the filtered table is less than the selected end date.
Case 4: the start filtering date and end filtering date are empty, that is, the user does not select a date.
2. When the reset button is clicked, remove all filters.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.
Leave a comment