In my previous Geek Tweaks, I had blogged about Tweaking SAP Lumira client for performance. Check it out if you have not read it. In this post we will be about customizing visualization properties in SAP Lumira.

“Geeks do not stick to defaults”

Note: Try them at your own risk.

It is well known that SAP Lumira offers a lot of visualization options like bar chart, stacked charts, various version of pie chart etc.. However, there are moments when we wish there was a way to modify chart properties like color, font, etc.

Geektip: We hate limitations & try to break them with our Geek Tweaks. ONLY for geeks.

Identifying the chart canvas

  1. Enable the debug mode in SAP Lumira.
  2. Modify the ini by adding -Dhilo.cef.frame.debug=true and editing -Dhilo.cef.cache.enabled to false.

Voila! You will now be able to debug the visuals from inside the Visualize pane.

Let’s open one chart type, BestRunCorp, for sample. It has a stacked column chart and a dual axis line chart. By default, the stacked column chart comes in blue color and the line chart in a fixed color, we will now modify the colors.

Geektip: We hate whirlwinds. Smartcuts are our way. Shortcuts are so 1990, right?

Finding chart class

  1. Right clicking anywhere outside the visualization and debug the chart extension.
  2. Select ‘Show DevTools’.

This opens up the DevTools where you can find the source of the page.

DevTools -1.png

This is quite similar to Chrome Developer tools. You can navigate around the code to find the corresponding elements and the class associated with them.

Geektip: We make the unknown, known. Well, almost.

The easy way

Feeling a code rush? Well, unlike the Developer tools in Chrome, we cannot select the element to see its corresponding HTML code. We need to publish our dataset to SAP Lumira cloud and view it in a browser.

/wp-content/uploads/2014/11/2_611937.png

We can now see all the elements and the corresponding code. You can apply the CSS you need locally and try out how it comes.

SAP Lumira uses SAPUI5 for rendering the chart and also the colors of the chart are embedded inline which you can find by examining this piece of code.

3.PNG

Geektip: The neo-geek isn’t retro at all. We’re cool. We’re trendy!

Applying CSS

One of the best things about CSS is the ability to override properties. In this case, we are going to override the default property of elements with our custom properties. After skimming the code, I found the things I needed to change. This is the bare skeleton style

Template

.v-datapoint {

}

.v-bound {

}

.v-axis1 .v-lines {

}

.v-axis2 .v-lines {

}

We are modifying the color of the bar in the chart and also the line. I am applying the color in .v-datapoint and both the v-axis classes

Template

.v-datapoint {

fill:#C08255;

}

.v-bound {

fill:#0FF;

}

.v-axis1 .v-lines {

stroke:#FB8547;

}

.v-axis2 .v-lines {

stroke:#FDEC68;

}

Changing the Title

For the fonts-geeks out there, SAP Lumira offers Open Sans’, Arial, Helvetica, sans-serif, for any reason you want to change it, do so by changing the font in the CSS.

Title

.v-title {

font-family: Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 15.4px; color:#25354A;

}

.v-label {

font-family: Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif; font-style: normal;

}

.viz-axis-title {

fill:#857B5D;

}

Packing all together

Now that we have the CSS, let us bring it into SAP Lumira. We need to make an extension with this CSS and install it inside SAP Lumira. Keep the render function clean and paste the CSS inside the style and pack the extension.  I have packed an extension and installed that inside SAP Lumira. Here is how it now looks like.

/wp-content/uploads/2014/11/5_611947.png/wp-content/uploads/2014/11/4_611945.png

The extension can be installed on the SAP Lumira server to achieve the similar results. Build your own template styles for SAP Lumira based on the above methods.

This is just a start, lot more can be done with the magic of CSS and SAP Lumira. Feel free to share your templates or CSS in the comments section.

Happy geeking! Happy tweaking!

Read more @ http://visualbi.com/blogs/sap-lumira/sap-lumira-geek-tweaks-customizing-visualization-properties-in-sap-lumira/

