[Sortable Drag and Drop ODC] Drag & Drop List - How to sync with local variable?

Back to Forums

Wei Shen

Question

Forge

Traditional Web

ODC

Application Type

Traditional Web

Hi all,

I'm using a drag & drop component Sortable Drag and Drop ODC (ODC)

to reorder a list of approvers. The dragging works fine on the frontend, but I need help connecting it to my local variable.

Have a local list variable Approvers
Drag & drop works visually, but the Approvers list doesn't update

What I need:When user drags items, I need the local Approvers list to reflect the new order so when I save, it has the correct sequence.

Has anyone done this integration before? How do I capture the new order from SortableJS and update my OutSystems local variable?

Using ODC, Traditional Web.

Thanks!

22 Nov 2025

Denilson Custodio

Hi @Wei Sheng Pang .

The component block exposes an OnChange event, which gives you Index.From and Index.To. One important detail: these indexes are not zero-based they start at 1.

To update your local list (Approvers) according to the new order, you can do the following inside the event handler:

Create an auxiliary variable with the same data type as your list item.
This will temporarily store the item being moved.
Store the item from the new index: AuxItem <- Approvers[Index.New - 1] (Subtract 1 because the component returns indices starting at 1)
Move the item from the old index into the new index: Aprovers[Index.New - 1] <- Approvers[Index.Old - 1]
Put the stored item back into the old position: Approvers[Index.Old - 1] <- AuxItem.

With this logic, your local list will always stay in sync with the drag-and-drop order shown on the screen.

sandbox2.oml

03 Dec 2025

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines