Skip to Content

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

/wp-content/uploads/2015/07/1_750474.png

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.

/wp-content/uploads/2015/07/3_750475.png

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:


/wp-content/uploads/2015/07/3a_750542.png

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.

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. 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?

    Cheers

    Robert

    (0) 
    1. Annie Niangneihoi 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

      (0) 
    2. Annie Niangneihoi 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.

      Thanks,

      Annie

      (0) 

Leave a Reply