Help with Sortable JS - Kanban

[mimuk]

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.

[sid]

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.

[mimuk]

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

[sid]

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

[mimuk]

@sid

Wappler’s native integration is limited

[mimuk]

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.

[jellederijke]

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

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.

[George]

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

Maybe someone can write a doc about it

[jellederijke]

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

[mimuk]

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

[mimuk]

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

[Sorry_Duh]

How to modify page variable through Javascript?

How about: dmx.parse("pageLoaded.setValue(0)") or is the AC variable is on a content page: dmx.parse("content.pageLoaded.setValue(0)")

Using App Connect with JavaScript Functions

In some cases it's required to read a JavaScript variable or object values and use them in App Connect. In other cases it's required to use a dynamic App Connect expression in your own custom JavaScript functions. Although we don't provide a visual interface for these operations, both are possible with App Connect. We will show you a couple of simple examples, which show you how to do this but it applies for any complex function you might be using. Using App Connect Expressions in JavaScript…

These might help with getting the JavaScript variable to AppConnect

[mimuk]

Thanks @Sorry_Duh
Thats just what I needed.