This is the second part of a tutorial series. To start from zero click here

                                            

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 … what will we do to make it rock?

Hmm… we will just create a SAP Lumira Extension that will shows up a Hello World message.

If you are a normal person and you are wondering why we will do that … well … Wikipedia is your friend: https://en.wikipedia.org/wiki/%22Hello,_World!%22_program … read it; meanwhile I’ll go and pick up a coffee.

So here we are: in the SAP Web IDE

01 2015-10-14 22-40-58.png

I don’t want to bother you immediately with the explanation of all the menu and the icons.

The important thing to know is that right now, you still can’t start to code a SAP  Lumira Extension: we have to configure the environment.

To do so, Click on Tool/Preferences:

02 2015-10-14 22-53-13.png

And now let’s activate the VizPacker plugin. Don’t ask me why the SAP Lumira Extensions editor has such a name. I have no idea.

03 2015-10-14 22-54-54.png

Don’t forget to click on SAVE.

The preferences window will not disappear. But on the upper right corner you should now see suche a message:

04 2015-10-14 23-00-02.png

In order to come back to the starting screen we have to click this symbol </> on the left hand side of the screen:

05 2015-10-14 23-01-45.png

/wp-content/uploads/2015/10/arrow_31_512_810456.png 01 2015-10-14 22-40-58.png

And now click the reload button on your browser, or logout and login, in order to have the plugin installed.


Now, we can create our first extension project.

In order to create a new project, put your mouse over the “Local” directory in the upper left part of the screen.

Right click on it and from the drop down menu choose New/Project from Template

06 2015-10-14 23-10-47.png

You have now to choose the right template for the SAP Lumira Extension project

If you have correctly saved the preferences and reloaded the web page, a Visualization Extension option should be present in the list. 07 2015-10-14 23-15-02.png

Select on the Visualization Extension

08 2015-10-14 23-19-31.png

and click on Next


09 2015-10-14 23-21-02.png

Now, write down the name of the Project: HelloWorld ; and click on Next.


We now have to fill in a form:

Field Value
Extension Name* HelloWorld
Extension ID yourcompanyname.viz.ext.helloworld
Version 0.0.1
Company Name Your Company Name
URL empty
Description This extension allows to show up a Hello World message


Feel free to change the values but beware of the syntax of the Extension ID field:

10 2015-10-14 23-25-30.png

This field is quite important: it contains the technical name of your extension. And this name has to be unique. If you create two extensions with the same Extension ID when you will load them in SAP Lumira, the tool will not be able to distinguish one from the other and the second one you’ll try to install would overwrite the first one already installed.

Copy&Paste the Extension ID value in a text editor (like notepad); we will need it later.


11 2015-10-14 23-27-18.png

The version is another quite useful information (more details later).


Click now on Next.

We will now choose the global layout of our extension.

Please select the options in the following way:


Field Value
PlotArea Using Div
Title Unchecked
Legend Unchecked


11 2015-10-14 23-36-30.png


In this way, our chart will have no title field and no legend field.

“And what is this SVG/DIV?”



SVG stands for Scalable Vector Graphics and it’s a powerful extension to standard HTML (HTML5 SVG), included in the last HTML release: HTML5.  SVG allows to create shapes in a web page. BUT only the most modern and powerful browsers support HTML5 and then SVG.

So for this example we are choosing the simpler output: DIV.


“BUT why the hell are we talking about HTML and web pages? I just want to create a SAP Lumira Extension”

The point is that … a SAP LUMIRA report is in fact a … a web page … shhhhhh …shhh … stop screaming!

Ok Let’s be serious: the Web Intelligence experience has taught  SAP that it is quite difficult to guaranty a unique and uniform visual rendering across multiple heterogeneous devices (PC screen, table, smartphones…). All the devices that I just mentioned, on the other side, are able to display web pages in a correct and uniform way . So why should have SAP reinvented the wheel given that the  wheel is working pretty good?

So HTML, the language to code webpages, is the smartest choice for SAP Lumira reports in order to guaranty a uniform visual rendering across heterogeneous devices.


If you are shocked … don’t click on Next otherwise …

No … in fact nothing pretty strange is going on … We now have to feed the Chart extension with a typical set of data.

12 2015-10-14 23-56-49.png

“Why?”

