Axure Tutorial: Transferring Selected Data Between Repeaters

Passing Selected Data Between Axure Dynamic Panels: A Tutorial for High-Fidelity Prototyping

Dynamic panels are essential tools in Axure RP for creating high-fidelity prototypes. Think of them as miniature databases within your design. But how do you pass selected data from one dynamic panel to another?

Today, we'll explore this using a multi-select shuttle table example.

1. The Outcome:

Our goal is to build a prototype where users can:

• Select items in the top table using checkboxes.
• Transfer selected items to the bottom table using up and down arrows.
• Use the "Select All" button at the top to toggle the selection status of all rows.

Prototype Link: [Insert Prototype Link Here]

2. Building the Tables:

• Table Structure: The tables consist of a header with checkboxes (both in a dynamic panel for "selected" and "unselected" states) and a dynamic panel representing the table itself.
• Visual Styling: Use rectangles, multi-select buttons, and transparency to create the visual effect. Consider zebra striping and hover effects for better user experience.

3. Data Management:

• Column Names: Create columns such as "colunm1" through "column7" for your data, and a special column named "xuanzhong" to indicate if a row is selected (default value: empty).
• Data Binding: Connect each column in the dynamic panel to the corresponding element on your prototype using Axure's interactive features.

4. Checkbox Interactions:

• Selecting/Deselecting Rows: Use update interaction to set "xuanzhong" to 1 when a checkbox is selected and empty when deselected.
• "Select All" Functionality: Use an event trigger to iterate through all rows and set "xuanzhong" accordingly.

5. Data Transfer Between Tables:

• Text Label for Storage: Use a text label to temporarily store the data of selected rows in each table.

• Data Extraction:

  1. When the "Down Arrow" is clicked, check if there are any selections in the top table.
  2. If so, extract the data from the text label using functions like lastIndexOf and slice.
  3. Use the Add Row interaction to add the extracted data to the bottom table.
  4. Simultaneously use Delete Row interaction to remove the selected rows from the top table (optional).

• Reverse Transfer: Follow a similar process for the "Up Arrow" button, transferring data from the bottom to the top table.

6. Final Touches:

• Add a tooltip or a success message when data is successfully transferred.
• Handle cases where no data is selected in either table.

This comprehensive tutorial provides you with the knowledge and tools to master data transfer between dynamic panels in Axure RP, allowing you to create highly interactive and realistic prototypes.