Introduction: 1. Frequent modification of styles, 2. Frequent modification of data, repetitive work needs to be adjusted
It can help you save data in the prototype page, and provide functions such as adding, deleting, modifying, and checking to help you complete complex interactive scenarios. For example: after adding a friend, a corresponding record will be added to the friend list. After uploading a photo, another photo was added in the corresponding place.
Repeaters are extremely important in Axure. The following uses a case to realize the basic use of repeaters, that is, adding, deleting, modifying and checking, batch search, and batch deletion.
Pull the repeater from the component library to the work area (remember to pull instead of clicking or double-clicking) The upper left corner of the repeater should be attached to the position where the x-axis is 0 and the y-axis is 0 -> double-click Repeater enter the repeater page
(2) Delete the repeater -> pull a box from the component library -> align the upper left corner of the box to delete the upper left corner of the repeater and be sure to cover the repeater (adjust the rectangle by yourself) Frame size) -> Pull an image from the component library into the box and adjust the position Pull a title from the component library into the box and center the text (the text is arbitrary) Close the repeater.
(3) Select the big box on the page -> style -> layout-√ horizontal -> line break -> each item -> spacing is 20 -> click on the data (in the style) -> double-click the column to rename it to name, new Add a column and rename it to image->fill in 3 columns of name->image and right-click to import the image.
(4) Select the big box in the page -> Interaction -> New Interaction -> When each item is loaded -> Set text -> Select the first level title -> Change the value to item.name -> Insert action -> Set image -> Set the DEFAULT image to the value ->fx insert Item.image!
Draw the modal box, which is hidden by default.
The user clicks the new button, the modal box is displayed, the user enters the data, clicks the OK button, and the data is filled into the data set (pay attention to setting local variables), and the modal box is closed
When the user clicks the new button again, when the modal box has the value filled last time, it needs to be cleared. Add an action [set text] to the click interaction of the new button, and set the value of the component to be cleared null.
(1) Pull a button from the component library and change the text to add -> then pull a dynamic panel from the component library -> double-click the dynamic panel -> add two new states (add and edit respectively) ->Pull a rectangle as the base plate and cover it on the dynamic template
(2) Make a form, as shown in the figure
Then copy a copy and paste it into the editor
Close dynamic panel
(3) Click on the new page -> right click -> set as hidden -> click the OK button -> interaction -> new interaction -> mouse click -> set display/hide -> select dynamic panel -> display -> select Animation -> OK
(4) Insert an action under the click event -> set panel status -> dynamic panel -> add -> press OK
(5) Select the Cancel button -> New Interaction -> When the mouse is clicked -> Set display/hide -> Dynamic panel -> Swipe up -> OK
(6) To avoid confusion, name the newly added text box as the value of the new input -> name the input box in the edit box as edit input -> select the OK button in the new page -> new interaction -> When the mouse is clicked -> New line -> Select repeater -> New line -> Right-click under image to import the image (not dynamic, simulation) -> Click on the fx function under name -> Add local variable ->Change the current component to the newly input value->Insert variable LVAR1->Click OK
Then insert action -> show and hide -> dynamic panel -> hide -> slide up -> OK-continue to insert action -> set text -> add new input value -> empty -> OK
Bind the click interaction event to the delete button in the sample, select the operation of deleting the row, and select the repeater of the operation
(1) Just find a delete and edit icon, and put it in the box
(2) Select the delete icon -> new interaction -> mouse click -> delete line -> repeater -> current component -> OK
(1) Pull a button from the component library, rename it to batch delete, and then pull a check box from the component library and place it in the upper left corner of the picture -> (if you want to enlarge the check box, then -> select the check box Box->Style->Button-Modify the size)->Check the checkbox->New interaction->Select->Mark row->Select repeater->Current component->OK->New interaction->Select When the item changes -> cancel the marked line -> select the repeater -> current component -> OK
(2) Select the batch delete button -> new interaction -> mouse click -> delete row -> select repeater -> marked -> OK
In a piece of data in the repeater, click the edit button to display the edited dynamic panel, and the value of the marked record can be obtained in the text box; click to confirm the edit and update the marked data in the repeater.
(1) Select the edit icon -> new interaction -> mouse click -> cancel marked line -> repeater -> all -> OK -> insert action -> marked line -> select repeater -> current component ->OK->Insert Action->Set Panel State->Select Dynamic Panel->Status as Editing->√Display Panel (if hidden)->Switch to the editing of the dynamic panel->Select the cancel button in the editing location- > When the mouse is clicked -> Show/Hide -> Dynamic Panel -> Hide -> OK-
(2) Select the edit button->insert action->set text->edit input->click function->insert item.name->OK
(3) Select the OK button in the edit page -> when the mouse is clicked -> update row -> select repeater -> select marked ->+select column ->name->fx->add local variable ->current Change the component to edit input->insert [[LVAR1]] variable->OK->finish->insert action->show/hide->dynamic panel->hide->OK
(4) Build a query button and text box -> rename the text box to searchInput -> select the query button -> new interaction -> mouse click -> add a new filter -> select a repeater -> write whatever name you want ( I write search)->click fx->new local variable->change the current component to searchInput->insert variable function->select item.name and modify it as shown below
After confirming the article, the addition, deletion, and modification of the repeater is completed!