This is the second part of the second chapter 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 ... |
|---|
I left you at the end of part I, with an ugly useless message on the Screen:
Hello World
I consider this message so useless, that I didn't even show you the procedure to make this chart extension available in SAP Lumira ...
So how to make this example useful?
What if the text were the following?
"Disclaimer: This document is provided on a strictly private and confidential basis for information purposes only. Without the express prior written consent of the Company, the document and any information contained within it may not be reproduced (in whole or in part), (ii) copied at any time, (iii) used for any purpose other than your evaluation of the Company or (iv) provided to any other person, except your employees and advisors with a need to know who are advised of the confidentiality of the information." |
That sounds much more useful!
So let's go on with our example, writing down this text in the HelloWorld example.
I'll go pick up a coffee: meanwhile you will logon to the sapwebide portal and open the Helloworld projet and the render.js file.
So Here we are.
We will not simply Copy&Paste the test, replace the "Hello World!!!" text : let's do it with a little bit of style, geek style of course:
- we will define a reference (aka variable) to this text: this variable name is disclaimer.
- and we will use this variable in the newparagraph.text line.
Here's the full code, but we just have added the code in line 13 and modified line 19 wrt to original example HelloWorld.
define("yourcompanyname_viz_ext_helloworld-src/js/render", [], function() {
/*
* This function is a drawing function; you should put all your drawing logic in it.
* it's called in moduleFunc.prototype.render
* @param {Object} data - proceessed dataset, check dataMapping.js
* @param {Object} container - the target d3.selection element of plot area
* @example
* container size: this.width() or this.height()
* chart properties: this.properties()
* dimensions info: data.meta.dimensions()
* measures info: data.meta.measures()
*/
var disclaimer="Disclaimer: This document is provided on a strictly private and confidential basis for information purposes only. Without the express prior written consent of the Company, the document and any information contained within it may not be reproduced (in whole or in part), (ii) copied at any time, (iii) used for any purpose other than your evaluation of the Company or (iv) provided to any other person, except your employees and advisors with a need to know who are advised of the confidentiality of the information.";
var render = function(data, container) {
// TODO: add your own visualization implementation code below ...
var newparagraph= container.append("p");
newparagraph.text(disclaimer);
};
return render;
});
Save the File. And here's the result:
You may need to click on the Refresh button to have the text shows up in the Preview area.
!!!!!NOW PAY ATTENTION!!!! RIGHT NOW -end october 2015- ,the SAP WebIde editor does not ALWAYS produce extensions fully compatibles with SAP Lumira 1.28 as the packages that it outputs MAY require a version of a library not shipped with SAP Lumira 1.28. I plan to contact SAP support to get some more details. Right now, I can just tell you that this bug occurs occasionnally. Anyway, here's a way to check if the problme occurs and a way to solveitWe just have to edit a file. Here's the Steps:
|
|
|
|
If you do not apply this modification,you will be able to do many of the following steps but the Extension will not show up in SAP Lumira Visualize room.
Now ... Let's produce (build and pack are the geek words for that step) the extension file to be used in SAP Lumira.
So now, click on the HelloWorld Directory on the left hand side of the screen.
And then click on the Pack button, just above the render.js tab.
The SAP Lumira chart extension will be saved locally in your browser's default download directory, as a zip file: you may need to confirm the download step.
If you are working on Chrome as previously suggested, your left bottom quarter of the screen should be quite similar to the image above.
Please notice, on the bottom left corner the downloaded file.
CONGRATULATION! YOU JUST CREATED YOU FIRST SAP LUMIRA CHART EXTENSION.
Before turning to SAP Lumira, ... let's express our natural curiosity by clicking on the Message:
And read the instructions:
It's time to run SAP Lumira.
After the SAP Lumira splash screen, You will end up on the SAP Lumira Home screen.
As per instructions on the image above, please click on File on the top left corner of the toolbar and click on Extensions, to open the Extension Manager.
On the right bottom corner of the pop-up Extension Manager window, Click on Manual Installation.
The following screen may vary depending on your OS.
Select the directory where you downloaded the extension at the end of the build and pack step.
Select the file and Click on Ouvrir ... ooops Open! Yeah I am using a French environment ... nobody is perfect.
You should end up with the following screen:
SAP Lumira may show up an error message if the extension contains errors.
In which case ... I suggest You to take a pause... and restart from scratch.
If everything went ok..
CONGRATULATION! YOU JUST INSTALLE YOU FIRST HOMEMADE SAP LUMIRA CHART EXTENSION.
Restart SAP Lumira: close the Extension Manager window, close SAP Lumira and restart it.
This time, from the SAP Lumira Home screen, click on "+ New Document".
But before ... if you don't have a data source available download the attached file data.csv.
As usual, the first step, in SAP Lumira document creation is the selection of a dataset:
You can choose the file data.csv attached at the end of this document , which is a file provided by SAP btw or use your own dataset source.
If you use the file provided, choose Text as source on the left hand side of the window; click Next
and then you just have to specify the path to pick up the data.csv file.
If you've never played with the data.csv or with SAP Lumira, the following screen may vary.
Select the datasource you prefer. Depending on your choice about the dataset the following screen may vary:
Anyway, it doesn't matter, as we are not planning to use any data right now.
No need to touch anything; just click on Create, please.
After few seconds, you should end up on the Visualize room of SAP Lumira.
If you've never installed any chart extension, you will notice a new type of Chart group:
All the chart extensions will be installed in the group highlighted in red.
If you click on it, you should see your new extension HelloWorld:
IF YOU HAD NO PREVIOUS ERROR MESSAGE WHILE INSTALLING THE EXTENSION BUT THE EXTENSION DOESN'T SHOW UP, THIS IS PROBABLY BECAUSE OF A VERSION COMPATIBLITY ISSUE BETWEEN LUMIRA AND THE SAPE WEBIDE. TRY TO FOLLOW INSTRUCTION PROVIDED IN THE PREVIOUS ORANGE BACKGROUND SECTION, ABOVE. IF IT DOESN'T WORK, PLEASE TRY A NEW VERSION OF SAP LUMIRA. |
If the HelloWorld extension is in the list, select it.
The disclaimer will appear in the visualization area.
You will now see some weird things going on ... as our code is in fact incomplete. But don't worry.
I provided an incomplete code to let you see what may happen.
Right now, we are not able to save the visualization as a visualization MUST use some data.
SO... in the MESURES area, please click on the + symbol and add a measure (no matter which).
 |  |  |
