Moving items between lists

In this tutorial, you’ll learn how to design a sortable multi-select list in which you can move items from one list to another by clicking on sorting arrows.
moving items between lists
Follow these steps to learn how:

  1. In a new web prototype, drag two Multi-select widgets to the Canvas. Position them to match our example.multi select widgets
  2. Drag two Triangles to the Canvas and position and resize them to match our example.triangles
  3. Select the Multi-select element on the left and go to the Properties palette. Select the “Edit values” button and create the values you see in our example.
  4. Select the Multi-select element on the right and go to the Properties palette. Select the “Edit values” button and remove all the values.
  5. Select the left-facing Triangle add an “On Click” + “Set Value” event, selecting the left Multi-select element as the target of the action. For the value, click “Calculated” button and then click the “Add expression” text. You’ll see the Calculated Expression builder appear.
  6. In the Calculated Expression builder, first drag the left Multi-select element to the open space in the expression. From the drop-down below this term, select the “all values” option. Drag the “Add” (Data +) Function to the right of the Multi-select element in the expression. Lastly, drag the right Multi-select element to the final space.
  7. Back in the Events palette, click the gear icon next to the word “Do” and select “Add action”. Create another “On Click” + “Set Value” event, selecting the right Multi-select element as the target of the action. Below, select the “Calculated” button and then click the “Add expression” text.

    Drag the right Multi-select element to the space in the expression. From the drop-down below this term, select the “all values” option. Drag the “Remove” (Data -) Function to the right of the Multi-selection element in the expression. Lastly, drag the right Multi-select element (again) to the final open space.

  8. Back on the Canvas, select the right-facing arrow and go to the Events palette. Click the “Add Event” button and create an “On Click” + “Set Value” event, selecting the right Multi-select element as the target of the action. Below, select the “Calculated” button and then click the “Add expression” text.

    Drag the right Multi-select element to the open space in the expression. From the drop-down below this term, select the “all values” option. Drag the “Add” (Data +) Function to the right in the expression. Drag the left Multi-select element to the final open space.

  9. Back in the Events palette, click the gear icon next to the word “Do” and select “Add action”. Create another “On Click” + “Set Value” event, selecting the left Multi-select element. Below, select the “Calculated” button and then click the “Add expression” text. The Expression builder will appear.

    Drag the left Multi-select element to the open space in the expression. From the drop-down below this term, select the “all values” option. Drag the “Remove” (Data -) Function to the right in the expression. Drag the left Multi-select element (again) to the final open space.

That’s it! Click “Simulate” to view and interact with your lists.

You can download our example here.