The Recipe

Here’s the recipe to add DnD [2, 3] to your OutSystems’ applications:

1.. Drag and drop the SortableJS placeholder to any screen/Web Block;

2.. Give a name do the placeholder and add that same name to the ListName input;

3.. Add sortable items inside (note that they can be inside a wrapper or not). An example could be a Table (Figure 1 and 2) with rows inside as the sortable items; a List; or simply containers (Figure 3);

Fig. 1 — Drag and dropping table elements within the same table or from one table to another (SortableJSDemo). The mouse pointer you see in the .gif does not correspond to the actual mouse position. It was a problem during the recording of the .gif.

Fig. 2 — Example of SortableJS usage with a table inside the SortableJS placeholder (from SortableJSDemo: see Fig. 1).

Fig. 3 — Example of SortableJS usage with a set of containers inside the SortableJS placeholder.

4.. If you need to drag items from one wrapper to another, repeat steps from 1 to 3, as many times as the number of wrappers you need;

5.. Add the CSS-selector to the wrapper. In the case of Figures 1 and 2, the query selector was the following:

“#” + Table.Id + “ tbody”

6.. Optionally, add some configurations in the JSON input, such as:

“{
 animation: 200,
 group: {
 name: ‘list_group’
 },
 sort: true,
 handle: ‘.table-handler’
}”

Note that the group property is required if one has several wrappers to drag and drop items from/to. All wrappers must be in the same group, in order to move items between them. Also, a handle can be added. In this case, the CSS class would be added to the icon on the right in Figure 2. This is just a simple JSON example, but you can already understand its usefulness. For more configuration options, see the library documentation⁹.

7.. Add an OnDragEndHandler to eventually save the novel list(s) configurations. An example of this client action is shown below:

Fig. 5 — Client action with the SortableJS onDragEnd event handler (example). On the server action you can store the current configuration/order of the cards, for instance.

That’s it! No more steps! This is as easy as it gets!