Open UI for beginners – integrate Jquery third party plugin in Open UI
First thing that comes to our mind is the capability of open UI with Jquery. Therefore it was time to take deeper dive to see how we can integrate Jquery plugins into Siebel open UI application and make a user friendly interface with least custom configuration. In other words, enhance end user experience, show users what open UI can do different from our primitive – High Interactivity.
In this post, I am only talking about styling your alerts or notifications or pop ups as some may call it, be it any of the following
There are so many third party plugins available on internet but for this post I looked at third party plugin called ‘Lobibox’. Through this post I will elaborate steps which can help you add “Lobibox” third party plugin in your Siebel open UI app.
You can explore more on this Lobibox plugin at the following links
Let’s get started and integrate this third party plugin ‘Lobibox’ into Siebel open UI application. Just follow below steps closely:
Step 1: Configure your PR file for the applet. Do sanity checks to ensure PR file is triggered properly (use a custom alert pop up message) i.e. register your custom PR file in Manifest Files. Point your applet in Manifest Administration to custom PR file.
I know for a beginner this may not be an easy step when it comes to PR for form/list applet, PM for form/list applet. I will try to cover this in another post.
Step 2: Download the third party plugin “Lobibox in your local desktop.
For Lobibox, I clicked on below URL
Click on download to save a copy to my local desktop. Extract the ZIP file and go to “lobibox-master\dist\js” and copy file ‘lobibox.min.js’ to your “Siebel/custom” folder where your other custom js file resides.
You can click on Demo button to understand more about this plugin.
Step 3: Go to “lobibox-master\dist\css” and copy file ‘lobibox.min.css’ to your “files/custom” folder where your Siebel open ui css exists.
Step 4: Lets instruct Siebel open UI to load an external css for rendering this third party plugin ‘Lobibox’.
Check existing configuration in your system as how your open UI theme file is picked. For my system, it is loaded using theme.js file.
In theme.js file add an entry to external css rendering this third party plugin ‘Lobibox’ as shown below.
Remember themes are comma separated list i.e. missing this step may blew your view.
Step 5: Lets instruct Siebel open UI to load our 3rd party JS file as shown below
Step 6: Open your custom PR file and call methods of third party plugin Lobibox to render notifications in more stylish way.
Sample code is shown below.
•ShowUI method of PR file used to render third party plugin.
•Lobibox.alert() – third party plugin method.
•msg: option for alert() method. For more options, please visit the urls for lobibox plugin.
•You can add html wrapping over any custom text content. for example: look at how “Error” text is displayed red in error notification or Successful text in success message notification.
Step 7: Save your changes to your PR.js file, refresh browser cache and restart your Siebel open UI application.
You will see different notification using this plugin as shown below.