JQuery SeatPlan React

Version 1.0.0 (OutSystems 11)
Published on 17 Mar (2 weeks ago) by 
Created on 17 Mar (2 weeks ago)
Details
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
Read More

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

Reviews (0)
Category
Libraries, Components, Samples & How-tos, Developer Tools, Templates
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Marco Mateo who created this component.
Dependencies
JQuery SeatPlan React has no dependencies.
Requirements
Platform:
11.0.606.0
Database:
All
Stack:
.NET
Component Consumers
No consumers yet.
Weekly Downloads