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.
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!
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.