Using External Resources when building SAP Lumira Viz Extensions in SAP Web IDE

Many of the SAP Lumira extensions for data visualization that have been developed and open-sourced, were developed in the SAP Lumira SDK, using the Lumira VizPacker Utility. However, ever since the Vizpacker plugin for SAP Web IDE has reached functional parity, SAP has been recommending using the SAP Web IDE environment for development of visualization extensions for SAP Lumira. Raz Korn explains in his blog the perks of using SAP Web IDE over SAP Lumira VizPacker Utility, and why it is highly recommended for someone who wants to build cool, attractive data visualization extensions for SAP Lumira.

I have been hugely involved in the process of migrating our existing viz extensions that have been created in the SAP Lumira SDK, to SAP Web IDE. I have explained an example of how I migrated Mustafa Aydogdu’s Football Heatmap extension in my blog post as well.

Here, I would like to highlight some challenges I faced during the process of migration from Lumira SDK to Web IDE. The general steps to be followed in the migration process are pretty simple and straightforward as explained in Dong Pan’s blog post. However, there are some special cases where the extension requires external resources like an external JavaScript file, or an image file that may needed to be loaded to render certain parts of the chart. This is what I would like to focus on in this article. I believe and hope that this will help many developers out there who are trying to build their Lumira visualization extensions in Web IDE or even trying to migrate old extensions previously created with the old Lumira VizPacker Utility-based SDK.

In my blog post on migrating the Football Heatmap extension, I did mention that an external file by the name of heatmap2.js was required as part of the package. Similarly, as an example in this blog, I will use the example of a project called dummyproject with an external file called external.js

Let us now see in three simple steps how to import external or third party anonymous modules or resources to be used as part of the new extension to be build in Web IDE.

Step 1: Put the file parallel to the *-bundle.js file

For example, in the screenshot snippet above, we see that our project bundle JS file is called dummyproject-bundle.js. Generally, we have <projectname>-bundle.js, contained in the <projectname> folder. All the external resources should be imported in parallel to this project bundle file.
To do this, right click on the containing folder (dummyproject folder in this case) à Import à From File System. This way, all the desired resources are loaded in the same containing folder as the project bundle file, in parallel to it.

Step 2: Load the resource at the top-level define()

Now this step is very important because even though we have loaded the resources into the project file structure, we still need to call those resources via our code.
First and foremost, call the dependencies at the define() function at the top of your render.js file.

Notice how we call external instead of external.js

Step 3: Call the resource via a require function

In the main source code, we add a require function as shown below:

After following the steps mentioned above, we can now proceed to building our Lumira extension in Web IDE as usual!

Special thanks to: Raz Korn, George Wang & Andrew Zhu for their assistance and support in putting together all these useful tips.

Note: These instructions are ONLY to provide information about how to include external resources and dependencies into a Web IDE project, and NOT about how to create a Web IDE-based Lumira visualization extension in general.