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
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:
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.
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:
In order to come back to the starting screen we have to click this symbol </> on the left hand side of the screen:
|  |  |
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
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. 
Select on the Visualization Extension
and click on Next
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:
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.
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 |
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.
"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.
Data are not important right now, so we don't care about difference between dimensions and measures.
Click Next without applying any modification.
It's almost done: Click on Finish now.
... Tadah ...
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. |
|---|
 |
| Click on Local and keep on opening the directories till you arrive to the js directory; |
 |
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: |
 |
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 |
 |
Ok, so ... now your browser windows should look like that:
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:
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:
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:
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:
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.
- SAP Managed Tags:
2 Comments
