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 II, with a SAP Lumira story containing our chart Extension: a disclaimer centered on the top of the story page, repeated one or more times.
In this 3rd part, of this second chapter we will:
* Remove the duplication "bug" from the chart extension and explain why it occurs;
* Justify the disclaimer text;
* put it at the footer of the page;
* last but not least we will pack a new version of the Hello World chart extension.
We will go through several technical explanations, including HTML styles and code versioning.
1. Removing the duplication bug
In part II, we added to render.js some code to display a message, the code being the following:
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;
});
And we already mentioned that render is a function; its definition start at line 14 and end up at line 18.
The point is that, this function is executed each time there is or there may be a change on the report or story we are looking at.
And each time the function is executed, it add a new paragraph which contains once again the disclaimer : so here's why we generate a duplicated disclaimer.
In order to avoid this, we have two possible solutions:
- Sol#1
We try to find a way to give an identity/fingerprint to the paragraph we want to add, and then we try to use this identity/fingerprint to check if the paragraph exists in the container; - Sol#2
We reset the environment and remove all the paragraphs from the container; then we add to the container the paragraph we need.
The second solution is simpler and we will then use this one right now; the corresponding code is the following:
container.selectAll("p").remove();
This line of code, select all the paragraphs in the container and apply the command remove to each of them.
And we will put it inside the render function as first instruction to be executed:
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 ...
container.selectAll("p").remove();
var newparagraph= container.append("p");
newparagraph.text(disclaimer);
};
return render;
});
You may try to pack the extension and test it in SAP Lumira. But right now you would have to uninstall the existing Hello World extension to install this updated version; please, be patient: wait and we will test this extension as last step of this tutorial part.
2. Justifying the disclaimer
We have just remove the duplication bug, but the disclaimer text appears centered in the page ... and this is quite disturbing to me.
Let's come back to the HTML file of chapter 2 part I:
<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>
We will just add a line to this example; we want to specify a property of our paragraph.
In Javascript a property is called an attribute and the command to add an attribute is setAttribute.
There are several possible attributes for p, but here we want to modify the style attribute.
We already saw in part I how to change the font properties of our paragraph using straight HTML (no javascript). The code was 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>
The style is a powerful attribute; it's value is a string; it's syntax is the following:
property keyword followed by ":" followed by a value ended by ";" like
- "font-size:14px;" ; size of the
- "font-family:georgia;"
- "font-weight:bold;"
- and any combinations of those or other properties.
The property keyword we will use to modify the text alignment is text-align and it's value will be justify:
paragraph.setAttribute('style',' text-align: justify;');
So here's below the full example, which correspond to the file created at the end of part I.
We have changed the text to be shown up and we have added the line 08.
<html>
<body>
<script type = 'text/javascript'>
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 body=document.getElementsByTagName("body")[0];
var paragraph = document.createElement('p');
paragraph.setAttribute('style',' text-align: justify;');
var newText = document.createTextNode(disclaimer);
paragraph.appendChild(newText);
body.appendChild(paragraph);
</script>
</body>
</html>
Please Copy&Paste the code into your favorite text editor (we are not talking about the SAP WEB IDE environment here; just use notepad) . Save it in a file with .html extension. Open it in your browser and play around by resizing the browser window.
Now let's do the same with the SAP Web IDE environment and our chart extension.
This is quite straightforward as there is a command which is equivalent to setAttribute in SAP Web IDE. This command is .attr and the full instruction will be:
newparagraph.attr("style","text-align: justify;");
Please note that the attribute name (style) and the syntax of its value are the same as in the HTML example above.
This new commands has to be added in the render.js file which now looks like that:
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 ...
container.selectAll("p").remove();
var newparagraph= container.append("p");
newparagraph.attr("style","text-align: justify;");
newparagraph.text(disclaimer);
};
return render;
});
The resulting screen should be the following:
And now let's see the 3rd evolution, putting the disclaimer at the bottom of the page.
3. Putting the disclaimer in a sort of footer
As in step 2, we will work with HTML first and code the extension later.
And as in step 2, the attribute we need to modify is the style attribute.
Here's the keywords/values we will update :
- wrt to the size:
We start by setting some geometric properties of our paragraph. And wrt to this point: here's what an HTML paragraph looks like:
There is the content; than the padding, which is the distance from the border; than there is the border who has a tickness; and then we can control the margins tickness.
| Property | Value | Comment |
|---|---|---|
| height | auto | The size of the paragraph and in particular it's height; auto means it fits the content |
| padding | 5px | The internal content will have a 5 pixel margin from the border |
| border-top | 1px solid rgb(200, 200, 200) | the upper border will be a solid (no dots) line of tickness 1 pixel and the color will be a light gray |
| margin | 0 | we don't have any margin |
- wrt to font
| Property | Value | Comment |
|---|---|---|
| font-weight | normal | The text will be nor bold nor italic but normal |
| font-size | 10px | We chose a 10 pixel font size |
- wrt to position
Let's explain a little bit the positioning of elements in web pages.
Each element in a web page is like a box containing other boxes. The main box is body.
In our case, our box name is newparagraph and it is contained in the container.
We can set the position of our box according to several politics:
* the default way to display the boxes (static keyword);
* a fixed modification to the standard way (relative keyword)
* fixed with respect to the viewport which means that the position remains the same even if I scrolls down/up the page (fixed keyword)
* absolute which means I give the position wrt to the containing box (absolute keyword)
In this context, left,right, top and bottom are representative of the distance of the box with respect to its container.
| Property | Value | Comment |
|---|---|---|
| position | absolute | we set the position wrt to the container |
| bottom | 0 | We want newparagraph to be at distance 0 from the bottom of container |
| right | 0 | We want newparagraph to be at distance 0 from the right border of container |
| left | 0 | We want newparagraph to be at distance 0 from the left border of container |
And we end up with the following command:
paragraph.setAttribute('style','position: absolute; bottom: 0; right: 0; left: 0; height: auto; font-weight: normal; font-size: 10px; border-top: 1px solid rgb(200, 200, 200); margin: 0; padding: 5px;');
We add it to the existing render.js file to get the final code; please note that at line 18 we have merged both the paragraph alignment instruction of step 2, and the step 3 instructions to put the paragraph at the bottom of the container:
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 ...
container.selectAll("p").remove();
var newparagraph= container.append("p");
newparagraph.attr("style","text-align: justify;position: absolute; bottom: 0; right: 0; left: 0; height: auto; font-weight: normal; font-size: 10px; border-top: 1px solid rgb(200, 200, 200); margin: 0; padding: 5px;");
newparagraph.text(disclaimer);
};
return render;
});
And we obtain the following scenario: click on refresh if needed.
Last but not least, we will now pack everything in a new version of the Hello World chart extension
4. Packing a NEW VERSION of an existing chart extension
If you don't know how to make the chart extension available in SAP Lumira, please look at the second part of this chapter:
Lumira Extensions coding for Dummies
A Tutorial Series : From 0 to DataViz
❷.Let's ROCK - part II
But, if we pack the project right now and try to install it in SAP Lumira, having already installed the initial version of this extension, we end up with the following message:
And the new version of the chart extension doesn't get installed.
We need to specify somewhere in the package that this is a new version of the HelloWorld chart extension.
The file we need to modify is the file helloworld-feature.json located in different directory than the one containing render.js.
Please use the following screenshot to locate the file.
We just need to change line 6 (and we updated the description too):
"description": "This extension allows to show up a disclaimer message",
"version": "0.0.2",Save the file. Pack it and save the pack locally.
Then Open SAP Lumira, go to the File Menu in the toolbar. Click Extensions to open the Extension Manager.
At the bottom right corner of the Extension Manager, click Manual Installation.
Browse to the the saved file. Click on Open and now the Extension Manager should look like that:
Now you can test the extension in an history, as we did already in the previous part of this chapter.
Recall to use a dumb measure in the report, otherwise you will not be able to save it.
In the Visualize room, you should end up having something similar to that:
Please notice some extra margins. I fear we can't get rid of them.
Now please compose a story, put this visualization in it and try different page size.
For example, with a blank page template for the story, a single page, scrollable, you should end up with something similar:
CONGRATULATION!
YOU HAVE CODED AND TESTED THE SECOND VERSION OF THE DISCLAIMER CHART EXTENSION.
- SAP Managed Tags:
