Axure Tutorial: Making Backend Table Template - Repeater Interaction Tutorial
Introduction
We often have the need to design the backend interface in our work. The basic architecture of the backend interface are similar. It usually includes the following parts: Table, usually each row has action buttons; The toolbar at the top, including search, filter, import and export buttons and other actions; The toolbar at the bottom, including pagination widgets.
Features to be Realized
1. Search, filter, export and import of table data.
2. Pagination of table data.
How to Realize these Features
Through the repeater, we can add, update, delete, add, search and filter data, which is very convenient and fast. It can be made into a template. When we need to use it again, we just need to modify the template.
Preview the completed prototype for this tutorial
Widgets Setup
Table making
1. Drag the repeater into the canvas, modify the rectangles in it, and then modify the table data. Here we need 20 rows of data.
Top Toolbar making
1. Drag a droplist into the canvas, and the options of the droplist are the headers of the table; Then make search boxes and icon; On the right are the import / export and add employee buttons.
2. Drag a droplist into the canvas, and the options of the droplist are 10 Items per Page, 20 Items per Page, 100 Items per Page; Then drag other widgets into the canvas and set the styles;
Items and page counting are label used to calculate the number of all pages and items. We will make interaction later.
3. Add a new label named ID Number, which is used to calculate the ID number added when adding a new row to the table. Hide the label.
Add Employee Panel Making
Create Add Employee panel. The Department droplist and state droplist options correspond to the data of the columns of the table.
Edit Employee Info Panel Making
Create Edit Employee panel. The Department droplist and state droplist options correspond to the data of the columns of the table. Here, we need to add a label of ID and a label of specific ID value.
Interactions Setup
Top Toolbar Interactions Setup
1. When clicking the search button, determine which table header the selected option in the droplist is equal to, and add a filter to the table to filter out the rows containing the contents of the search box.
Action Buttons Interactions Setup
1. When clicking the Add Employee button, show the Add Employee Panel.
2. The Import button overrides the file type text field, and creates it as a dynamic panel。In this way, when we click the button, a pop-up window for selecting files will be displayed.
3. Upload the EXCEL form to be downloaded, and click the Export button to open the URL address of the file to simulate the effect of file export.
Table Buttons Interactions Setup
1. Double click to enter the repeater. When clicking the Edit button, show the Edit Employee Info panel, and the response text field will be set as the data of the corresponding column of the table, and the selected option of the droplist will also be set as the data of the corresponding column of the table. We also need to set the text of the ID Edit label( Specific employee ID value ) as the text of the ID column of the table.
2. Select the delete button and set the action to delete the data of the current row of the table.
Bottom Toolbar Interactions Setup
1. Select the droplist in the bottom toolbar and set the repeater to 10 per Page if the option is 10 Items per Page when the option is changed.
2. Select the left arrow in the toolbar to set the current page to the previous page when clicked. Select the right arrow in the toolbar to set the current page to the next page when clicked.
3. Select the Confirm button to set the current page of the repeater to the page entered in the text field when clicked.
Table Interactions Setup
1. When items of the repeater is loaded, set the text item and page counting (Count Named) to Total [[Item.Repeater.visibleItemCount]] Items, [[Item.Repeater.pageCount]] Pages.
2. Move the bottom toolbar to 20px below the table.
Add Employee Panel Interactions Setup
1. Select Add Employee dynamic panel to set the value of all text fields to be blank when it is shown.
2. When the Submit button is clicked, judge whether the value of the text field is empty; if yes, set it to error state; if not, set it to default state; If none is empty, hide panel, add a new row and set ID Number label to ID Number label +1.
3. When adding a new row, the data of each column is equal to the data of the inputed value and the selected droplist option value. At the same time, Employee_ID column is the text of the ID Number label + 1, which can ensure that the new Employee ID value will not be repeated.
Edit Employee Info Panel Interactions Setup
1. The interaction is similar to Add Employee. When the submit button is clicked, you also need to judge whether the value of the text field is empty. If none is empty, hide the panel and edit the data.
The judgment rule of which row to edit is that the ID number [[Item..Employee_ID]] is equal to the ID value on the Edit Employee Info panel. Update the data of the response row of the table as the data inputed on the Edit Employee Info panel.
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