Skip to Content
Author's profile photo Former Member

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:

/wp-content/uploads/2015/10/1_810384.jpg

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:

Image 10.png

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:

/wp-content/uploads/2015/10/2_810385.jpg

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

/wp-content/uploads/2015/10/3_810386.jpg

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


/wp-content/uploads/2015/10/4_810387.jpg


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


Image 9.png


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


Image 8.png

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:

/wp-content/uploads/2015/10/6_810389.jpg

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.

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vincent Dechandon
      Vincent Dechandon

      Hey, thanks for the dedication πŸ˜‰ .

      It's always nice to see post like this that aim to leverage the creation of extension in Lumira (or any other product anyway !). It's true that SVG lacks of support even inside browser because its handling is "far" from the HTML one in terms of parsing. For example, creating a svg on the fly with jQuery then trying to append it somewhere won't work.

      The AJAX snippet is just an example but of course there are many other ways to achieve it.

      Note the require.toUrl("your/path/there"). This is important because trying to retrieve URL through $("script") for example or even window.location can "lie" to you, while the toUrl method ensures that the code will work anywhere the extension will be used (Lumira Desktop, Server for BIP, for Teams, ...). Thanks to Thomas Kuruvilla and all of his team (@SAP Lumira for BIP) for this useful tip πŸ™‚ .

      Cheers,

      Vincent