12
Views
8
Comments
Solved
[Sortable AF] Save The new order in database
Forge component by Greg Whitten
3
Published on 29 Jan 2021
Application Type
Reactive

Hi ,

I want to save the new sorted table in my database ,

How do i get the new index of each element and save it in my database


Thanks & Regards

Rank: #266
Solution

Hi Kanishka, 

I've updated the demo on the forge to include a screen called SaveOrder which demonstrates saving the order back by utilizing the ToArray action.  You can install it from the forge, or grab the oap from the attached zip file.


Greg

Sortable.AFDemo1.0.3O11.zip

mvp_badge
MVP
Rank: #17

Hi Kanishka,

You need to add an attribute to the entity to set the sort value to.

Update all records with the new value of the attribute.

Consider using and Index on that attribute too.

Regards,

Daniel

Rank: #266

Yes, Daniel is correct.  You'll need some attribute on your entity to store the sort value.  In addition, you can get the current sorted array of the sortable by using the ToArray action.  It takes an Object as an input which is given to you in the Created event of the SortableList block.  It returns an array of the data-ids associated with your sortable items.  You can set the data-id attr on the items in your list to the id of the entity you'll be looking to save.


Rank: #27639

Hi ,

The toArray function is getting an error that the function does not exist can you help me out with a sample oml for this 


Thanks and Regards

Rank: #266
Solution

Hi Kanishka, 

I've updated the demo on the forge to include a screen called SaveOrder which demonstrates saving the order back by utilizing the ToArray action.  You can install it from the forge, or grab the oap from the attached zip file.


Greg

Sortable.AFDemo1.0.3O11.zip

Rank: #27639
Rank: #27639

Hey Greg ,

When event create is created in a table the the table is no longer sortable . Do you know what could be the reason for that same is not happening for lists

Rank: #266

Hi Kanishka,

Tables have a more complex structure than the lists so some extra things need to happen.  The sortable looks for the children of the id you give it.  In a list, the sortable items are the direct children, but in a table, the tbody is the direct child of the id, and then the rows are inside the tbody.  You need to set the ChildElementSelector of the SortableList block to "tbody"

The second thing that needs to happen is you need to give your row a data-id, but there's no way to set attributes on rows with the OutSystems table.  For this you need to set a data-id attribute on your first cell, and then add a javascript block to the OnRender action for your screen or block:

//this will take the data-id from the td and copy it to the tr in order for the Sortable
//to use the proper id in its ToArray action.

var idTds = document.getElementById($parameters.widgetId).querySelectorAll("[data-id]");
idTds.forEach(function(td) {
td.closest("tr").setAttribute("data-id", td.getAttribute("data-id"));
});

Have a look at the SortableTable screen in the demo. I've attached a new demo version for you.

Greg

Sortable.AFDemo1.0.4O11.oap

Rank: #27639