Axure Tutorial: Table Data Search - Repeater Intermediate Tutorial
Introduction
Data searching is a common feature in table design. Through the use of repeater, this feature can be completed quickly and well.
Features to be Realized
1. Enter text into the input box, select options in the dropdown list, and click search button to filter the table data according to the entered data.
2. Click the reset button to reset the control and table data.
How to Realize these Features
1. Set to add a filter to the table when the search button is clicked. The filtering criteria are the data in the corresponding column of the table that is the same as the input content.
2. When the reset button is clicked, the data of all input controls is cleared and all filters are deleted.
Preview the completed prototype for this tutorial
Widgets Setup
1. Here we directly refer to the tables made in the course Axure Tutorial: Repeater Elementary Tutorial - Table Making. Here, we add a First Name search box and a State dropdown. The dropdown has three options: Please select, Offline and Online. Then we add a Search button and a Reset button.
Interaction Setup
1. Add a text filter so that when you click the Search button, the rows in the table contains the text of the text field.
2. Then add a dropdown filter. A condition is added here to determine whether the option in the dropdown is Please select. If yes, remove the added filter. If not, make the table rows contain the option.
3. Make sure that match all is selected for all added 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