How to port SAP Lumira Visualization Extensions to SAP Design Studio
Found a Lumira Viz Extension that you want to use in Design Studio?
Read on to learn how!
In addition to the standard palette of components in SAP BusinessObjects Design Studio, you can install 3rd party components developed with the Design Studio SDK. You don’t want to learn all of the complex processes of design studio to create a new visualization? Forturnetally, you can install new chart types developed with the SAP Lumira SDK!
Web IDE vs. Eclipse
From my personal experiences of building many extensions of Lumira and Design studio, I realize how easy to use SAP Web IDE is, which is used to create the extension for SAP Lumira, instead of developing the Design Studio extension in Eclipse.
Now, the new Design Studio 1.6 provide the SDK extensions, also known as CVOM chart extensions, can add to the additional chart types for the standard chart component. You can create your custom chart or directly download more than 60 extensions from our Lumira visualization library on Github.com/SAP.
Install and execute CVOM Extension
1. Install procedure
- In SAP BusinessObjects Design Studio, choose > .
- Depending on where the CVOM chart extension is located, proceed as follows:
- For locally saved extensions, choose Archive… and select the archive file containing the extension, for example C:\SampleChartExtension.zip.
- For extensions stored on a Web server, enter the URL of the Web server.
- Choose OK and then choose OK again to confirm the installation.
- To restart SAP BusinessObjects Design Studio, choose Yes.
- When you create or open an analysis application with a chart component, the CVOM chart extensions you have added are listed as new chart types.
- In the Properties view of the chart component, under Chart Type, choose Additional Chart Types…. The CVOM chart extensions are listed as new chart types in the Additional Charts dialog box.
2. Remove procedure
- In SAP BusinessObjects Design Studio, choose > .
- Click the Installation Details button.
- Select the feature containing the SDK extension, for example, Sample Extension Feature.
- Choose Uninstall….
- In the Uninstall wizard, choose Finish.
- Choose Yes to allow SAP BusinessObjects Design Studio to restart.
Video Tutorial
I recorded the following video to show how to install and uninstall a CVOM chart extension and execute local analysis applications containing these new chart types.
P.S. The CSV utility tool which uses in the tutorial is in processing to publish and not available right now. The official solution is export to CSV from within Edit Initial View in Design Studio.
Available Extensions
1. Different number format between Lumira and Design Studio
2. Load external resources in your extension.
var vizExtBundle = sap.bi.framework.declareBundle({
………..
“resources”: [{
“key”: “sap.viz.api.env.Template.loadPaths”,
“path”: “./sap_viz_ext_powerflowmaps-src/resources/templates”
},{
“key”: “sap.viz.ext.powerflowmaps.libsPath”,
“path”: “./sap_viz_ext_powerflowmaps-src/js/libs”
}]
}
}]
});
var libspath = sap.viz.api.env.Resource.path(‘sap.viz.ext.powerflowmaps.libsPath‘)[0]; |
var jslibsUrl = function(fileName){
if(libspath.split(“?”).length > 1 ){
// url for Design Studio
return “../” + libspath.split(“?”)[0] + fileName;
}else{
// url for Lumira
return “..” + libspath + fileName;
}
}
require.config({
‘paths’: {
‘topojson’: jslibsUrl(‘topojson.v1.min’), // ‘topojson’ : ‘../sap/bi/bundles/sap/viz/ext/powerflowmaps/topojson.v1.min’
‘eur’: jslibsUrl(‘mideurope.json’) // ‘eur’: ‘../sap/bi/bundles/sap/viz/ext/powerflowmaps/mideurope.json’
},
shim: {
topojson: {
exports: ‘topojson’
},
eur: {
deps: [‘topojson’],
exports: ‘eur’
}
}
});
Download Example
Check the github link on below to learn more about detail:
Hello Wendy.
Your post is really interesting and open doors for new possibilities.
However, there are still huge gaps between a Lumira and a DesignStudio extension, and I wonder how I could leverage extension development by only having to handle one app for the two products.
In DesignStudio for example, you have an Aditional Properties part while in Lumira there is not. Same, DesignStudio heavily relies on an XML file (contribution.xml) that defines properties the user will be able "to write" when creating its app, while it does not exist (at least not in the same way) in Lumira (same for script contribution, a.k.a API exposed by extension, that does not exist in Lumira).
I wonder if you have some documents that could help to get started for merge two extensions, ans also show current limitations (non-CVOM extension).
Br,
Vincent
HI, Vincent
Thanks for you read my blog. I had experiences to develop extension on both platforms, but I'm more familiar with Lumira than DS. But I don't think there is a solution to 100% fill gap between Lumira and DS, i.e. Aditional Properties or XML. The Lumira and DS have their particular SDK to create the distinct extensions. For instance, the native DS extension has a unique way to access the data, and it don't fit for Lumira. The current solution develops compatible extension is use require.js instead of contribution.xml to import resources and try to avoid too many interactive components in extension if you want to it work on Lumira.
There are not an official document to migrate a DS extension to Lumira or migrate non-CVOM extension. You can propose a particular example to discuss the solution to work on both, and welcome to write a blog if you get any new idea.
Wendy
Hello Wendy,
i was trying to install Lumira-extension-viz-master on Design Studio 1.6 and i am confronted with following error "failed to install CVOM chart extension . No feature JSON found."Any hints on how to solve it?
Many Thanks
P
I'm having the same issue. I look foreword to any reply you get.
Hello Patrick,
Were you able to fix this error. I'm getting this now.
Thank you,
Scott
These steps seems to be outdated with 1.6 SP03. There is no "Additional charts types" options in the chart type in properties of Info Charts.
Please correct me if we can use these extension with DS1.6 SP03.
Regards,
Sandeep