Axure tutorial: Table Data Addition and Deletion — Repeater Intermediate Tutorial
Introduction
Adding and deleting table data is a common feature in table data operation. These functions can be realized quickly and well through the repeater. In this tutorial, we use the tables made in Axure Tutorial: Table Making — Repeater Elementary Tutorial.
Features to be Realized
Enter data in the input box of the table. When you click the Add button, a row will be added to the table, and the data is the entered data.
How to Realize these Features
Through the Add Rows to Repeater feature of the repeater.
Preview the completed prototype for this tutorial
1. Widgets Setup
1. As shown in the image above, make the table headers.
2. To create the operation bar of the table, we need to drag in four text fields named First Name, Last Name, Age and Birthday. Drag into a dropdown with online and offline options. Then drag in an Add button.
3. Modify the data table of repeater and add delete button.
2. Interaction Setup
1. Sets the error style for text fields. When clicking the Add button, if the text field value is empty, we need to set it as the error style.
2. When clicking the Add button, if all text box values are not empty, we need to set to add a new row in the table.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
#axure widgets #ux design #Axure templates #Axure tutorial #Axure
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.