[Sortable AF] Use of widget in list
Forge component by Greg Whitten
Application Type
Reactive

Hi! 

I have a list in which each element is an instance of a widget. 

The input of the widget is record.current (and a boolean). 

The only way I found to make this list sortable is by creating the ListObject at initialization. However, when sorting, the events are not triggered. I am definitely doing something wrong and I believe I need to set the ChildElementSelector but I cannot figure out how. 

Has anyone encountered the same use case/problem? 

Many thanks!

Liesbeth


Solution

Hi Greg,

I have finally found a solution.

As I did before, I placed the widget inside a container and that container has a data-id attribute. For some reason I still need to set the ChildElementSelector to "div" otherwise it doesnt work.

I finally made the events trigger using the JavaScript as in your div in div example! The events are not triggered otherwise. 

I am very happy this works!

Thank you very much,

Liesbeth

mvp_badge
MVP

Hi Liesbeth,

It looks like the OSBlockWidget class that OutSystems assigns to the div of a block is setting the display to inline, which breaks the Sortable.js script.  One option is to just place your widget in a container instead of directly in the list.  But if that's no good you can fix it by modifying the block's parent element during the OnReady event.  You'll also want to do this in order to set the data-id of the block as well.  In you widget, make sure the root container has a name.  Then have the following javascript in the OnReady of your widget:

var rootElem = document.getElementById($parameters.rootId);

if (rootElem) {

    var parent = rootElem.parentElement;

    if (parent)

    {

        parent.setAttribute('data-id', $parameters.dataId);

        parent.style.display = "block";

    }


}


That should get it working.  I've included a demo OML that has a page called SortableWidgets.

SortableAFDemo.oap

Thank you Greg for looking at this! 

I tried it with the  JS on ready but always get the same error: cannot find children of 'null'.

The widget had already been placed inside a container. The container has been given the data-id attribute. This by itself does not work. However, if I add "div" to the ChildElementSelector it works. The problem here is that the events are not triggered. So the Sortable object is made and I can sort the items, but the events are not triggered so nothing happens on choose, unchoose, update, end... 

It also works if I set the data-id attribute on the image inside the widget and set "img" as ChildElementSelector. However, here too are none of the events triggered. 

For now I have added a button to save the new order but I will keep looking for a workaround for this so that it saves after every sort action.

Thank you for taking a look at this, much appreciated! 

Liesbeth


mvp_badge
MVP

Hi Liesbeth,

Are you able to share your OML?  I can take a look and see what's going wrong.


Greg

Solution

Hi Greg,

I have finally found a solution.

As I did before, I placed the widget inside a container and that container has a data-id attribute. For some reason I still need to set the ChildElementSelector to "div" otherwise it doesnt work.

I finally made the events trigger using the JavaScript as in your div in div example! The events are not triggered otherwise. 

I am very happy this works!

Thank you very much,

Liesbeth

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