As you click on the chosen measure, this one appears in the Measures list.
Now, just to highlight the bug in our code, try to add a second measure or a dimension ... and at one point, you may end up with ...
several disclaimers appearing in the visualization area.
But for the moment let's ignore the bug. Let's save the file: click on Ctrl+S and fill the form:
Let's call the file HelloWorldv001 and click on Save.
We are now back to the Visualize Room. Let's go to the Compose Room by clicking Compose in the toolbar:
Let's call the Story we will compose HelloWorldStoryv001 and the click on Create.
As our extension works properly and having provided data to it in the previous step,
in the visualization list we now have the visualization we just created.
Please drag&drop it on the center of current page.
If you have properly selected the center, you should now have something like the following:
Now click on Ctrl+S to save the document.
You may click on the Preview button. It may happen that the disclaimer gets repeated 2 or more times. For the moment we don't care.
We don't care either to the fact that the disclaimer is at the top of the page and centered.
CONGRATULATION ONCE AGAIN. YOU HAVE JUST COMPLETED YOUR FIRST STORY CONTAINING YOUR HOMEMADE CHART EXTENSION.
In part III, of this second chapter "Let's Rock", we show how to modify some characteristic of the disclaimer and we will remove the duplication "bug" from the chart extension.
Lumira Extensions coding for Dummies
A Tutorial Series : From 0 to DataViz
❷.Let's ROCK - part III
- SAP Managed Tags:
