Skip to Content

Lumira Extensions coding for Dummies A Tutorial Series : From 0 to DataViz ❶.Introduction

Hello Everybody,

My name is Bruno Cavestro and I am a tech geek, passionate inter alia of SAP BusinessObjects customization.       
As I discovered SAP Lumira, I immediately fell il love with its extension mechanism.But, as I went trough some blogs and tutorials concerning SAP Lumira extensions coding,I noticed a sort of weird common mindset:       
Those tutorials (the ones I bumped into) are a list of orders you have to obey via copy&paste to make the things work … Yes but ..

  • “Why?” …
  • “Why should I copy this code there?”
  • “What does this code means?”

Indeed, most of the tutorial are oriented to Javascript programmers with expertise on HTML5 and D3.js who need to take the max out of SAP Lumira.

So if you think that D3 is a typo, and XML is the oversize version of HTML … well,

You may be interested on reading the tutorials I plan to publish.


Globally, the goal of those tutorial is to be able to give You the possibility to react easily when Your client or Your boss asks You for … a larger column in the table, a different font on the title or other things that were easy to put in place on Web Intelligence and are now not included in out-of-the-box SAP Lumira …

So let’s start…

I will assume you are using SAP Lumira 1.28 and we will use a standard browser (Chrome is strongly recommended) to create our extension.

We will first navigate to a special SAP web site that will allow us to use the browser as an extension code editor.

This SAP web site is called SAP Web IDE  and there are several resources available as the Excellent Cha’s “SAP Web Enablement guide” where you can find the login and activation procedure.

Feel free to follow to the provided link but for sake of simplicity here’s the steps :

    1. In the browser navigation bar enter the following URL:
      (or click on Cloud Cockpit);               
      screenshot-account hanatrial ondemand com 2015-10-05 21-33-53SMALL.png
    2. Now, Click on Register or use your SAP credentials to Log On
      1. If you need to register (please, USE THE SCROLLBAR to scroll through the instructions)                                                        
        Fill in the Registration Form and accept the Disclaimer
        screenshot-account hanatrial ondemand com 2015-10-05 21-48-03REGISTER.png
        You will receive a mail from SAP: CLICK on the activation button
        screenshot-it-mg42 mail yahoo com 2015-10-05 21-59-49_ACTIVATION_MAIL.png

        A message confirmation windows appears

        (this may occur in your DEFAULT browser)

        screenshot-account hanatrial ondemand com 2015-10-05 22-04-24-CONTINUE_ACTIVATION.png
        If you are not using Chrome while clicking on the Continue button (see above), close the present browser, open Chrome and follow the log on procedure.

        Btw Congratulation, you’ve just achieved the task!

        You have now an account for the SAP HANA Cloud platform.

        We will now use this account to access  the SAP Web IDE.

      2. If you log on (yes, this is the log on procedure) , use your SAP credentials in this form
        screenshot-account hanatrial ondemand com 2015-10-05 21-42-34LOGON.png

    3. We are now accessing the SAP HANA Cloud platform cockpit

      Here’s the welcome message.
      Click on Continue … and … Here we go!
      Well … no… in fact not yet: We are in a  cockpit and we have to use it to active
      our programming environment.

      screenshot-account hanatrial ondemand com 2015-10-05 22-06-29.SAP HANA COCKPIT BIS.png

      So … Ok, let’s ignore most of the cockpit : just click on Subscriptions in the left menu.
      screenshot-account hanatrial ondemand com 2015-10-05 22-06-29.SAP HANA COCKPIT01.png
      … and now click the webide link in the center of the page. We are almost there.

      screenshot-account hanatrial ondemand com 2015-10-05 22-06-29.SAP HANA COCKPIT02.png

      Here we are… for REAL.
      The link at the top of the page is your personal special customized link to your
      one and lonely sap web ide.

      Are you ready? Are you sure? So … if you are really ready … click …

      … Tadah …

      screenshot-webide-p1941683158trial dispatcher hanatrial ondemand com 2015-10-05 22-12-07 WEB IDE00.png


              Welcome to the SAP WEBIDE 

“So? now what?!” … be patient and enjoy the flower power … the background

In the next chapter of the tutorial, we will start using the editor to generate our first extension.


Chapter 2: Let’s Rock

Lumira Extensions coding for Dummies
A Tutorial Series : From 0 to DataViz
❷.Let’s ROCK part I

Lumira Extensions coding for Dummies
A Tutorial Series : From 0 to DataViz
❷.Let’s ROCK part II

Lumira Extensions coding for Dummies        

A Tutorial Series : From 0 to DataViz       

❷.Let’s ROCK – part III

… More to come

You must be Logged on to comment or reply to a post.
  • Next chapters will talk about (Chap 3 should be out at the end of February- sorry guys for the delay):

    + Logos : add a standard logo via a chart extension to minimize new histories dev time)

    + Tables : we will start using D3 libraries to implement a highly customisable table chart extension .. as usual we will start with an HTML example ... and btw we will start using data 😉 ... this chapter will probably be divided in subparts.

    I haven't decided yet when I will talk about CSS files (chap 3 or chap 4) ...


    Hi Bruno,

    I'm developing a visualization SDK Extension for sap lumira designer. Your tutorial is very useful!!

    Now I have to pass a argument like CHART_1.setParameter1(); ... It's possible to to that?

    Thank you so much