Fellow Members,
Background: It's been a quite a long time, I was in a kind of hibernation from SCN. I thought of sharing some interesting stuffs I learnt recently. I use the term 'interesting' since, prior to this, I had no clue on how to write a code or written a single line of code in my career as a SAP Consultant.
We all know from the 7.2 promo videos and webinars, that, there will be many UI5 based dashboards are on offer for Technical Monitoring, BPO etc, which is great news and we are all looking forward to it. I hope this release will have a quick to access reports and dashboards in a central place giving a break to "so many clicks here and there" type of complaints you hear often from customers for any solman functionality you demo to them.
Management Dashboards and CIO dashboards are most sought after features in technical space nowadays. Some customers may want to extend the same 'look&feel' of Mgmt Dashboards to other reports and graphs available in Solution Manager 7.1 workcenters. Recently I came across a unique situation where I had to make a simple dashboards for intelligently displaying some of the most important reports already available in various workcenters of Technical Operations in 7.1. In short, senior management team from IT side wanted to "see" all the possible reports in "one place" with a single click of a button. I suggested them to bookmark all the workcenter links and dashboard URLs in their browser , however that was not a satisfying answer for them for obvious reasons. So I googled and found out that we can make custom HTML5 and CSS based website look alikes or mock dashboards which can be used to meet such demands. The result would be a whole new way of accessing and displaying the same reports from workcenter in a dashboard look and feel way ! Or something like this;
How do you build such dashboards?
It is a not a much difficult task, you need to have a CSS, Javascript and HTML basic coding knowledge. There are many free to use templates available in github & sourceforge, which you can use as a reference. Most important thing to remember here is, we are neither developing any z reports out of Solution Manager 7.1 nor writing any BW queries, but we are just fetching the data from workcenter and displaying them in a structured way. For this,the most useful HTML5 feature I use is, the <iframe> tag to specifies an inline frame. An inline frame is used to embed another document within the current HTML document. So I create a HTML page and then use <iframe> feature to display a report from workcenter. Any workcenter graph would have seamless display within your HTML page; for example; the Availability reports from Interactive Reporting would look like this;
Or this report in a dashboard showing User Activity on a Monthly Basis;
Or a System Monitoring entry page (Technical Monitoring Workcenter> System Monitoring> Select All Systems> Open in a new Window) can be displayed like below; here is an unique advantage for such display;the below page in workcenter has auto refresh window starting from 5 minutes unless you manually refresh the browser. If you embed this view in a HTML page and use <meta http-equiv="refresh" content="30" > code, then the page auto refreshes every 30 seconds, fetching latest ratings.
Or go for a Inception concept with CIO dashboards ( Dashboard within a Dashboard within a Dashboard (?))
At the end, your goal is to have a single html page for the every URL from workcenter you want to display; to do that, you need to deploy all the individual HTMLs on a tomcat. For me it was something like below after the completion of all the dashboards creation;
Now you can deploy these pages on a Tomcat so that these dashboards are accessible company wide with a single click. To deploy it on a tomacat, download the latest tomcat from https://tomcat.apache.org/download and place the entry page (index.html) in the webapps folder along with the rest of the files (css, js and htmls) like below. Place this tomcat folder along with all the content on a server. I usually deploy it on a solman server itself so that it is consistent with rest of the URLs;
Now you are good to go; just type http:// <server where you placed these files>:8080/index.html in a browser and you have your own dashboards !
Hope this helps; and I am curious to know if any of you would try such tasks If so, please leave a screenshot of your dashboards; so that I would know that I am not the only person getting such requests from customers
Usefull Links:
http://www.w3schools.com/js/js_examples.asp
http://www.w3schools.com/tags/tag_iframe.asp
http://www.w3schools.com/css/css_examples.asp
https://tomcat.apache.org/download-80.cgi
Regards,
Vivek
- SAP Managed Tags:
9 Comments
