Unable to convert extensions from SAP Lumira SDK version to SAP Web IDE version

[Former Member]

Hello Experts,

We have got some extensions developed in previous SAP Lumira SDK version. We are following this blog post as well as but no luck yet. Unfortunately, as a result, chart is not populated and just the title and legend are displayed. I am stating below the steps in detail which we have followed. Can you please point/ highlight anything we are missing out in here?

1. In web ide File -> New-> project from template -> Visualization Extension.

2. Entered Project name, Extension name, extension id, company name.

3. Gave Chart title as Stacked Group Column chart and uploading csv file.

4. After uploading the csv, we are changing the measures as "Cash Flow from Investing Activities" field and dimensions as "FY Month" and "FY Year" fields.

5. Selected Measure Set as "Cash Flow from Investing Activities" and DIMENSION SET as "FY Month" and "FY Year" fields.

6. On next and finish the extension project got created.

7. Now we went to the auto generated render.js file in the structure and added the below height and width related code.

8. After that we have copied the old js bundle code (only the content inside the function) and pasted below the above statements.

9. But we are able to see only the title and legend of the chart. The main chart is not visible even after adding the parts of the old js code also.

Request you to kindly check and let me know if there is any more points we need to consider while integration.

Many Thanks,

Megha

[former_member198672 · Accepted solution]

Hi Megha,

Do you notice any errors in your browser console after running the extension in Web IDE?

Regards,

Maaz

[Former Member · Accepted solution]

Hello Maaz,

No there is not even a single error reported and chart is also not displayed hence unable to identify the issue that have to be fixed.

Thanks,

Megha

[former_member198672 · Accepted solution]

Hi Megha,

Ok. Let's try and narrow down the problem. Can you check and let me know these few things?

1. Can you inspect the data variable that is being passed to the render function and verify that the data you have uploaded as CSV is coming there?
2. Can you inspect the DOM and tell me whether there is any content in a div with the class "v-m-plot"?
3. Are you using any third party libraries that you are trying to load in render.js?

Regards,

Maaz

[Former Member · Accepted solution]

Hi Maaz,

Thanks for looking into this. We checked as per your response and below are the results:

1. Data that we have uploaded in csv is coming in render.js. We can see the objects of data in console.

2. Yes, when I inspect the DOM it shows v-m-plot in one of the divisions. Attaching a screenshot.

3. We haven't added any 3rd party libs manually, whatever added by default in the webide extn proj on those are included.

Could you please advise on further course of action?

Thanks much,

Megha

[former_member198672 · Accepted solution]

Hi Megha,

Everything seems to be right here. I hope that when you go deeper in the DOM, your visualization specific DOM is present there. Right?

Just to make sure that there is no problem, can you try this really simple D3.js code

container.append("svg").attr("height", 200).attr("width", 200).append("rect").attr("width", "50").attr("height", "50").attr("x", "50").attr("y", "50");

Add this code and nothing else in your render function.If you see a black rectangle rendered, that would mean that the problem resides somewhere in the code that creates the visualization. That would mean we have to dig deeper into your code.

Regards,

Maaz

[Former Member · Accepted solution]

Hello Maaz,

Above line of code works as expected.

It looks like some of the functions like d3.csv() which are used in previous code are not working now in new method of SAP Web IDE. We are debugging the extension line by line to see the output at intervals. We are also trying to find relevant apis, methods, functions which should be used in place of those not supported anymore.

One specific thing, we are not able to see the v-content where as in legend we are using it. Could you please advise how can we add the content for v-m-plot?

Thanks,

Megha

[former_member198672 · Accepted solution]

Hi Megha,

When I asked "I hope that when you go deeper in the DOM, your visualization specific DOM is present there. Right?", I meant exactly this. There seems to be an issue with the code that has been written in the extension, hence the <svg> tag is empty. I feel none of your visualization specific code is being executed.

As mentioned before, we need to dig deeper into your source code. So, another set of questions:

1. I noticed that you mentioned d3.csv(). Do you mean that you are trying to load extra static resources in the extension using D3.js ? If yes, then can you check the "Network" tab of the chrome dev tools and tell me if the file you're trying to load is downloaded or it's a 404?
2. What other functions are you having troubles with?

Regards,

Maaz

[Former Member · Accepted solution]

Hello Maaz,

You're right. Our code pertaining to visualization is not being executed. Surprisingly this code works perfectly fine when I copy and paste the folder containing bundle.js file at C:\Users\<username>\.sapvi\extensions\bundles location. This is an old method being used before the release Extension Manager. However in order to make it compatible with latest versions, process seems not to be an easy migration.

We moved forward with debugging and now facing issue while passing layers data to svg.

I've also raised a separate question on SCN yesterday at this link-

Could you check out the images and if possible advise the needful?

Many Thanks,

Megha

[former_member198672 · Accepted solution]

Hi Megha,

Good to know that you have been able to narrow down the issue. I will reply to your other question on that thread, if I have any inputs.

Just for my understanding, could you answer these questions for me?

1. Are you able to press the "Run" button in Web IDE and see the extension working in the browser? If it doesn't work there, it will not work in Lumira as well.
2. I was wondering what you mean by "Surprisingly this code works perfectly fine when I copy and paste the folder containing bundle.js file at C:\Users\<username>\.sapvi\extensions\bundles". AFAIK, Extension manager does not modify any code and it is just a GUI to do the very same thing.

Regards,

Maaz

[former_member198672 · Accepted solution]

Hi Megha,

I believe you have been able to fix your issue as per the answer to question in the other link mentioned. If there is no more investigation required on this, can we close this thread?

Regards,

Maaz

[Former Member]

Hi,

Here the word "this" refers to window object.

this.width() and this.height() can be takes the value from WebIDE width and height, but colorProperties() and Properties() is not found in webide elements,

These are properties which reads from SAP Lumira. We know lumira is similar to chrome window,

element.addProperty({

            name: "colorPalette",

            type: "StringArray",

            supportedValues: "",

            defaultValue: d3.scale.category20().range().concat(d3.scale.category20b().range()).concat(d3.scale.category20c().range())

});

Add this line and this will read the default color from color palette of Lumira

[former_member183750]

What version of Lumira are you using?

- Ludek

Senior Support Engineer Product Support

Chat with SAP Lumira Support! See KBA 2213344 - Starting a chat with SAP Support [video]

Follow us on Twitter (#SAPLumira)

Got Enhancement ideas? Use the SAP Idea Place 

[Former Member]

Hello Ludek,

It is SAP Lumira Version: 1.29.3 Build: 99.

Thanks,

Megha

[former_member183750]

You may want to go to 1.31, though I am dubious that it will resolve the issue - actually, let's do it like this;

Remove all previously installed versions of Lumira by going to Add | Remove, including 1.29.3. Install Lumira 1.31. In this way, I'm hoping to remove any possible effects from left over bits from earlier installs.

And were you able to check on the suggest on from Maaz?

- Ludek

[Former Member]

Hello Ludek,

There are other extensions which are working fine on 1.29.3 as well so I assume this is something to do with the conversion of extension codes. Currently we are debugging the code to identify the issues and will let you know.

Thanks,

Megha