Migrate VizPacker-based Lumira Visualization Extensions to Web IDE

[dongpan]

In my last two blog posts (SAP Lumira Visualization Extension - Hello World from SAP Web IDE and Introducing the All-New Visualization SDK for SAP Lumira), I talked about the exciting news of using SAP Web IDE to develop Lumira visualization extensions, the benefits of this new tool and a brief walk-through of a Hello World example. Your next question probably is: "what do I do with my existing visualization extensions created with the built-in VizPacker utility?"

Well, the answer is, you should migrate them to SAP Web IDE. The word "migrate" might sound a bit daunting, but in fact the migration is so straightforward that you might not call it a "migration". Normally it would require the following steps to migrate your existing visualization extension:

1. Create project definition in SAP Web IDE. This includes the definition of basic project information such as the project name, chart ID, vendor, description etc. You can keep them the same as in the built-in VizPacker.
2. Define the layout model, including chart type (SVG vs. DIV), chart title and legend, as well as data model including dimension sets and measure sets. Keep them the same as in the built-in VizPacker.
3. Retrieve the chart property parameters and create a canvas. These few lines of code were automatically added to the top of the render function in the built-in VizPacker for SVG-based charts, but it is not the case in Web IDE, so keep this code snippet handy and add it to the top of the render function.

   
   
   var render = function(data, container) {  //Do not copy this line
   
       //Retrieve chart properties
   
       var width=this.width(),
   
             height = this.height(),
   
             colorPalette = this.colorPalette(),
   
             properties = this.properties(),
   
             dispatch = this.dispatch();
   
         //Prepare canvas with width and height of container
   
         container.selectAll('svg').remove();
   
   var vis = container.append('svg').attr('width', width).attr('height', height)
   
     .append('g').attr('class', 'vis').attr('width', width).attr('height', height);
   
   ...
   
   };
   
   
   
   

4. Now copy the rest of your JS code in the render function to your Web IDE project's render function (below the above code snippet) without any code change. If you plan to use some of the advanced features brought by Web IDE, you can of course add the corresponding JS code, but in order to make your extension just run as before, no code change is required.
5. Copy CSS style sheet to style\default.css.
6. Copy any external JS files into the project, if they were in use in your existing visualization extension.

As you can see, there is no code change involved in the migration, so it should just take you a few minutes to transform the existing visualization extension project to Web IDE.

For details on how to create a visualization extension in SAP Web IDE from end to end, refer to my recent webinar recording: https://www.youtube.com/watch?v=ZbWUVhoCLto

Have fun converting your viz projects to Web IDE and start to enjoy the modern IDE for Lumira visualization extension development.

Till next time:)....