How to port SAP Lumira Visualization Extensions to SAP Design Studio

[Former Member]

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

1. In SAP BusinessObjects Design Studio, choose > Tools > Install CVOM Chart Extension...
2. 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.
3. Choose OK and then choose OK again to confirm the installation.
4. To restart SAP BusinessObjects Design Studio, choose Yes.
5. 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.
6. 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

1. In SAP BusinessObjects Design Studio, choose > Help > About... .
2. Click the Installation Details button.
3. Select the feature containing the SDK extension, for example,  Sample Extension Feature.
4. Choose Uninstall....
5. In the Uninstall wizard, choose Finish.
6. 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 · GitHu...