Axure Tutorial: Table Items Multi-Selection - Repeater Advanced Tutorial
Demand
Table list Multi-Selection is also a common feature of table operation, which can be well realized through repeater. But it takes some skill.
Features to be Realized
How to Realize these Features
1. By adding the State column to the repeater, when all checkbox is checked, the data of all State column will be checked.
2. When All checkbox is unchecked, change the data of all State column to unchecked.
3. Calculate the number of checked data in the State column. If at least one item is not checked, change All Checkbox to uncertain state.
Preview the completed prototype for this tutorial
1. Widgets Setup
1. Import the prototype in Axure Tutorial: Table Making - Repeater Elementary Tutorial. Then add a check box dynamic panel in the leftmost column. Also add an All checkbox and labels to the table header.
2. The checkbox dynamic panel of a table row has two states: checked and unchecked. The All checkbox has three states: selected, unselected and uncertain.
3. Drag a count text field to calculate how many items are checked.
2. Set the Table State Column Data.
1. When the data in the state column is 0, set the state of the checkbox to not selected. When the data in the state bar is 1, set the state of the checkbox to selected.
2.Since all checkboxes are unchecked by default, the state column data of the data table are filled with 0.
3. Calculate the number of all checkboxes checked. When item is loaded, set the Count text field to item.state + LAVA1 (LAVA1=Count).
3. Interactions Setup
1. When All checkbox is in selected state, unselect the checkboxes of all table rows: set the data in the state column of the table to 0, unselect All checkbox at the same time.
2. When All checkbox is in unselected state, selected the checkboxes of all table rows: set the data in the state column of the table to 1, select All checkbox at the same time.
3. If All checkbox is in undetermined state, selected the checkboxes of all table rows: set the data in the state column of the table to 1, select All checkbox at the same time.
4. When the Count text changes, if the text is 0 (that is, all checkboxes of all table rows are unchecked), set All checkboxes to unselected state. If the text is equal to the number of table items (all check boxes are selected), set All checkboxes to selected state. Else, set All checkbox to uncertain state (at least one item is not selected)
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