JavaScript error when onRender action
Application Type
Reactive

I want to implement a list that can be sorted just by dragging and dropping. Looking in the Forge I didn't find any that looks as good as the way it looks for example in Trello, at Forge they all seem to use the JavaScript library Sortable JS which works but doest look as good.

Looking around I found a library that is perfect for my needs called Muuri JS, and tried to implement it with OutSytems.

The sorting looks great, but anything that can trigger the onRender action will cause an error, so saving the sorted list in the database won't be an option or adding complexity to the page.

I have tried to add the JavaScript on the onReady action instead, but if it's placed there it won't work.

I'm suspecting that the error is either on the javaScript placing or by the use of the word "new" in the Javascript code.

ATTACHING .OML FILE AS AN EXAMPLE

Could anyone proficient in extending applications with JavasScruipt point me in the right direction?


MuuriJs.oml

mvp_badge
MVP

Hi Bruno,

The issue is that you are repeatedly creating new instances of the Muuri object on your OnRender... you will need to store that object somehow and next time the OnRender runs check if the object already exists and if so either skip creating the Muuri object or maybe destroy it and re-create it again.

I'm not an expert in all things JavaScript/React JS so can't really help you much more, I did try a couple of ways of achieving what I explain above, but hit walls that I won't be able to understand/solve in time.

I was having a feeling it was that.

One way to avoid that would be not having it on the onRender, but maybe in onReady perhaps.... but it doesn't seem to work.

For now, I'm putting the code in a try-catch... waiting for a correct solution.

Hello Bruno,

I spent some quality time trying to make Muuri initialize just once in OutSystems Reactive web app using 'OnInitialize' and 'OnReady' events but it simply did not work out. 

So I resorted to placing the following validation in the OnRender JS function you had created and it works:

On a different note, on the rare occasion the page does not load the list widget, and refreshing the page loads it, but that has less to do with Muuri and more to do with how you are fetching the data from the Fruits entity. It can be fixed by loading the screen after the fetch is complete if you wish. I understand this is just a demo, but thought I would mention it.

So try out the attached demo and I hope it helps,

Regards,

AJ

MuuriJsv2.oml

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