Former Member

March 9, 2016 5 minute read

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 > Tools > Install CVOM Chart Extension...
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 > Help > About… .
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

By the time I write this blog, I have ported seven SAP Lumira extensions and realize the limitation of the current workflow. If you had ever developed or intended to use Lumira extensions in Design Studio, you need to take care of the aspects listed below.

1. Different number format between Lumira and Design Studio

Lumira	Design Studio

Data type is number, like -49200	Data type is string, like “-49,200”

The data transfer to the different type of data when you import .csv dataset into Lumira or Design Studio. You will find the value of “X Coordinate” and “Y Coordinate” are NaN.

So you need to take care of the extension if the numbers are larger than 1000 in the dataset, which you intend to use for Design Studio. There is a simple loop to parses a string argument and returns a floating point number.

2. Load external resources in your extension.

If your extension uses external resources, i.e. images, scripts or local data files, you need to set up a path for both Lumira and Design Studio load the resources from your folders. I use the power flow map as an example to explain the process.

You will use a directory layout like this:

Import ideurope.json.js and topojson.v1.min.js into the new folder ./js/libs, you will use the URL in this directory later in the object in resources.

In powerflowmaps-bundle.js:

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”
                }]
            }
      }]
  });

In render.js before you create a configuration object to pass in to require function:

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;
      }
  }

In render.js :

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:

lumira-extension-viz/sap.viz.ext.powerflowmaps_DSLU.zip at master · SAP/lumira-extension-viz · GitHub

6 Comments

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

Vincent Dechandon

March 14, 2016 at 8:48 pm

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

Former Member

Blog Post Author

March 14, 2016 at 10:29 pm

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

Patrick Yolabo

November 8, 2016 at 9:10 am

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

Justin Boss

December 22, 2016 at 10:33 pm

I'm having the same issue. I look foreword to any reply you get.

Scott Kelson

July 13, 2017 at 3:37 am

Hello Patrick,

Were you able to fix this error. I'm getting this now.

Thank you,

Scott

Former Member

November 16, 2016 at 8:37 am

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

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!

Web IDE vs. Eclipse

Install and execute CVOM Extension

1. Install procedure

2. Remove procedure

Video Tutorial

Available Extensions

1. Different number format between Lumira and Design Studio

2. Load external resources in your extension.

Download Example

Assigned Tags