Skip to Content
Author's profile photo Dong Pan

SAP Lumira Visualization Extension – Hello World from SAP Web IDE

I am excited to spread the message that you can now create SAP Lumira visualization extensions with SAP Web IDE! Recently we released our long-awaited VizPacker plugin for SAP Web IDE, so Lumira chart developers can use this powerful, cloud-based IDE to create cool chart extensions for Lumira. In the next few blogs, I plan to show you how you can easily create Lumira visualization extensions with this new tool. I will start with the simplest Hello World example in this blog to go through the end-to-end process.

Step 1: Sign up for an SAP HANA Cloud Platform Account to Access SAP Web IDE

If you haven’t done so, follow this great blog postSAP Web IDE – Overview by Jennifer Cha to gain free access to SAP Web IDE. If you already have access to HANA Cloud Platform (HCP), go directly to the HCP landing page: https://account.hanatrial.ondemand.com/ and click Log On. Note that Chrome browser is recommended for the following steps.

HCP_Landing_Page.png

After logging on to HCP, you should see the following home page. Click on Subscriptions in the Content menu on the left hand side:

HCP_Home_Page.png

On the Details pane on the right, click on webide in the list of your subscribed HTML5 Applications:

HCP_Subscriptions.png

This will take you to the page with the link to SAP Web IDE:

HCP_WebIDE_Link.png

Click on the link, and it opens up a new browser window for SAP Web IDE. This is our new exciting development environment for creating Lumira visualization extensions:

Web_IDES_Home.png


Step 2: Add VizPacker Plugin to SAP Web IDE

The Lumira VizPacker comes to SAP Web IDE as a plug-in, so in order to use it, we have to add it first. Click on Tools -> External Plugins in the main menu, and you will see a list of available external plugins including VizPacker:

Add_VizPacker_Plugin.png

Select the vizpacker plugin, and click OK. Refresh the browser page to apply the changes, and you should now see VizPacker’s quick preview button at the top of the right toolbar.

VizPacker_PreviewButton.png

Now you have finished setting up the development environment for VizPacker.

Step 3: Create a Visualization Extension Project

Now we are ready to create our Lumira visualization extension project. Click on File -> New -> Project from Template on the main menu:

Create_New_Project.png

You are now prompted with the new project wizard. Choose Visualization Extension from the list of project template, and click Next.

Choose_Project_Template.png

The wizard goes to the next step to set the project name. In our case, let’s set it to HelloWorld and click Next.

Set_Project_Name.png

Now we are at the step to configure the visualization extension’s profile, including its name, ID, version and optional informaiton such as company, description, etc. If you are a seasoned Lumira visualization extension developer using VizPacker in the past, at this stage the configuration should ring a bell.

Visualization_Extension_Profile.png

Click Next, and you will be brought to the Layout Configuration step. As we are creating a Hello World extension, we will be using the DIV container rather than the default SVG container. Deselect Title and Legend, as we don’t need them in this simple extension.

Layout_Configuration.png

Click Next, and we are now taken to the Sample Data page. As our Hello World extension will not be based on any data, we are fine with the default sample data.

Upload_Sample_Data.png

Click Next, and we can now setup the measure sets and dimension sets based on the sample data. As we are simply going to output a “Hello World” text in this extenion, we will simply click Next and skip this step. I will go into more details on this in my future blogs.

Configure_Data_Structure.png

Click Next, and you will hit the confirmation page.

Confirmation_page.png

Click Finish. Now it shows the project folder structure, and we can now see the familiar render function open by default:

Project_File_Structure.png

Step 4: Implement the HelloWorld Extension

Now all we need to do is to add the JavaScript code to output a “Hello World” message. We will do so by appending a <p> element to the container object, which was passed into the render function as an input variable.

Remove the //TODO line in the render function, and add the following lines:


container.selectAll("p").remove(); //First remove any existing <p> element
container.append("p").text("Hello World!"); //Append a new <p> element with the text "Hello World"

By the way, you can use Edit -> Beautify -> Beautify JavaScript ( Ctrl + Alt + B ) to format your JavaScript code. This could come in handy when you would like to indent your code properly, especially helpful for lengthy code.


Save the file by pressing the Save button in the toolbar, and click Refresh in the preview panel. You should now see the “Hello World” message in the preview pane.

Quick_Preview.png

Alternatively, you can preview your extension by selecting preview.html in the project folder structure on the left, and click Run in the toolbar. In this way, the preview will show up in a separate window.

Preview.png

Now we have successfully created our first Lumira visualization extension with SAP Web IDE.



Step 5: Pack the Visualization Extension and Deploy to Lumira

The next step is to package the extension and deploy to Lumira Desktop or Server. To do that, click on the Pack button on the toolbar:

Pack.png

You will be prompted by the success message, and the package can be found in the Downloads section of Chrome browser.

