Skip to Content
Author's profile photo Annie Thornton

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.

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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Robert Russell
      Robert Russell

      Hi Suantak,

      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?



      Author's profile photo Annie Thornton
      Annie Thornton
      Blog Post Author

      Hi Robert,

      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!

      - Annie

      Author's profile photo Robert Russell
      Robert Russell

      Hi Annie,

      Thanks for the prompt reply!

      Cheers all round again 🙂


      Author's profile photo Annie Thornton
      Annie Thornton
      Blog Post Author

      Anytime! 🙂

      Author's profile photo Annie Thornton
      Annie Thornton
      Blog Post Author

      Hi Robert,

      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.



      Author's profile photo Thilo Knötzele
      Thilo Knötzele

      Hi Robert, thanks for this helpful post! Exactly what I was looking for! Much appreciated, Thilo

      Author's profile photo Shannon Philippus
      Shannon Philippus

      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.


      Author's profile photo Marcel Scherello
      Marcel Scherello

      Hello Annie,

      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?


      thank you,