Developing an HTML5 Extension for SAP Visual Intelligence (Lumira) Author: Kirubhananth Chellam

Transcription

1 Developing an HTML5 Extension for SAP Visual Intelligence (Lumira) Author: Kirubhananth Chellam June 6th, 2013

2 TABLE OF CONTENTS Contents INTRODUCTION... 2 DISCLAIMER... 2 AUTHOR BIO... 2 A. Creating the folder structure and files... 3 B. Adding charting functionality... 5 C. Installing the Extension

3 INTRODUCTION SAP Visual Intelligence (Lumira) version comes with the ability to support custom charts, called Extensions. While the official SDK for building extensions is not out yet, we set out to build one on our own manually. DISCLAIMER The steps outlined below are only for learning purposes. Try this out in your own environment at your own risk. Information is provided as-is, without warranty of any kind. Visual BI will not be liable for any damages or consequences thereof. AUTHOR BIO Kirubhananth Chellam works as a Team Lead at Visual BI Solutions. He experience in technology HTML5, UI scripting, Silverlight, ASP.NET, WPF, WCF, SharePoint, Azure and metro apps development. 2

4 A. Creating the folder structure and files Create a folder in a local folder on your desktop with the name viz.ext.<extension Name>. For our track-enabled stacked chart, let us name it viz.ext.vbitrackenabled Within that folder create two folders example and libs. The libs folder is used to place the JavaScript file that supports the extensions. The example folder is optional. You may place an HTML file to show how this extension works. We then need to add a Manifest file and a XML file within the folder viz.ext.vbitrackenabled. The Manifest file needs to be in the name of MANIFEST and the XML file needs to be in the name of feedsdefinitions.xml The manifest file must specify the path and name of the extension s JavaScript file and any additional details such as author name, , version etc. The feedsdefinition.xml file is used to specify the input feeds for the chart, and additional chart characteristics. To understand the structure described in the steps above, look up the following folder that SAP provides for its prepackaged samplesbar extension. <Drive>:\Program Files\SAP Visual Intelligence\Desktop\samples\chartExtensions\viz.ext.samplesbar 3

5 The ID for the Extension, these needs to match the name of the parent folder and is utilized in the JavaScript file while developing extension The Path and name of the JavaScript file of our Extension Figure 1: The MANIFEST file for the track-enabled stack chart 4

6 The feedsdefinitions.xml file for the extension is shown below. Note that each FeedDef tag represents one parameter. For our extension, we need two dimensions and one measure all of which are defined in this file. Figure 2 : feedsdefinitions.xml file for track-enabled stack During runtime, the above code would generate the following input fields next to the chart. 5

7 B. Adding charting functionality Now that we have defined the chart characteristics, we need to define the behavior of the chart using JavaScript. The parent method used to render our extension needs to be mentioned in the json Module Definition at the fn property placed at the bottom of the script file. Without this reference the method to render the visualization would not be loaded. The data, width, height, and color Palette need to be initialized as well. SAP Visual Intelligence uses SVG to render visualizations. However, the SVG is not directly accessed and used within the JavaScript. This is where d3js comes to aid. 6

8 The parameters specified in the feedsdefinitions.xml need to be mapped in this JavaScript file. To do this, variables are first defined and then registered in the module definition as shown in the screenshot During runtime, values that are passed to the feeds would be available in the variables. This is then parsed using built-in methods shown below. 7

9 Once this happens, data is accessible in the form of arrays. This can be used to implement our chart. After completing the above steps we did the implementation for the track enabled stack chart. 8

10 C. Installing the Extension For installation, the entire folder viz.ext.vbitrackenabled needs to be copied to the location <Drive>:\Program Files\SAP Visual Intelligence\Desktop\chartExtensions. Restart Visual Intelligence. The Extension would be added automatically under the E menu. Note that you must have enabled HTML chart usage in Visual Intelligence under Go to File -> Preferences. 9

11 Once you map the fields during runtime, the chart would appear as below. The creation of this custom add-on is a highly manual process, and we expect the SDK to automate some/most of the above steps. In addition, with SAP Lumira becoming available on the cloud, we anticipate future versions to support sharing of visualizations using custom extensions with other users. For now, we hope the above steps give you a good peek into how extensions work in the current version For any queries, you can reach out to our team at solutions@visualbis.com 10