Football Heatmaps Viz Extension: The Migration From Sap Lumira SDK To Sap Web IDE

Hello there! My name is Annie (Suantak Niangneihoi), recently welcomed as part of the SAP Analytics Product Management team. It is an honor to be writing my first blog as someone who empowers and supports the developer community.

I’ve been working on converting visualization extensions from the previous SAP Lumira SDK versions to the newer and recommended SAP Web IDE versions. This blog post is supplementary to the original Football Heatmap viz extension blog written by Mustafa Aydogdu in conjunction to the wonderful extension he developed. In this blog, I will mention step-by-step how I migrated the existing extension from SAP Lumira SDK to SAP Web IDE – which is technically rebuilding the extension but doesn’t really involve too much effort since it is a simple process. You can find out more about migrating extensions in general in Dong Pan’s blog post.

The reason why we’re so interested in migrating our old extensions to SAP Web IDE is mainly for compatibility with the latest version of SAP Lumira. The more we enhance a product, the more we also need to enhance the add-ons associated with it – extensions. This is why our experts strongly recommend using SAP Web IDE to create new extensions.

In my blog, I aim to provide a concise explanation of the migration process, making it easy to follow even for someone new to SAP Web IDE, using the football heatmap use case as an example.

Let us proceed to the fun part now!

STEP 1: Create the project

1. Create a new project in SAP Web IDE (Fileà New à Project from template).
2. Select the Visualization Extension template.
3. Type in the project name (FootballHeatmap)
4. Create the profile for the extension:
   1. Give the extension a name (Football Heatmap)
   2. Extension ID: sap.viz.ext.footballheatmap
   3. Company name: Write the name of the developer, not SAP
   4. Add a URL and description if desired.
5. The original extension was developed using DIV, not SVG, so select Using DIV. You may remove the title and legend since they are not explicitly required.
6. Load the sample dataset (recordsView.csv), choose the X and Y coordinates as dimensions and Value as the measure.
7. Add the above attributes to the measure and dimension sets as required.
8. Click on Finish. Your project will be created.

STEP 2: Load the necessary external files

Here, we use only one external JS file, i.e. heatmap2.js. Import it to SAP Web IDE into the footballheatmap subfolder (FootballHeatmap/bundles/sap/viz/ext/footballheatmap). This file should be in parallel with the footballheatmap-bundle.js file.

(Right click on the footballheatmap folder--> Import --> From File System)

The file structure should look like this:

STEP 3: Visualize while you work

Click on the VizPacker Quick Preview icon on the top of the right hand menu panel in SAP Web IDE.

This will allow you to preview your extension at every step of development, depending on the changes you make as you progress.

STEP 4: Edit the render script (render.js)

Load the resource at the top level define() function (the first line of code in the render.js file)

Note: It is very important that you include the heatmap2.js file within the [ ] and just writing it as ‘heatmap2’ instead of ‘heatmap2.js’

    Next, copy the D3 rendering code from the old render.js into the render function

var render = function(data, container) {

                  //paste code here

};

return render;

});

The code starts from the container.selectAll(‘svg’).remove(); line

Now before we proceed, we add a few more lines of code to render the canvas appropriately as Dong Pan mentions in his blog post.

Add the following lines above the original code as highlighted in the screenshot below:

Scroll down a bit on the code. You will find the require function that calls the intializeHeatmap() function.

In the old render.js file, replace the highlighted section below:

with this highlighted section:

What we are doing here is simply replacing the way the external resource, i.e. heatmap2.js, is called. We replace the directory structure (we don’t need the path since we have already imported the resource in the appropriate directory earlier), with just the name of the resource file (without the .js file extension).

Note: File path structure is extremely important. A project may not render due to a simple error in file path even though code may be a 100% correct. This is a speed bump for many developers

    Now save the render.js file

STEP 5: Edit the CSS file (default.css)

Just copy all of the CSS code from the old version of the extension to the default.css file in the SAP Web IDE project.

Save the file

STEP 6: See it render in SAP Web IDE

By now you should be able to see a preview of the extension rendering in the VizPacker Quick Preview section of SAP Web IDE

You can also Run it and see what it will look like for different screen sizes.

STEP 7: Pack the extension

The extension looks good! Now let’s pack it so that we can use it in SAP Lumira!

Click on Pack. This will download the extension as an installable .zip file ready for use.

STEP 8: Install and use in SAP Lumira

1. Install the extension as you would normally in SAP Lumira using the Extension Manager.
2. Import the recordsView.csv dataset.
3. Arrange the measures and dimensions as required.
4. Check out the extension!

Now, doesn’t that look lovely?

Thank you all for taking the time to read my blog post. As I continue working on migration of visualization extensions from SAP Lumira SDK to SAP Web IDE, there will be many more blog posts to come, on how to migrate each of the open-source extensions our developers at SAP have come up with.

Please feel free to add your comments, suggestions or ideas.