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!

To report this post you need to login first.

23 Comments

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

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

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

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

    (0) 
  3. 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.

    (0) 
  4. 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?

    (0) 
  5. 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?

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

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

        (0) 
  6. 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

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

      (0) 

Leave a Reply