A common request among WaveMaker Studio developers is to integrate third-party UI widgets inside WaveMaker Studio and make them available as drag-and-drop components. This task becomes especially challenging when we consider the fact that the WaveMaker Studio uses AngularJS technology for defining its widgets and the third-party widget may be using another technology like jQuery. In this blog post, we will take a use case-based approach to see how a jQuery-based third-party widget is integrated with WaveMaker Studio. For achieving this, we will leverage Studio’s very own superstar component - Prefab - and demonstrate its power of customization.
Use case
Lets take Lightbox image viewer widget and see how users can integrate this widget into WaveMaker Studio using Prefabs. This widget is jQuery-based and this link gives the details about how to use the Lightbox widget in general.
Steps to integrate Lightbox widget into WaveMaker Studio
The detailed steps to create this Prefab, export it and use it any WaveMaker Studio project are given below.
1. Get the widget library source code: Download the Lightbox resource files from here and unzip it into a folder
/integrating-third-party-ui-widgets-using-prefabs/
2. Import the relevant js, css and image files into WaveMaker Studio. In case of Lightbox widget, the details are given in the step-1 of “How to use” section in the Lightbox project home page.
The imported files can be seen under the folders js, css and image.
3. Set the Bindable Properties for the Prefab: Go to the newly introduced “Prefabs Properties” section under the project “Settings” and add references to the imported js under script section, css under the style section and an icon file. Add the bindable properties that are needed for this Prefab. In this example, we have added “image” and “title” properties that represent the location and title of the image to be displayed.
These properties will appear in the properties panel of the Prefab, once it is dragged and dropped into the WYSIWYG canvas.
Check out the WaveMaker Prefabs documentation to get complete details about this new feature.
4. Design the Prefab UI: Drag and drop the “picture” widget to display the image thumbnail and bind the “Hint” and “Source” attributes to the “title” and “image” properties respectively that you had defined in the previous step.
And finally, step-2 of “How to use” section of Lightbox documentation instructs the user to embed the images inside an anchor tag(<a>...</a>) & also add a “data-lightbox” attribute, to activate the widget. In the Studio we can do this by adding the above details in the “Markup” section, as shown below.
5. Export the Prefab using the Export menu item in Studio (see Fig-7). Make sure you have tested the Prefab before you export it.
6. Import the Prefab and use it as any other component inside an app. To demonstrate the Lightbox Prefab usage, lets create a demo app called “ImageViewer” and import the Lightbox Prefab. Once it is imported you can spot the LightboxPrefab in the Prefabs accordion section.
7. Perform the following customary steps in the Studio to integrate the LightboxPrefab:
a. Import the sample DB provided with WaveMaker Studio
b. Drag and drop a Live-List widget into the canvas and bind it to the dataset of “HRdbEmployeeData” live variable that got created automatically after import of sample DB.
c. Delete the “panel1” created under the “listtemplate1”.
d. Drag and drop the lightbox prefab into the “listtemplate1” and bind the image “Source” property to “Variables.HrdbEmployeeData.dataSet.picurl” and the title to “Variables.HrdbEmployeeData.dataSet.firstName”
We are all set now. Run the application and see how the Lightbox image viewer functionality executes successfully.
The above approach of using Prefabs can be applied successfully to integrate any third-party UI widgets into WaveMaker Studio instantly, providing the needed customization inside Studio.
Try it out with your widget of choice and let us know how it went. Send your experience of integrating your custom widget to feedback@wavemaker.com.
References
Lightbox: lokesh dhakar projects - lightbox2
Karthick Viswanathan
Product & Customer-Success Manager
