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