Hello All,
Siebel has a very obsolete Homepage/Dashboard with outdated Calendars and Applets appearing on Homepage, so is there a way we can improve siebel dashboard to make it par with the latest products available ?
Well yes, we can achieve this using the Open UI Framework and can include Charts, Graphs , Timeline etc to give it a rich and modern look.
The Code to get this Done, well the code is pretty simple to set the context please go through the W3 School Link, this will give a basic idea of How to use Google charts and then we will only have to pass Siebel data to Chart Object.
https://www.w3schools.com/howto/howto_google_charts.asp
Siebel Code, I am writing the sample code in postload.js file for reference, you can write in any Applet or View PR.
Siebel has a very obsolete Homepage/Dashboard with outdated Calendars and Applets appearing on Homepage, so is there a way we can improve siebel dashboard to make it par with the latest products available ?
Well yes, we can achieve this using the Open UI Framework and can include Charts, Graphs , Timeline etc to give it a rich and modern look.
The Code to get this Done, well the code is pretty simple to set the context please go through the W3 School Link, this will give a basic idea of How to use Google charts and then we will only have to pass Siebel data to Chart Object.
https://www.w3schools.com/howto/howto_google_charts.asp
Siebel Code, I am writing the sample code in postload.js file for reference, you can write in any Applet or View PR.
| if (typeof(SiebelAppFacade.Postload) == "undefined") { Namespace('SiebelAppFacade.Postload'); // need to pass the JS file here or in Script tag, either the URL or Make an entry in Manifest file and register it //define("Postload", ["https://www.gstatic.com/charts/loader.js"], function () { SiebelApp.EventManager.addListner("postload", OnPostload, this); function OnPostload( ){ try{ //Invoking 3rd party script for charts rendering var script = '<script type="text/javascript" src="http://www.gstatic.com/charts/loader.js"></script>'; var a = '<div id="piechart"></div>'; $('#_sweclient').append(a); google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); // Draw the chart and set the chart values , need to pass values from Siebel i am using the value from W3 School as example function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 8], ['Eat', 2], ['TV', 4], ['Gym', 2], ['Sleep', 8] ]); // Optional; add a title and set the width and height of the chart var options = {'title':'My Average Day', 'width':550, 'height':400}; // Display the chart inside the <div> element with id="piechart" var chart = new google.visualization.PieChart(document.getElementById("piechart")); chart.draw(data, options);} } catch(error) { //No-Op } } }()); } |
For more information of Charts available please refer, https://developers.google.com/chart/interactive/docs/gallery
No comments:
Post a Comment