Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to move list items in your web prototypes

Move items from a list to another in your interactive prototypes with the help of this tutorial.

A user can select or multi-select items from a list and move them to another list by clicking on the appropriate arrow button, as shown in the example below.

Let’s see how we can reproduce this.

You can download the below example here.

move-list-items-in-your-web-prototypes

1. In a new prototype, drag two Multi-select list widgets and two arrows onto the canvas. You can find arrows in the iOS8 widget library (they are named ‘Previous’ and ‘Next’.

2. Select the first multi-select list and, in the Properties panel, set the values you can see in the example.

3. Select the second list and remove all the values. 

4. Now select the ‘Previous’ arrow widget. Go to the events tab and an ‘On click’ + ‘Set value’ event and select the second multi-select list

5. Afterwards, select the ‘Calculated’ button next to ‘value is’.

6. Click on “Add expression”. Drag the first multi-select list, the ‘data + function and the second multi-select list to the expression builder. Select the option “selected” below the first multi-select list and the option “all values” below the second multi-select list.

multi-select-list-interactive-prototype

7. Once you have the expression built, click OK twice to exit the events dialog.

8. Now we have to create a new interaction that will remove the items from the first list when they are moved to the second. In the events tab, click the gear icon next to the word “Do” and select “Add action”.

9. Create a new ‘On click’ + ‘Set value’ event, this time selecting the first multi-select list in the events dialog.

10. Select the “Calculated” button to add a new expression. This time, drag the first multi-select list, the ‘data -‘ function and again the first multi-select list to the expression builder. Select the option “All values” below the first multi-select list and the option “Selected” below the other multi-select list. Click OK twice.

Now the first button is fully functional. Each time you click on it in simulation mode, it will remove the values from the list on the left and move them to the one on the right.

The ‘<‘ widget works in a similar way, moving the items from the list on the right to the one on the left.

To make this possible, you just need to select the ‘Next’ arrow widget and follow the same steps described above, inverting the values in the expression builder.

And that’s it! Simulate and enjoy!

Next tutorial > Add mathematical expressions in your interactive prototypes

2 Comments

  1. Hector Baide

    January 27, 2015 at 10:49 am

    Hi, is it possible to style the components mentioned on this example? I need to do something similar to this but it has to look completely different. Or is there somewhere where I can find the underlying principle of the component in order to implement it by myself? Thanks!

    • Lidia Rodriguez

      March 9, 2015 at 11:13 am

      Yes, you can change the components’ style in the properties tab.