Skip to Content

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;

/wp-content/uploads/2015/08/sshot_1_762411.jpg

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;


/wp-content/uploads/2015/08/sshot_3_762412.jpg


Or this report in a dashboard showing User Activity on a Monthly Basis;


/wp-content/uploads/2015/08/sshot_2_762744.png

/wp-content/uploads/2015/08/sshot_3_762745.png


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.


/wp-content/uploads/2015/08/sshot_4_762462.jpg

/wp-content/uploads/2015/08/sshot_1_762411.jpg

Or go for a Inception concept with CIO dashboards ( Dashboard within a Dashboard within a Dashboard (?))

/wp-content/uploads/2015/08/sshot_7_762471.jpg

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;

/wp-content/uploads/2015/08/sshot_5_762463.jpg

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;

/wp-content/uploads/2015/08/sshot_6_762470.jpg

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 !

/wp-content/uploads/2015/08/sshot_8_762472.jpg

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

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

  1. Schlosser Tobias

    Hi vivek,

    interessting thoughts!

    How did you managed that there is no SAP Menu on your second screenshot. Or is it only not visible in the screenshot?

    Maybe you can tell us the link which you used for the iframe?

    When you are using a link such like this link, you are getting the whole sap navigation menu. I don’t want the menu, only the graph.

    http://solmanhost-host:80nn/sap/bc/webdynpro/sap/diag_app_starter?APP_ID=TECHMON_IR_SYS_REPORTING&TECH_SYS=><SID>~ABAP…


    2015-08-05 10_53_04-Systemberichte00 P01~ABAP.jpg

    (0) 
    1. Vivek Hegde Post author

      Hi Mr.Schlosser,

      This is done using a “trimming” feature of iframe in HTML5. Using the trimming you can specify the width and height of the inline HTML frame you want to display. So you can  trim or cut out the top navigation bar and other area.

      My code is like this:

      <div>

        <iframe id=”justaframe” src=”http://solmanserver:port/andtheurllink” style=”border: 0px none; margin-left: -36px; height: 812px; margin-top: -100px; width: 1300px;”>

      </iframe>

      </div>

      So when I mention margin-top: -100px I am basically deducting  100 pixels from top.

      Please refer these links:

      iFrame: How to show specific part of a webpage using iframe

      http://stackoverflow.com/questions/7183192/cutting-out-some-of-the-iframes-src-content

      http://stackoverflow.com/questions/5676672/how-do-i-crop-the-contents-of-an-iframe-to-show-a-part-of-a-page

      Hope this helps.

      Regards,

      Vivek

      (0) 
  2. ramkrishna borhade

    Thanks vivek..for the interesting  dashboard stuff..and we are also working on a simmilar dashboard this is quite helpful post you have created 🙂   which is helping us.

    (0) 
  3. Tom Cenens

    Hi Vivek

    Always nice to see community members get creative 🙂 thanks for sharing.

    One of the problems I see with these dashboards are that they are ugly if we’re just straight up honest, those operations dashboards aren’t going to make anyone smile.

    Creating custom dashboards that look better is time intensive, you need to get custom queries going to really see what you want to see etc. But it’s possible of course, I recently visited a customer who has such a custom dashboard and business users were interested in it.

    The system monitoring page is limited in the number of entries which is also a problem for large Service Providers because they cannot put a monitor on that has a one page overview of everything due to this limitation.

    If a customer wants to report on KPI’s than the Dashboard Factory is more interesting but that does require MaxAttention support contract (yeah that’s pretty heavy right).

    Dashboard Factory – Solution Manager – SCN Wiki

    SolMan 7.2 should bring much more capabilities and a much nicer look & feel so customers can get decent looking dashboards going. Fiori style KPI cockpits are already visible in the roadmap as well so it looks promising.

    Kind regards

    Tom

    (0) 
  4. Tom Cenens

    Hi Vivek

    Always nice to see community members get creative 🙂 thanks for sharing.

    One of the problems I see with these dashboards are that they are ugly if we’re just straight up honest, those operations dashboards aren’t going to make anyone smile.

    Creating custom dashboards that look better is time intensive, you need to get custom queries going to really see what you want to see etc. But it’s possible of course, I recently visited a customer who has such a custom dashboard and business users were interested in it.

    The system monitoring page is limited in the number of entries which is also a problem for large Service Providers because they cannot put a monitor on that has a one page overview of everything due to this limitation.

    If a customer wants to report on KPI’s than the Dashboard Factory is more interesting but that does require MaxAttention support contract (yeah that’s pretty heavy right).

    Dashboard Factory – Solution Manager – SCN Wiki

    SolMan 7.2 should bring much more capabilities and a much nicer look & feel so customers can get decent looking dashboards going. Fiori style KPI cockpits are already visible in the roadmap as well so it looks promising.

    Kind regards

    Tom

    (0) 
    1. Alex L.

      Hello Tom/hello Vivek,

      can you please share the presentation of coming reporting functions (KPI-dashboards, scorecards, etc.) within Solution Manager 7.2?

      I quess the old BW fassion with BEX queries and Web Templates will be replaced by new “state-of-the-art” BW/BO technology.

      Thank you!

      (0) 
    2. Vivek Hegde Post author

      Hi Tom,

      Indeed, agree 100% with your point of view. The concept of workcenters and tons of reports available in Solution Manager has lost its purpose because they are not user friendly. I guess there was a kind of disconnect in the actual design and it’s target users, when it comes to all these technical reports.

      If these were intended for Basis team members, then they can live with the complexities of all the navigation of workcenters (because they belong to technical side). But what good is the “This Weeks System Availability” graph or “This Months Response Time ” chart for basis team members. They would have a little influence on the support KPIs being set in the boardrooms. They would rather expect to receive a simple notification if anything is “not” working. As simple as that.


      If these reports were targeted for IT Management, then they do expect to get all these reports in a single click. And those UI5 based dashboards are exactly what is needed for these set of target users. Even I am of the same opinion that with 7.2 these kind ‘usability’ or ‘ease of use’ points are taken into consideration even for Enterprise Support customers not only for Max Attention customers.


      Thanks,

      Vivek

      (0) 

Leave a Reply