Axure tutorial: Table Data Addition and Deletion - Repeater Intermediate Tutorial
Adding and deleting table data is a common feature in table data operation. These features 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.
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