Hmmm … Well, you want to plot a graph, don’t you?!  Indeed, SAP Lumira needs some custom data names(and types), in order, for example to specify what to plot and on which axis.

In this example, we will not use any data : click Next without applying any modification.

13 2015-10-14 23-57-50.png

    Data are not important right now, so we don’t care about difference between dimensions and measures.

    Click Next without applying any modification.


14 2015-10-14 23-58-28.png


It’s almost done: Click on Finish now.

… Tadah …

15 2015-10-14 23-58-28.png


This is what your working environment should look like now.


If not:

If you just see the Local folder, like in the picture below… no problem; just follow those steps.

If your Local folder is empty … something went wrong: restart by clicking here.

/wp-content/uploads/2015/10/16_813564.png
Click on Local and keep on opening the directories till you arrive to the js directory;
/wp-content/uploads/2015/10/17_813565.png

Now  DOUBLE click on the render.js file as this is the file we want to modify.

You should now have an open tab showing the content of the render.js file

on the center of the screen:

/wp-content/uploads/2015/10/18_813566.png

/wp-content/uploads/2015/10/18_1_813567.png

Last but not least, in order to have the proper environment;

on the right hand side of the screen,

click on the top icon:

in ths way, at the right of the editor tab, a preview frame will appear

/wp-content/uploads/2015/10/19_813568.png



Ok, so … now your browser windows should look like that:

15 2015-10-14 23-58-28.png


Don’t get too excited. Not yet.

Before starting coding we will get a look at a HTML.

HTML is a sort of programming language aimed at building web pages.

And btw, HTML stands for HyperText Markup Language.

The code in an HTML page is written via TAGS:

  • there is an opening tag which contains a special word enclosed in angle brackets : <special word >
  • and there is a closing tag which contains the same special word enclosed in angle brackets+ slash </special word >

An empty HTML web page will contains at minima the html tag:


<html>
</html>

The code in an html page is structured in two main part: the head and the body:


<html>
     <head>
     </head>
     <body>
     </body>
</html>












Sorry but we will ignore the head: when we will write chart extensions we will have no possibility to manually edit this part of the web pages anyway.

Please, now open a simple text editor (notepad) and copy and paste the following lines:

In this case, in the body we added some text, the text that we want to show up in the web page: Hello world!


<html>
     <head>
     </head>
     <body>
     Hello world!
     </body>
</html>










Save the file in the editor as “HelloWorld.html”.

Warning: If your using notepad, under the name of the file, specify an “All Files” Type: otherwise your file would be saved as HelloWorld.html.txt.

(if you have any problems you should get some help by clicking here)

Now come back to your browser, click on File/Open and navigate to the directory where you saved the HelloWorld.html file.

The result should be the following:

/wp-content/uploads/2015/10/20_814058.png

Your first web page!!!!!

Ok … That’s not so impressive I know :/ What about changing the size, or the font, or the color?

There are several HTML specific tags that we could apply, like:

  • b for bold ;
  • or i for italic.

But this is the old school . The best way to do it, is to define a section and apply the styles we want to the whole section.

In order to define a section there are three main tags: p, div and span. For an explanation of the differences between the 3 please click here.

In the following example, we will create a paragraph using the p tag and apply a style to the paragraph.

To apply the style, we add in the opening tag a style attribute to it.

In this example, we modify the size, the font family and its weight (please look here for additional informations).

I will not give any further explanation as the notion of style is tightly associated to another more complex notion in the HTML ecosystem, CSS, which stands for cascading style sheets; we will look deeper on both subjects (styles and CSS) laters.


<html>
     <head>
     </head>
     <body>
          <p style="font-size:14px; font-family:georgia; font-weight:bold;">
               Hello world!
          </p>
     </body>
</html>









Copy&Paste the code above in your editor. Save the file and open it in your browser. You should end up with something similar:

/wp-content/uploads/2015/10/21_814122.png

Thanks to the style attribute, we have modified our brower’s default way to show up the text in the paragraph.

We are almost there to move our code to our extension.

At the beginning of these tutorial, at the top of the page, we created our chart extension project from an existing template which we customized (i.e. by removing the title, the legend …). Do you recall?

In other words, a big part of the chart extension web page is already written (in the template) but this is invisible to you.

This mean for example, that in our SAP WebIde coding environment we will not need to write down the html tags, nor the head tag …

because our code will be added, incapsulated into the existing code coming from the template.

