SAP Lumira visualization External file

[vivek_kumar1]

Hi,

I am trying to add a file(file is not in .js format) in lumira visualization extension and use it in web-ide. It is working properly in web-ide.

When i am trying to pack the project and import it in Lumira, file in not present in lumira (in inspect element-source) and showing error file not found.

Please let me know if someone have idea how to add external file in Lumira visualization extension.

Thanks and Regards,

Vivek Kumar

[former_member183462 · Accepted solution]

Hi Vivek,

I believe in Web IDE you are using a similar format as the 2nd line below:

If you are calling your resource in Web IDE as nameoffile (for example if you file is called nameoffile.json), you will have to change it to the correct project path before deploying to Lumira, particularly in the format '../sap/bi/bundles/sap/viz/ext/nameofextension/nameoffile' or depending on how you have named your project. It typically looks like this in structure:

So depending on your naming conventions, you have to put the correct path for deployment in Lumira. To summarize, in your render.js code, you need to add line #1 in my first screenshot for Lumira, and line#2 for Web IDE. Remember that what works in Web IDE won't work in Lumira, and vice versa.

Hope this helps.

Thanks,

Annie

[vivek_kumar1 · Accepted solution]

Hi Annie,

Thanks a lot for reply. It was really helpful.

I  just have few more queries.

1. Using the path format as suggested by you, will we be able to see external resource in Lumira desktop source also?
2. How to give the path (or how to access external resource) if we want to use the extension in Design Studio also?

Regards,

Vivek

[Former Member · Accepted solution]

Hi,

For SAP Lumira, to load extenrnal resource we need to use:

../sap/bi/bundles/vbi/viz/ext/name_of_extension/ folder path (til the file with extension like.css/.xml/.js/...)

Here we can see the file in file in lumira source as well as we can read the file.

[former_member183462 · Accepted solution]

Hi Vivek,

For question #1, yes you should be able to see the external resource when you open Dev Tools in Lumira like I showed previously. It should look like something like this

For example, here the external resource is heatmap2.js and it shows up in my Lumira dev tools. However, there can be cases where your resource works but it might not show up. I suggest testing it out first and seeing if it works. If it does, good; if not, you can debug and find out why.

As for your second question, apologies but I am not familiar with the inner architecture of Design Studio and how extensions respond. I won't be able to give you a correct answer.

Thanks,

Annie

[vivek_kumar1 · Accepted solution]

Hi Annie,

I am able to use external resource in Lumira but not able to locate in source(debugged but not getting the cause). Extension is working properly in Lumira.

I am still looking for the solution so that I can use the same extension in Design Studio also (External resource is not loading in DS).

It will be really helpful if you can give reference of right point of contact for Design Studio CVOM chart extensions.

Regards,

Vivek

[former_member183462 · Accepted solution]

Hi Vivek,

Sometimes in the Lumira debugger sources, the external resource may or may not show. It usually shows up in case of other simple JS resources, but sometimes may not show up for geo resources like topojson etc. I'm not sure about the cause of this behavior but the charts work.

In Design Studio I've been testing out CVOM chart extensions. The ones with external resources do not seem to load. When debugging, you will find that the source structure is very different from that of Lumira. Both their frameworks were built very differently, which is why the behavior of CVOM extensions for each may differ, especially in the case of external resources.

You may reach out to my colleagues and about this.

Thanks,

Annie

[vincentdechandon]

Hey.

I don't know much about VizPacker API on Web IDE, but basically a custom extension can load w/e file types through an AJAX call.

When you generate the extension from VizPacker, unzip it and look if your file that causes issue is embedded and located in the right folder.

Also, how is your file loaded in your extension. Through a standard AJAX call or using require?

Br,

Vincent

[vivek_kumar1]

Hi Vincent,

Yes, file is present in the zip folder(have also checked after unzip it and file is present there also).

I am reading the external file as xml file by giving it's path in the d3.xml() function and able to get output in web-ide but not in Lumira Desktop.

Regards,

Vivek Kumar

[vincentdechandon]

When you give the path to your URL, make sure to use the require.toUrl method.

For example, if your file is located here :

bundles\my\custom\ext\chart\chart_viz_ext_chart-src\myfile.xml

do

require.toUrl("chart_viz_ext_chart-src\myfile.xml");

Do not forget to add require to your dependencies.

Doc there : Visualization Extension Plugin for SAP Web IDE Guide

For instance :

define(...
    [
        "require",
        ...
   ], function(require ...) { }

[vivek_kumar1]

I am not able to see file in lumira source but i can read the file now.

Thanks a lot.

[former_member207736]

Hi Vivek

How are importing in Lumira Desktop?

Are you using File -> Import to folder?

    or

File -> Extension Manager -> manual installation -> browse zip

The former one won't upload extension. You need to use Extension manager from File menu.

If you are already using Extension manager and it did not work then will it be possible for you to share the zip for our investigation?

[vivek_kumar1]

Hi Rahul,

I am importing through File -> Extension Manager -> manual installation -> browse zip (using Lumira Desktop 1.29).

Sorry, due to confidentiality, I can't share the zip. There are few queries which may be related to issue. Please help if you'll get any idea about the issue.

• Is there any specific file format only which we can import?
• I am getting this error while Loading/reloading Lumira(without any Extension).

Failed to load resource: the server responded with a status of 404 (Not Found) (http://127.0.0.1:9826/h5v2/resources/tp/thirdPartyCombine.js)

Regards,

Vivek Kumar