Using External Resources when building SAP Lumira Viz Extensions in SAP Web IDE
Related Links: Overview: SAP Lumira Extensions | Learn how | OS Viz Extensions
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!
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.
Thanks for the blogs and information about how to implement extensions with the Web IDE, there is one thing that stops me from using it.
That reason is the fact the Web IDE defaults to d3.js versioin 2.10 but Lumira itself defaults to 3.4.12 😕 .
Do you know why?
Thanks for checking out my blog. The question that you raise between the d3 versions used in Web IDE and Lumira, is what we are currently trying to solve. I apologize I do not know why but our development team is working on it and I'd be glad to let you know the outcome as soon as I can.
Cheers to you too!
Thanks for the prompt reply!
Cheers all round again 🙂
I'm sure you are aware of this now but I just wanted to put it out there anyway. The issue that you were facing about the D3 version is no longer prevalent. Web IDE supports D3v3 as does Lumira.
Just wanted to let everyone know, in case they may have missed the update.
Hi Robert, thanks for this helpful post! Exactly what I was looking for! Much appreciated, Thilo
Any examples of how to add multiple libraries or leaflet in to the SAP Web IDE? We are trying to call multiple js and css files but we can get the map in, but not the css or we can get the css in but not the leaflet map. All the examples I can find are from versions prior to 2.0.
I found your post when searching for "external resources". But I am searching for a way to call a real external .js file from a different server.
We want to integrate Enable Now Web Assistent and I am evaluating if we can call an external js from within the Lumira application itself - via an extension and not via the existing proxy proposal. any idea?