Adding Inline SVG elements To Your Lumira Extensions

Lumira extensions are built using HTML5, CSS, Javascript, d3.js and SVG technology. Unfortunately, little documentation exists for SVG support in Lumira.

In the process of the creation of a Lumira extension, I discovered it was unclear how to add inline SVG to a project. It is easy to dynamically build SVG elements with d3.js, but to include a whole file inline was a challenge. This inline SVG is necessary if you want to dynamically modify it using d3.js/jQuery from the data in Lumira.

I wanted to take this SVG and include it in my extension:

And then using d3.js, modify the values found in “average transaction value”, “average items/transaction” and “top items” using d3.js selects on these inline elements through their predetermined IDs.

In other words, I wanted the actual XML <svg> description to be present in the source of the extension:

Based on my discussion from October 14, 2015, an answer was provided and I would like to showcase it here.

Prerequisites:

• I assume you have already created a new extension from template. Read here for the process to create a new project from template.
• The template must use the div format, and NOT the svg format on creation
• I assume you are somewhat familiar with the VizPacker extension for WebIDE.

Procedure:

You will find the render.js file where the logic will be coded in the js > utils folder under your project.

To load the SVG inline, you will be using an ajax call from the jquery library to your .svg file. Please refer to the discussion that inspired this blog post here for a simple pure Javascript solution.

First you must upload your .svg file that you want to include. To do so, create an “image” folder under resources:

After this, import your svg file to the Image folder:

Now you are ready to write the code that will import the <svg> xml code to your extension.

Here is the ajax solution provided by user Vincent Dechandon:

$.ajax({

     url: require.tuUrl(“path/to/svg.svg”), 

     type: “GET”,

     dataType: “text”,

     success: function(svg){

          $(container[0]).html(‘<?xml version=”1.0″?>’ + svg)

          .attr({

               ‘height”100%’

               ‘width”100%’

            }); 

     }

});

Paste, this code inside the render.js file

The code goes inside the render function, marked // YOUR CODE GOES HERE in the screenshot

Let’s take a closer look to see what is happening:

The ajax call, returns an object called “svg” which contains the SVG element that you want to insert in your page.

The url that you specify is in fact the path to the svg file you uploaded. You enter yourProjectID-src/resources/Image/visualisation.svg

In the example I created, the projectID folder is sap_viz_ext_chart-src, so my path is sap_viz_ext_chart-src/resources/Image/visualisation.svg

The function body inside of success is where the manipulation of the SVG element can occur. That is because the SVG element is only created at this point.

For instance, in my SVG element that I inserted inline, there is the following text element:

<text

       id=”item3Text”

       y=”375.7663″

       x=”605″

       text-anchor=”middle”

       style=”font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;”>

5</text>

By inserting this line inside the function body, I can change the text of the SVG based on the data provided to the render function from the Lumira SDK.

container.select(“#item3Text”).text(data[0].Year);

where in this case my data object contains the following:

The text would therefore show “2009” instead of the original “5” value from the SVG code.

Hence, you have seen how to insert your inline SVG and modify it using d3.js.

You can now perform complex logic inside the callback function on Success of the ajax call to build dynamic svg elements.