Give us feedback
Web icon


version 1.0.0 (Compatible with OutSystems 11)
Uploaded on 15 February 2020 by 
 (1 rating)


This extension can be use for reservation such as cinema, hotels, flight, etc. It integrates the Jquery UI libray for draggable functionalities. Please refer to for the complete documentation of JQuery UI draggables
Read more

How to Implement in Service Studio

1. Consume the "DraggableContainerWB" and "DraggableTemplateWB" web block from the JQueryUI_SeatPlan module.

2. Add the DraggableTemplateWB to the webscreen and use the placeholder to set the look and design of the seat.

Note: You can use the "DraggableTemplateClass" input parameter to add design to your seat

3. Assign a screen action to the OnLoad event of the DraggableTemplateWB. This event is triggered once the template completely loads on the screen.

4. Add the DraggableContainerWB to the webscreen.

Note: This extension only supports one DraggableContainerWB per webscreen. The javascript functions might not work properly when there are 2 or more DraggableContainerWB in the webscreen. Rest assured that I will improved this for the future version.

5. Place a Container inside the DraggableContainer placeholder and you have an option to use the Individual_Links placeholder to add some links with draggable functionalities. The "IsLinkShown" parameter is used to define the visibility of the link placeholder.

Note: ToggleLinks server action can be used to toggle the visibility of the link placeholder

6. Set the appropriate screen action each event:

 OnAddInGroup : This event will only be triggered once a draggable is added in the group

OnDraggableClick : this event is triggered once a draggable is clicked

OnDragStop : This event is triggered once the Dragging of Draggable stops

OnSortUpdate : This event is triggered once the order of draggable inside of group was changed or when a draggable was removed during sorting

JQuery User Interface (UI)This extension is derived from JQuery UI functionalities especially the Draggable Options. To see full documentation and samples of the JQuery UI please visit

If you have suggestions, reviews, or requests please email me at Hopefully this extension will come in handy for your future projects. Thank you and Enjoy! 

Release notes (1.0.0)
Reviews (0)
More from Marco Mateo