Skip to Content
Author's profile photo Former Member

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

  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
Screenshot_022616_025043_PM.jpg

Screenshot_022616_025232_PM.jpg

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.

Screenshot_022616_031851_PM.jpg

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.

Screenshot_021816_021149_PM.jpg

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:

Screenshot_030816_105521_AM.jpg

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

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vincent Dechandon
      Vincent Dechandon

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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

      Author's profile photo Patrick Yolabo
      Patrick Yolabo

      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

      Author's profile photo Justin Boss
      Justin Boss

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

      Author's profile photo Scott Kelson
      Scott Kelson

      Hello Patrick,

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

      Thank you,

      Scott

       

      Author's profile photo Former Member
      Former Member

      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