To report this post you need to login first.

9 Comments

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

  1. Tobias Strobel

    Hi Shankar,

    thanks for the Geek Tweaks. I like the CSS customizing and i am planning to customize the default.css /library.css. I want to have the texts and titles maybe even some background pictures with my style.

    I can’t find the CSS file. I see that Lumira is using saupui5 through localhost:52286. But how can i change the library.css within?

    (0) 
    1. Shankar Narayanan SGS Post author

      Hi Tobias,

      The internal CSS file is part of the JAR file that comes with Lumira. So editing that is not a good option, Instead you can build an extension that overrides the CSS class to achieve the result.

      Here is the CSS for applying background to the charts.

      .viz-controls-chart-holder {

      background-image: url(“bg.jpg”); !important

      }


      You can refer above for changing the text and background colors.

      Regards

      Shankar

      (0) 
      1. Tobias Strobel

        Hi Shankar,

        thanks for your reply and sorry for my lack of skills (specially in finding the how-to’s on my own).

        But how can i build an extension to override the CSS? And will this be permanent? So that other users will have those CSS changes when they open my file?

        Best regards,

        Tobias

        (0) 
        1. Shankar Narayanan SGS Post author

          Hi Tobias.

          Not a problem, You can check out this link on how to build extensions.SAP Lumira Extensions – Learn How-To Develop One

          You need to send them the extensions that they need to install on their desktop and then view the Lums file to open it. The changes will be permanent as long as the extension is installed. If you remove it, it will get removed.

          If you are new to Lumira or want to explore more on this Geeks tweaks, feel free to check some of my other blogs. And feel free to post questions, i will try my best to answer them 🙂

          Regards

          Shankar

          (0) 
          1. Gabriel Braun

            Just a little clarity…


            “The changes will be permanent as long as the extension is installed. If you remove it, it will get removed.”

            • The permanent change is for design time? Previously published version will not be effected?
            • Installing extension affects all version of the CSS modified chart, both existing and new?
            • Changes are applied to all pages and stories in the Lums?
            (0) 
            1. Shankar Narayanan SGS Post author

              Hi Gabriel,

              To answer your questions….

              • Yes. The latest version of the extension affects all others.
              • Yes. As mentioned in the document, the affect is for all the components across the tool. If you need to do it for specific, you would need to find and apply only for that CSS
              • Yes it is applied for both pages and stories.

              Hope it clarifies, please post other questions if you have any.

              Best

              Shankar

              (0) 
  2. Alejandro Wojtowicz

    I’m wondering why SAP does not think of having format properties on each component as XCelsius (Dashboards) has, this is pretty the same problem with Design Studio where you would need hundreds of lines of code to do something that is not a kick in your eyes to see.

    It is really a lack of functionality and some kind of dumb thinking to build and sell a visualizaions tool without this basic customizations.

    CSS customizations and coding is far from the essence of Lumira.

    Don’t take it personal, I found your post very useful but very far from my expectations about Lumira.

    (0) 
    1. Shankar Narayanan SGS Post author

      Thanks for the open feedback Alenjandro. Like mentioned, most of my blogs are workaround solutions that provides new features and some of them do involve writing code. However as the product matures you can find some of the features packed along with it.

      Do keep your comments coming in and i will keep in mind to also write some less geek stuffs in future to cater to wide audiences.

      Best

      Shankar

      (0) 
  3. Sherif Elkoumi

    Hi Shankar,

    I could not find this code Dhilo.cef.cache.enabled to false in ini file, but I addeded following code
    -vmargs
    -Xdebug
    -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=1044

    I found it in the following document
    https://help.sap.com/businessobject/product_guides/vi01/en/lum_114_vp_en.pdf

    My question, how can I start Lumira in debugging Mode?  How can I reach Dev Tool, you mean Lumira Desktop or a lumira application on BO Plattform ? I need to reach the class, but do not know How can I reach the first pictures you have in your illustration here

    (0) 

Leave a Reply