Help with Sortable JS - Kanban

I have a 4 column grid each containing a repeat of records grouped by value (stage)
The page is similar to the following https://jsbin.com/fogujiv/edit?js,output
But using DIV"s rather than UL

I am struggling to find a way to use the onEnd (dmx-on:end) to perform a server connect database update on the dragged record.

Has anyone done something similar? I have seen the form-repeat guide, but thats about it.

Any help would be greatly appreciated.

1 Like

Hi.
I assume the draggable UI you have created is based on some 3rd party JS library.
Wappler’s events cannot be invoked directly from external integrations.

What I can suggest is to create a page flow on your page which does what you want to do on END event.
And then, in your library’s END event, call that flow using dmx.parse.

I assume the draggable UI you have created is based on some 3rd party JS library.

Just the Sortable JS from Wappler 4.8.1

But you are using that as a third-party integration, since Wappler’s native integration is limited to just the form-repeat.

:+1:

By following this code. https://jsbin.com/fogujiv/edit?js,console,output
I can see the parameters in the console output that I need to do a database update with. Would anyone be able to help with a page flow / dmx.parse

I just need to update one value from {event: 'onEnd'}

I can get the item.id which is id the record needing update
and the to.id which is actually the new value of the one field needing to be updated.

Screenshot 2023-01-07 at 12.23.07

I am trying to do something similar: I try to use Fullcalendar with external event dropping:
https://fullcalendar.io/docs/external-dragging

If anyone has any relevant experience with Fullcalendar + dragging please chime in with some thoughts :slight_smile:

Anyway I haven’t really got anyhting working, yet. When I do I will report back here with my findings. Might be relevant for your sortable js challenge.

Good luck!

ps: would obivously be great if Wappler had broader sortable support in future releases.

We actually have sortable js support already available as mentioned in Wappler 4.8.1 Released

Maybe someone can write a doc about it

2 Likes

Wow that’s awesome, I missed that! Thanks @George!

Please could someone help?

{
"event": "onEnd",
"item": "11",
"to": "quoted"
}

What would be the dmx.parse syntax to get the item:id and to:value into a flow or variable to run a SC database update.

Thanks

Apologies if I haven’t explained this well enough.
Even if someone could please help with how I bind the onEnd values (item and to) to page variables and I can work out the rest.

<dmx-value id="Kanban-item"></dmx-value>
<dmx-value id="Kanban-to"></dmx-value>

Thanks

These might help with getting the JavaScript variable to AppConnect

1 Like

Thanks @Sorry_Duh
Thats just what I needed.