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

Data Filtering

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 

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.

search button interaction

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.

Here we can remove the filter and show all data.

2. When the reset button is clicked, remove all filters.

Reset button interaction

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

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

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.