Training
Training
Welcome
Guided Paths
Build an App
Training Planner
Courses
Developer Schools
Boot Camps
Certifications
Tech Talks
Documentation
Documentation
Overview
ODC
O11
Forums
Forge
Get Involved
Get Involved
Home
Jobs
Ideas
Members
Mentorship
User Groups
Downloads
Platforms
OutSystems.com
My Platform
Community
Resources
Support
Search in OutSystems
Log in
Sign Up
Community
›
Forge
›
Assets list
›
Sortable AF
Sortable AF
Stable version
1.0.5
(Compatible with
OutSystems 11
)
Uploaded
on
29 Jan
by
5.0
(7 ratings)
Overview
Reviews
Versions
Documentation
Support
Sortable AF
Documentation
1.0.4
Draft
SortableAF eSpace
Overview
eSpace Name
SortableAF
Description
SortableAF 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 Cookies
Yes
Multitenant
No
Is User Provider
No
User Provider eSpace
Users
Is Application
No
Application Name
Default Transition
Fade
Server Request Timeout
10
Structures
SortableEvent
No Description
Attributes
Attribute
Description
Type
Length
Decimals
Default
Mandatory
ToId
list id, in which moved element is placed
Text
FromId
list id — previous list
Text
ItemId
Item id — dragged element
Text
CloneId
clone id — clone element
Text
OldIndex
old index within parent
Integer
NewIndex
new index within parent
Integer
OldDraggableIndex
old index within parent, only counting draggable elements
Integer
NewDraggableIndex
new index within parent, only counting draggable elements
Integer
PullMode
Pull 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
Attribute
Description
Type
Length
Decimals
Default
Mandatory
Group
To 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
Sort
Allow sorting inside list.
Boolean
Delay
Time 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
DelayOnTouchOnly
Whether 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
TouchStartThreshold
This 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
Disabled
Disables the sortable if set to true.
Boolean
Animation
ms, animation speed moving items when sorting, `0` — without animation
Long Integer
Easing
Easing for animation. Defaults to null. See https://easings.net/ for examples.
e.g.: cubic-bezier(1, 0, 0, 1)
Text
Handle
To 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
Filter
Selectors 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
PreventOnFilter
Call `event.preventDefault()` when triggered `filter`
Boolean
Draggable
Specifies 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
DataIdAttr
Name of the data attribute holding the item's ID
Text
GhostClass
Class name for the drop placeholder (default sortable-ghost).
Text
ChosenClass
Class name for the chosen item (default sortable-chosen).
Text
DragClass
Class name for the dragging item
Text
SwapThreshold
Percentage of the target that the swap zone will take up, as a float between 0 and 1.
Long Integer
InvertSwap
Set to true to set the swap zone to the sides of the target, for the effect of sorting "in between" items.
Boolean
InvertedSwapThreshold
Percentage 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
Direction
Direction 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
ForceFallback
If 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
FallbackClass
Class name for the cloned DOM Element when using forceFallback
Text
FallbackOnBody
Appends the cloned DOM Element into the Document's Body
Boolean
FallbackTolerance
Emulates 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
DragoverBubble
If 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
RemoveCloneOnHide
If 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
EmptyInsertThreshold
The 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
Name
Description
DataType
Mandatory
WidgetId
Widget Id of the element to make sortable.
Text
Options
Optional structure to specify the initial options.
SortableOptions
ChildElementSelector
In 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
Name
Description
DataType
SortableJsObj
Object
GetActiveSortable
Gets the active Sortable instance.
Output parameters
Name
Description
DataType
SortableJsObj
Object
GetCloneElement
Gets the clone element
Output parameters
Name
Description
DataType
CloneJsObj
Clone element represented as a javascript object.
Object
GetDraggedElement
Gets the element being dragged.
Output parameters
Name
Description
DataType
DraggedJsObj
Dragged element represented as a javascript object.
Object
GetGhostElement
Gets the ghost element.
Output parameters
Name
Description
DataType
GhostJsObj
Ghost element represented as a javascript object.
Object
GetOption
Get the option.
Input parameters
Name
Description
DataType
Mandatory
SortableJsObj
Object
OptionName
Text
Output parameters
Name
Description
DataType
OptionValue
Text
GetSortable
Get the Sortable instance on an element.
Input parameters
Name
Description
DataType
Mandatory
WidgetId
Widget Id of the sortable element.
Text
ChildElementSelector
In 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
Name
Description
DataType
SortableJsObj
Object
SetOption
Set the option.
Input parameters
Name
Description
DataType
Mandatory
SortableJsObj
Object
OptionName
Text
OptionValue
Text
Sort
Sorts the elements according to the array.
Input parameters
Name
Description
DataType
Mandatory
SortableJsObj
Object
IdArray
Text List
ToArray
Serializes the sortable's item data-id's (dataIdAttr option) into an array of string.
Input parameters
Name
Description
DataType
Mandatory
SortableJsObj
Object
Output parameters
Name
Description
DataType
IdArray
Text List
Loading...
Loading