Can anyone point me to information about Dragging records between to screen tables?

The tables have the same structure. Can anyone point me to an example and some text on how to go about this?

Thanks

Solution

Hello Bradford,

There is no examples or documentation on how to do this, afaik.
You probably will need to implement something using the jQuery Drag & Drop api, associated with screen actions that will take care of adding and removing elements from the respective lists.
 
There is a few Forge components to deal with Drag & Drop:
https://www.outsystems.com/forge/component-overview/467/jquery-ui-drag-and-drop-and-sort

https://www.outsystems.com/forge/component-overview/467/jquery-ui-drag-and-drop-and-sort

https://www.outsystems.com/forge/component-overview/385/drag-and-drop

And others.

You also have other components that work in different ways (only list, no table):

https://www.outsystems.com/forge/component-overview/1367/itemsselector (needs some rework, my bad)

https://www.outsystems.com/forge/component-overview/3342/dual-list-box

Cheers.

Solution

The idea is pretty simple and it almost works. There are two tables and the user has the option of dragging rows between the two tables. When a row is dragged from table1 to table2, ajax is used in order to update the database with the data that is removed from table1, added to table2, and to re-display both of the tables with the new data. The same thing works if information is dragged from table2 to table1.

Here is an excerpt of the Javascript code for one of the tables:

var startTable = "table1";
var $tabs=$("#" + startTable);
$( "tbody.connectedSortable")
.sortable({
    connectWith: ".connectedSortable",
    items: "> tr:not(:first)",
    appendTo: $tabs,
    helper:"clone",
    cursor:"move",
    zIndex: 999990
})
.disableSelection()
;
$($tabs).droppable({
    accept: ".connectedSortable tr",
    hoverClass: "ui-state-hover",
    drop:function(event, ui){
        var start= ui.draggable.attr("id");
        var desTable = $(this).attr("id");
        if(start != desTable){
            alert("The ajax should be called");
        }
        return false;
    }
});

Hello Sagar.

Avoid using JavaScript direct into code. Prefer, ALWAYS (when possible), to use OutSystems "way" and/or Forge components, as this makes the code, usually, much cleaner and easier to change and improves maintainability.

Cheers.