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 https://api.jqueryui.com/draggable/ for the complete documentation of JQuery UI draggables

For the complete documentation of the extension please visit this link: https://marcomateo.outsystemscloud.com/JQuery_SeatPlan_React_Sample/Documentation

How to Implement in Service Studio

1. Consume the "DraggableContainerBlock", "DraggableTemplateBlock", and "JQuery_JS_CSS block from the JQueryUI_SeatPlan_React module.

2. Add the JQuery_JS_CSS Block at the bottom of the screen

3. Add the DraggableTemplateBlock 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

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

5. Add the DraggableContainerBlock to the webscreen.

6. 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.

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

7. Set the appropriate screen action each event:

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

OnDraggableClick : this event is triggered once a draggable is clicked

OnDraggableDragStop : This event is triggered once the Dragging of Draggable

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

For the complete documentation : https://marcomateo.outsystemscloud.com/JQuery_SeatPlan_React_Sample/Documentation