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
| Server Action |
Description |
 ChangeDraggableClass |
Input Parameters :
DraggableId (Text) : used to identify which draggable to update
AdditionalClass (Text) : class that will be added to draggable
IsGroup (Boolean) : Identifies if the draggable is a group wrapper
Description : This action is used to add classes for a specific draggable |
| CreateDraggableFromTemplate |
Input Parameters :
TemplateWebBlockId (Text) : This identifies the template of the draggable to be created
DraggableId (Text) : this will be the identifier of the draggable
DraggableOption (Draggable Option Struct) : this will configure the behavior of the draggable
Description : This action is used to create a draggable based on a template |
| DisableAllDraggable |
Input Parameters :
ContainerId (Text) : This identifies the container of the draggables that will be disabled
Description : this is used to disable the draggable behavior of all element inside the container |
| DisableDraggable |
Input Parameters :
DraggableId (Text) : This identifies the draggable that will be disabled
IsGroup (Boolean) : this identifies if the draggable is a group
Description : this is used to disable the draggable behavior of an element |
| DisableSortableForGroup |
Input Parameters :
GroupId (Text) : This identifies the group that will be modified (When null, all groups will not be sortable)
RemoveAdditionalClass (Boolean) : This will remove the additional class that has been added when sortable capability has been enabled
Description : This is used to remove the sortable property of the group |
| DisbandDraggablesForGroup |
Input Parameters :
DraggableIds (Text Record List) : Used to identify the draggables to be removed from group
Description : This is used to separate draggables from the group |
| DisbandFromGroup |
Input Parameters :
DraggableId : Use to identify the draggable to be separated from the group
Description : Use to separate a specific draggable from the group |
| EnableAllDraggable |
Input Parameters :
ContainerId (Text) : This identifies the container of the draggables that will be enabled
Description : this is used to enable the draggable behavior of all element inside the container |
| EnableDraggable |
Input Parameters :
DraggableId (Text) : This identifies the draggable that will be enabled
IsGroup (Boolean) : this identifies if the draggable is a group
Description : this is used to enable the draggable behavior of an element |
| EnableSortableForGroup |
Input Parameters :
GroupId (Text) : This identifies the group that will be modified (When null, all groups will be sortable)
AdditionalClass (Text) : Class that will be added for the group
Description : This is used to enable the sortable behavior of group |
| GetDraggableData |
Output Parameters :
Draggble (Draggable Struct) : details of the recently CLICKED draggable
Description : This is used to retrieve the data of the recently CLICKED draggable |
| GetDraggableGroupData |
Output Parameter :
Draggble (Draggable Struct) : details of the recently TOUCHED group. This will be filled every ON MOUSE DOWN event on the group
Description : This is used to retrieve the data of the recently TOUCHED group |
| GetDraggableGroupListFromContainer |
Output Parameters :
DraggableGroups (DraggableGroup Struct List) : Details of all existing group inside the container
Description : this is used to retrieve the details of the existing groups inside the container |
| GetDraggableListFromContainer |
Output Parameters :
Draggables (Draggable Struct List) : Details of all existing draggables inside the container (Grouped or Ungrouped)
Description : this is used to retrieve the details of the existing draggables inside the container |
| GetDraggableWithClass |
Input Parameters :
ClassIdentifier (Text) : identifies the specific class of the draggable to be retrieved
Output Parameter :
Draggables (Draggable Struct List) : Details of all existing draggables inside the container (Grouped or Ungrouped)
Description : this is used to retrieve the details of the existing draggables inside the container with specified class |
| GroupDraggable |
Input Parameters :
DraggableId (Text) : Identifies the existing Draggable to be Added to group
GroupId (Text) : Identify the group where the draggable will be added.
GroupOption (GroupOption Struct) : This is the draggable option that will be used when the group is not yet create inside the container.
Description : this is used to add a draggable inside a group. If the group is not yet created, it will be automatically created with corresponding option input parameter |
| GroupDraggables |
Input Parameters :
DraggableIds (Text record List) : Identifies the existing Draggables to be Added to group
GroupId (Text) : Identify the group where the draggable will be added.
GroupOption (GroupOption Struct) : This is the draggable option that will be used when the group is not yet create inside the container.
Description : this is used to add draggables inside a group. If the group is not yet created, it will be automatically created with corresponding option input parameter |
| RefreshDraggable |
Input Parameters :
DraggableId (Text) : This is used to replace the existing draggable configuration or option of a draggable
DraggableOption (DraggableOption struct) : this will be used to replace the current configuration of the draggable
IsGroup (Boolean) : identifies if the draggable is a group wrapper
Description : This is used to replace the existing draggable configuration or option of a draggable |
| RefreshDraggablesInContainer |
Input Parameters :
ContainerId (Text) : Identifies the containment of the draggables to refreshed
DraggableOption (DraggableOption struct) : this will be used to replace the current configuration of the draggable
Description : This is used to replace the existing draggable configuration or option of a draggable |
| RemoveAllDraggable |
Input Parameters :
ContainerId (Text) : This is used to identify the container where the draggables to be remove is located
Description : This is used to remove all draggables inside a container |
| RemoveDraggable |
Input Parameters :
DraggableId (Text) : This is used to identify the draggable to removed
Description : This is used to remove a draggable |
| RotateDraggable |
Input Parameters :
DraggableId (Text) : Identifies the draggable to be rotated
RotationDegrees (Decimal) : This indicate the angle of the draggable rotation
IsGroup (Boolean) : identifies if the draggable to rotated is a group
Description : This is used to rotate a draggable inside the container |
| ToggleLinks |
Input Parameter :
IsShown (Boolean) : indicates if the link placeholder of the DraggableContainerWB will be displayed
Description : This is used to toggle the display of the Individual Links Placeholder |
This extension is derived from JQuery UI functionalities especially the Draggable Options. To see full documentation and samples of the JQuery UI please visit
https://jqueryui.com/If you have suggestions, reviews, or requests please email me at marco.mateo.23.13.@gmail.com. Hopefully this extension will come in handy for your future projects. Thank you and Enjoy!