Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 

SAP Lumira´s compose room offers a great platform to present your visualizations. You can add text, shapes, pictures and of course your visualizations. Furthermore, you can change the background color and create additional pages, just as in a conventional presentation.

On top of this, custom visualization properties are supported. These properties are individual for each visualization/extension, and are accessible directly from the render function. The render function is the main part of your extension, where you declare all the D3 elements. It is possible to add standard or custom SAP UI5 elements to an area in the compose room.  Beginning with custom colors for single elements, you can make the whole layout and behavior customizable with this feature.

For an example see my Competition Chart Extension *Coming Soon* SAP Lumira Extension: Competition Chart.

Development Process

Please follow this guide to get started: Visualization Extension Plugin for SAP Web IDE Guide. In the following I describe some of the changes made to the files.

1. flow.js

In this file you register the properties of your extension. If you want to use a String as input, you set the type to "String" and the supported Values to "".

Also note that the names have to match the names used in the spec.js.

2. spec.js

The layout structure of your custom visualization properties is set here. Make sure you change the package name from the example to your own. Also change the "id" and "property" to the names you have used in the flow.js.

3. checkbox.js

First of all, you can of course name this file to be more suitable for your use case, and do make sure to change the names in the beginning of the spec.js accordingly.

SAP Lumira has imported the SAP UI5 package by default; therefore, you can use every element the way you want. On top of that, you can even customize your SAP UI5 elements Creating Custom Controls in SAPUI5. For an overview of the SAP UI5 components, have a look at this SAPUI5 SDK - Demo Kit.

The property itself can be updated with the value in that originates from the spec.js, for example with the following piece of code:

     liveChange: function(oEvent) {

          proxy.updateProperties(buildPropertyTree(, oEvent.getParameter("liveValue")));


4. render.js

Now you can integrate the custom properties in your visualization. For a first approach make use of the following source code:

            var customTextSize = "10px";



               customTextSize = properties.textSize + "px";



This guarantees that the property is always set, even if the user does not use the compose room or apply changes.

On top of that you can add elements dynamically to your visualizations. For example a colored shape, if the user changes a certain property, simply add the element to your container if the properties and the specific properties were set.

According to the guide there are some other files that need to be changed (*-bundle.js, language.js), but these are really simple to implement.


The integration of custom properties might be included in the VizPacker plugin for WebIDE at some point. Until then, once you understand these changes and additional files, the use of custom properties can be a great feature to your extensions.

Please feel free to comment, ask questions and come up with more ideas about this topic.