Let’s try to recreate the same meccanism with our HelloWorld.html file.

To do so, we need to introduce a new technology: javascript.

To make it simple, javascript can be seen as an HTML tag which will contain a program

that can modify the webpage when you open it or reload it in the browser.

We will now write an empty webpage, which contains an empty paragraph and we will add some javascript code to append some text to the paragraph.

“Sorry man … but why are we doing that?”

The empty page has to be considered as our chart extension template and the javascript code has to be considered as the code we will add in the SAP WebIde environment.

Here’s the code for your empty page:


<html>
     <head>
     </head>
     <body>
          <p style="font-size:14px; font-family:georgia; font-weight:bold;">
  
          </p>
     </body>
</html>









Copy&Paste; save the file. Open it in a browser: there’s nothing, as expected!

Now let’s add the javascript tag (line 01).

We look for the paragraph inside the webpage (the instruction getElementsByTagName  will provide a list of all the paragraphs, but in these example we just the need the first : [0] is the part of the code that return the first element of the list. (line 02)

We create some “space” in the webpage to hold the text ; the space is called a node and now we want to create a node which will hold some text (line 03)

and then we add the text to the paragraph  (line 04).


<javascript>
var paragraph =document.getElementsByTagName("p")[0];
var newText = document.createTextNode("Hello World!!!");
paragraph.appendChild(newText);
</javascript>









Let put it all toghether. and we get the following:


<html>
     <head>
  </head>
     <body>
          <p style="font-size:14px; font-family:georgia; font-weight:bold;">
   
          </p>
          <script  type = 'text/javascript'>
               var paragraph =document.getElementsByTagName("p")[0];
               var newText = document.createTextNode("Hello World!!!");
               paragraph.appendChild(newText);
          </script>
     </body>
</html>









Copy&Paste it into your editor. Save it. Open it in your browser and you should get exactly the same web page as the previous example.

“And what if there’s no paragraph?”

In this case we need to create the space for the paragraph; the space for the text; append the text to the paragraph  and append it to the body:


<html>
     <head>
  </head>
     <body>
          <script   type = 'text/javascript'>
               var body=document.getElementsByTagName("body")[0];
               var paragraph = document.createElement('p');
               var newText = document.createTextNode("Hello World!!!");
               paragraph.appendChild(newText);
               body.appendChild(paragraph);
          </script>
     </body>
</html>









In this case, our paragraph will have no particular style, of course.

We are now ready to move to the SAP WebIde editor and  we will write some code that will do the same thing coded right now in javascript:

We will add a paragraph to the existing document; and we will add some text to it.

If your SAP WebIde environment is closed, open it again. And open the HelloWorld subdirectory.

Navigate to the render file which should look like that:

/wp-content/uploads/2015/10/22_814149.png

At line 13, we are looking at a fragment of code whose name is render.

This fragment will do what is included in the curly brackets (line 13 to 16).

Line 14 is a comment (it lasts one line and starts with a double slash //  ): a comment is some text which does nothing but provides information to coder, so to us.

Given that there is nothing more than the comment within the curly brackets, the code does nothing right now.

In line 13, a word, container,  is underlined : container is the equivalent of our document in the javascript example.

So, first we will add a paragraph to it and then we will add some text to the paragraph.

The order of the instructions is a little bit different but the goal is the same:

Add the following code within the curly brackets:


var newparagraph= container.append("p");
newparagraph.text("HelloWorld!!");






Save the file. On the upper right corner click on Refresh and

You should end up with that:

/wp-content/uploads/2015/10/23_814200.png

On the right hand side of the browser, you have a preview of your extension.

Congratulation: you just coded your first SAP Lumira Extension!

In the next part of this second chapter tutorial, you will see how this simple example can become quite handy and usefull in SAP Lumira. We will then export the code and run it in SAP Lumira.

See You soon.



 


To report this post you need to login first.

2 Comments

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

  1. Vincent Dechandon

    Great initiative, just a point : you should use the Syntax Highlighting feature from the blog creator in order to highlight the snippets of code in the post.

    Br,

    Vincent

    (0) 
    1. Bruno Cavestro Post author

      Unfortunately, I had some issues with the Editor: the code is formatted for syntaxhightlighning but it doesn’t show up. Any feedback/help is welcome.

      (0) 

Leave a Reply