Download.png

If you are going to upload the package to Lumira Server, the package can be used as is. If you would like to try out the package first in Lumira Desktop, follow the instructions below.


Extract the package, and copy the bundles folder to <YourLumiraInstallationDirectory>\Desktop\extensions. Restart Lumria Desktop for the changes to take effect.

Create a Lumira document using any dataset (as our Hello World extension does not really depend on any specific data), and choose the newly-deployed Hello World extension. Add a measure to the measure set, and you should see a “Hello World” message in the Visualize room:.

Use_in_Lumira_Desktop.png

Now you have created, deployed and consumed your first visualization extension in Lumira Desktop, powered by SAP Web IDE:). Hooray!!

In the next few blogs, I will go through some more complex examples to create Lumira visualization extensions with SAP Web IDE. Stay tuned!

Assigned Tags

      23 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Amit Gupta
      Amit Gupta

      This is an excellent news, thanks for sharing!

      Author's profile photo Former Member
      Former Member

      Very helpful article, thanks for sharing!

      Author's profile photo Hari Srinivasa Reddy
      Hari Srinivasa Reddy

      This is good one. Thanks for sharing.

      Author's profile photo Hari Srinivasa Reddy
      Hari Srinivasa Reddy

      Hi Dong Pan,

      I have followed these steps. it works. learn something today.

      With regards,

      Hari

      Author's profile photo Rishabh S
      Rishabh S

      Very helpful, thanks a lot for sharing.

      awaiting more examples 🙂

      Regards,

      Rishabh

      Author's profile photo Laurens Geraedts
      Laurens Geraedts

      Hi Dong,

      Nice, thanks for sharing. As an update for Step 2, adding the VizPacker Plugin, in my version I had to select Tools/Preferences in order to install it.

      Best regards,

      Laurens.

      Author's profile photo Former Member
      Former Member

      Nice one,,, Easy to understand 🙂   . I got exactly what i needed in this post

      Author's profile photo Akshaya p
      Akshaya p

      Great Blog. Is it possible to add Html code in the extension and install it in lumira?

      Or Can we modify the properties of the existing story through html?

      Author's profile photo Akshaya p
      Akshaya p

      Great Blog. Is it possible to add Html code in the extension and install it in lumira?

      Or Can we modify the properties of the existing story through html?

      Author's profile photo Sourav Banerjee
      Sourav Banerjee

      Great..!! Started learning something new..!!! Even Java script as well being a SAP BW developer. 🙂

      Author's profile photo Pascal GAULIN
      Pascal GAULIN

      Great blog post. Thanks 🙂

      Note that, in the latest release, the VizPacker plugin is to be found in the Tools > Preferences > Optional Plugins menu.

      Regards,

          Pascal.

      Author's profile photo Vinay Hegde
      Vinay Hegde

      Nice article !!!

      Author's profile photo Former Member
      Former Member

      Very helpful. I followed the steps and created my first extension.

      Thanks for sharing.

      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      Hi Dong,

      just a question. Afetr selecting the data source on step 5, I am not able to select any dimension/measure on step 6. The button + does not do anything.

      Sap WEB IDE 1.2. 14

      Vizpacker plugin 1.1.4

      Chrome Versión 43.0.2357.130 m

      have you noticed this strange behaviour?

      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      Hi, I reply my self. It seems that it is required to mark columns to be used as dimension and measure (default selection seems not to work)

      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      Hi,

      Just another issue 🙂 . I have created an basic CVOM extension using VizPacker WebIde plugin. It does work fine when used on Lumira but when installed on Design Studio it seems to fail (dimensions/measures seems not being recognized).

      Using old Vizpacker CVOM generated extensions works fine on both products (Lumira/DS). Should be the same with new plugin. It isn't?

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi Alfons,

      yes, this is the current situation - the new plugins created in Web IDE are not yet importable in Design Studio (as of 1.5). This function must be coded in Design Studio.

      Karol

      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      Hi Karol,

      Fine, I didn't find any reference on the documentation that clearly states this limitation. I imagine that we will have to continue to use old Vizpacker.....

      Thanks,

      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas
      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi Dong,

      I try to setup the Web IDE - I cannot find the option of "Step 2: Add VizPacker Plugin to SAP Web IDE" -> in my Menu Tools I cannot see "External Plugins" menu.

      What can be wrong?

      lumide.PNG

      Karol

      Author's profile photo Former Member
      Former Member

      i have the same problem!

      please some1 help me out!!

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi,

      I have found it in the meantime.

      in the new Web Ide, you need to

      Tools -> Preferences -> Optional Plugins and activate, restart.

      op1.PNG

      Karol

      Author's profile photo Suantak Niangneihoi
      Suantak Niangneihoi

      Great blog post! I've updated the extension on GitHub as well with the new Web IDE version.