Before Open UI the only way to get charts and graphs on Siebel UI were Siebel Analytics (in past) and OBIEE but with Open UI that has changed. I read a blog post showing how various types of data visualizations can be achieved in Siebel Open UI using different jQuery plug-ins. It didn’t explain how to achieve it but just showed what was possible.
I really liked the way they had shown opportunities data in pie chart and I went about finding out how to do it and then did it. This post is intended to share how to create graph and charts in Siebel using Open UI capabilities. So, Lets get started:
First thing was to find the right jQuery plug-in that could accomplish the task and after researching several plug-ins I zeroed in on jQuery Google Chart which is based on Google’s Chart API. Next was to find the right use case so I chose Opportunity List Applet and below are the steps you need to follow to get the charts up and running.
1. Create the below mentioned entry in manifest_extension.map file.
Opportunity List Applet = OptyGraph
2. Create the following key in custom_manifest.xml file under the PLATFORM_KEY_SPECIFIC –> Platform Name=”Desktop” section
<FILE_NAME> 3rdParty/jqGrid/current/js/jquery.jqGrid.min.js </FILE_NAME>
<FILE_NAME> 3rdParty/jqGrid/current/js/i18n/grid.locale-en.js </FILE_NAME>
<FILE_NAME> 3rdParty/jqgrid-ext.js </FILE_NAME>
<FILE_NAME> siebel/phyrenderer.js </FILE_NAME>
<FILE_NAME> siebel/jqgridrenderer.js </FILE_NAME>
<FILE_NAME> 3rdParty/jquery-gchart/jquery.gchart.min.js </FILE_NAME>
<FILE_NAME> siebel/custom/optygraph.js </FILE_NAME>
3. Finally copy the below provided optygraph.js file to PUBLIC/ENU/23021/SCRIPTS/SIEBEL/CUSTOM folder
That’s it you have fully functional 3D pie chart that changes according to data present in list applet.
Now bit of explanation of the code:
ShowUI: This is the function that is called when the applet is first rendered by Open UI. Essentially this function performs following
- Get RecordSet
- Get Placeholder
- Loop for all records and create a PropertySet
- Create Graph based on this data
BindData: Essentially a copy of ShowUI but this is called by default if there is any change in data set for example an user query.
CollectData : This function loops through the list of column for each record and captures the count required for display of graph. This where you would change according to your needs such as base your graph on Status instead of Sales Stage
CreateGraph: This is where the jQuery plug-in functionality is implemented that actually create the graph. You will have to study the plug-in functionality in order make changes and use different type of graphs.
I know it is easy to get excited and let your imagination think all the things you can do with this but I would like to point out one important point. By default record set only return data that is displayed in list applet so the use case are really limited to applets where first 10-25 records are enough to provide insight. You cannot really implement this in “All _____ List Applets”.
I am working on one more demo which will utilize the Google charts directly as it gives access to much more functionality than the plug-in. It would increase few lines of code but I think it will be worth it. I have included comments in code trying to explain it but still if you are facing some problem don’t hesitate use comments section, I will try to answer it to best of my ability.