SAP Lumira – Geek Tweaks: Customizing visualization properties in SAP Lumira
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
- Enable the debug mode in SAP Lumira.
- 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
- Right clicking anywhere outside the visualization and debug the chart extension.
- Select ‘Show DevTools’.
This opens up the DevTools where you can find the source of the page.
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.
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.
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.
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!
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?
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
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
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
Just a little clarity...
"The changes will be permanent as long as the extension is installed. If you remove it, it will get removed."
Hi Gabriel,
To answer your questions....
Hope it clarifies, please post other questions if you have any.
Best
Shankar
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.
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
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