Sortable AF

Stable Version 1.0.2 (OutSystems 11)
Published on 18 Feb by 
Documentation


SortableAF eSpace

    
Overview
    
eSpace NameSortableAF
DescriptionSortableAF is an OutSystems module that wraps the Sortable JavaScript library for reorderable drag-and-drop lists.  See https://github.com/SortableJS/Sortable for more information.
Use CookiesYes
MultitenantNo
Is User ProviderNo
User Provider eSpaceUsers
Is ApplicationNo
Application Name
Default TransitionFade
Server Request Timeout10
 
    
    

Structures
 
SortableEvent
No Description
    

Attributes
AttributeDescriptionTypeLengthDecimalsDefaultMandatory
ToIdlist id, in which moved element is placedText




FromIdlist id — previous listText




ItemIdItem id — dragged elementText




CloneIdclone id — clone elementText




OldIndexold index within parentInteger




NewIndexnew index within parentInteger




OldDraggableIndexold index within parent, only counting draggable elementsInteger




NewDraggableIndexnew index within parent, only counting draggable elementsInteger




PullModePull mode if dragging into another sortable (clone, true, or false)Text




 
    
SortableOptions    
Options for creating the sortable list

See https://github.com/SortableJS/Sortable for a complete list of options, including the event handlers that can be set via JavaScript in OutSystems.
    

Attributes
AttributeDescriptionTypeLengthDecimalsDefaultMandatory
GroupTo drag elements from one list into another, both lists must have the same group value. You can also define whether lists can give away, give and keep a copy (clone), and receive elements.

name: String — group name

These extra options are supported but only through JS, and not through this structure:

Syntax: { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }

pull: true|false|["foo", "bar"]|'clone'|function — ability to move from the list. clone — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to true.
put: true|false|["baz", "qux"]|function — whether elements can be added from other lists, or an array of group names from which elements can be added.
revertClone: boolean — revert cloned element to initial position after moving to a another list.
Text




SortAllow sorting inside list.Boolean




DelayTime in milliseconds to define when the sorting should start. Unfortunately, due to browser restrictions, delaying is not possible on IE or Edge with native drag & drop.Long Integer




DelayOnTouchOnlyWhether or not the delay should be applied only if the user is using touch (eg. on a mobile device). No delay will be applied in any other case. Defaults to false.Boolean




TouchStartThresholdThis option is similar to fallbackTolerance option.

When the delay option is set, some phones with very sensitive touch displays like the Samsung Galaxy S8 will fire unwanted touchmove events even when your finger is not moving, resulting in the sort not triggering.

This option sets the minimum pointer movement that must occur before the delayed sorting is cancelled.

Values between 3 to 5 are good.
Long Integer




DisabledDisables the sortable if set to true.Boolean




Animationms, animation speed moving items when sorting, `0` — without animationLong Integer




EasingEasing for animation. Defaults to null. See https://easings.net/ for examples.

e.g.: cubic-bezier(1, 0, 0, 1)
Text




HandleTo make list items draggable, Sortable disables text selection by the user. That's not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around.Text




FilterSelectors that do not lead to dragging (String or Function)

In OutSystems the onFilter event can be added by setting the onFilter option via JavaScript.

Sortable.create(list, {
filter: ".js-remove, .js-edit",
onFilter: function (evt) {
var item = evt.item,
ctrl = evt.target;

if (Sortable.utils.is(ctrl, ".js-remove")) {  // Click on remove button
item.parentNode.removeChild(item); // remove sortable item
}
else if (Sortable.utils.is(ctrl, ".js-edit")) {  // Click on edit link
// ...
}
}
})
Text




PreventOnFilterCall `event.preventDefault()` when triggered `filter`Boolean




DraggableSpecifies which items inside the element should be draggable.  If left empty defaults to  ">:not(script)" to eliminate any script tags that OutSystems UI may place inside your list containers.  If you set this option it is up to you to ensure the selector does not contain any undesired child elements. (i.e. hidden children in your parent list container.)Text




DataIdAttrName of the data attribute holding the item's IDText




GhostClassClass name for the drop placeholder (default sortable-ghost).Text




ChosenClassClass name for the chosen item (default sortable-chosen).Text




DragClassClass name for the dragging itemText




SwapThresholdPercentage of the target that the swap zone will take up, as a float between 0 and 1.Long Integer




InvertSwapSet to true to set the swap zone to the sides of the target, for the effect of sorting "in between" items.Boolean




InvertedSwapThresholdPercentage of the target that the inverted swap zone will take up, as a float between 0 and 1. If not given, will default to swapThreshold.Long Integer




DirectionDirection that the Sortable should sort in. Can be set to 'vertical', 'horizontal', or a function, which will be called whenever a target is dragged over. Must return 'vertical' or 'horizontal'.Text




ForceFallbackIf set to true, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser. This gives us the possibility to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers.

On top of that, the Fallback always generates a copy of that DOM Element and appends the class fallbackClass defined in the options. This behaviour controls the look of this 'dragged' Element.
Boolean




FallbackClassClass name for the cloned DOM Element when using forceFallbackText




FallbackOnBodyAppends the cloned DOM Element into the Document's BodyBoolean




FallbackToleranceEmulates the native drag threshold. Specify in pixels how far the mouse should move before it's considered as a drag. Useful if the items are also clickable like in a list of links.

When the user clicks inside a sortable element, it's not uncommon for your hand to move a little between the time you press and the time you release. Dragging only starts if you move the pointer past a certain tolerance, so that you don't accidentally start dragging every time you click.

3 to 5 are probably good values.
Long Integer




DragoverBubbleIf set to true, the dragover event will bubble to parent sortables. Works on both fallback and native dragover event. By default, it is false, but Sortable will only stop bubbling the event once the element has been inserted into a parent Sortable, or can be inserted into a parent Sortable, but isn't at that specific time (due to animation, etc).

Since 1.8.0, you will probably want to leave this option as false. Before 1.8.0, it may need to be true for nested sortables to work.
Boolean




RemoveCloneOnHideIf set to false, the clone is hidden by having it's CSS display property set to none. By default, this option is true, meaning Sortable will remove the cloned element from the DOM when it is supposed to be hidden.Boolean




EmptyInsertThresholdThe distance (in pixels) the mouse must be from an empty sortable while dragging for the drag element to be inserted into that sortable. Defaults to 5. Set to 0 to disable this feature.Long Integer




 
 
 
 
 

 

Client Actions
    
 
Create
Create new Sortable instance.
Input parameters
NameDescriptionDataTypeMandatory
WidgetIdWidget Id of the element to make sortable.Text
OptionsOptional structure to specify the initial options.SortableOptions

ChildElementSelectorIn the event that your list container does not have an id rendered by OutSystems and is a child of the widget instead, you can use this selector to find the closest matching element under the widget specified by the WidgetId parameter.  This is useful for the Table block, which puts an id on the table element, but the list itself is in the tbody element.Text

Output parameters
NameDescriptionDataType
SortableJsObj
Object
 
    
GetActiveSortable    
Gets the active Sortable instance.

Output parameters
NameDescriptionDataType
SortableJsObj
Object
 
    
GetCloneElement    
Gets the clone element

Output parameters
NameDescriptionDataType
CloneJsObjClone element represented as a javascript object.Object
 
    
GetDraggedElement    
Gets the element being dragged.

Output parameters
NameDescriptionDataType
DraggedJsObjDragged element represented as a javascript object.Object
 
    
GetGhostElement    
Gets the ghost element.

Output parameters
NameDescriptionDataType
GhostJsObjGhost element represented as a javascript object.Object
 
    
GetOption    
Get the option.
Input parameters
NameDescriptionDataTypeMandatory
SortableJsObj
Object
OptionName
Text
Output parameters
NameDescriptionDataType
OptionValue
Text
 
    
GetSortable    
Get the Sortable instance on an element.
Input parameters
NameDescriptionDataTypeMandatory
WidgetIdWidget Id of the sortable element.Text
ChildElementSelectorIn the event that your list container does not have an id rendered by OutSystems and is a child of the widget instead, you can use this selector to find the closest matching element under the widget specified by the WidgetId parameter.  This is useful for the Table block, which puts an id on the table element, but the list itself is in the tbody element.Text

Output parameters
NameDescriptionDataType
SortableJsObj
Object
 
    
SetOption    
Set the option.
Input parameters
NameDescriptionDataTypeMandatory
SortableJsObj
Object
OptionName
Text
OptionValue
Text


 
    
Sort    
Sorts the elements according to the array.
Input parameters
NameDescriptionDataTypeMandatory
SortableJsObj
Object
IdArray
Text List

 
    
ToArray    
Serializes the sortable's item data-id's (dataIdAttr option) into an array of string.
Input parameters
NameDescriptionDataTypeMandatory
SortableJsObj
Object
Output parameters
NameDescriptionDataType
IdArray
Text List
 
 
 
 
 

 
 


Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Greg Whitten who created this component.
Dependencies
Sortable AF has no dependencies.