topic Re: Custom Extension in Mashup in Integration, Extension & APIs

Custom Extension in Mashup

Shadi_Sai — Tue, 04 Jul 2023 08:41:18 GMT

Greetings Everyone,

am trying to add a custom extension to my mashup however its showing as invalid (the visualization was not found on the server: extension name()), I have checked the console on my mashup and am seeing 404 not found error in the console.
I have checked older posts regarding the same topic however it didn't work for me, I have applied the following steps as mentioned in previous posts:
_add "Access-Control-Allow-Origin: *" to the virtual proxy.
_added "paths" and "baseUrl" to require.config in the mashup.js.
_added the extension.js and extension.css files in a <script> tag in the header of the html page.

note: the extension is working in the devhub in a test mashup, only when I deploy the mashup in my external server its not loading.

here is the error massage in console:
GET https://{servername}/jwt/extensions/gridchart/gridchart.css.js net::ERR_ABORTED 404 (Not Found)

I have attached the following pictures to the error and the working mashup in the devhub.
Regards.

Re: Custom Extension in Mashup

alex_colombo — Thu, 06 Jul 2023 13:42:49 GMT

Hi @Shadi_Sai , could you please post your extension code? I'd like to see how do you import css in your extension code.

Re: Custom Extension in Mashup

Shadi_Sai — Fri, 07 Jul 2023 05:33:57 GMT

Hi @alex_colombo ,
Thank you for the reply, I have my extension placed inside a container, and I have imported the container as a normal object in the mashup.js file as the following:

app.visualization.get('nuKmddP').then(function (vis) {

vis.show("SD6");

visList.push(vis);

}); // container

Then I have added the css file of the grid extension in the website as the follwoing:

var style2 = document.createElement("link");

style2.type = "text/css";

style2.rel = "stylesheet";

style2.href = servernameprefix + "/extensions/gridchart/gridchart.css";

document.head.appendChild(style2);

I have tried adding the grid.js and grid.css in the html head tag however it didn't work, so I commented them, this is how I added them:

<head>

</head>

Re: Custom Extension in Mashup

alex_colombo — Fri, 07 Jul 2023 09:31:09 GMT

I'm not understanding why you want to import your extension js and css file. If you are embedding the extension in your mashup, both files should be already there. Did you inspect the source files in browser developer tool and search for your extension files?
Anyway, did you try to put in the browser the url https://dv_main/jwt/extensions/gridchart/gridchart.js? What is the response?

Re: Custom Extension in Mashup

Shadi_Sai — Fri, 07 Jul 2023 10:13:38 GMT

I tried to import extension js and css based on one of the comments that I saw saying that it might work,
after loading the mashup I can see extension files loaded, I also tried openning the gridchart.js from the url you have given me and its working and I can see the files.
I have attached screenshot from the developer tool of the browser after openning the mashup.
note: there is a gridchart.css.js file showing as error 404 not found, I don't know where is this file coming from.

Re: Custom Extension in Mashup

oz_moyal — Fri, 07 Jul 2023 11:51:21 GMT

gridchart.css.js is loaded when ir actually tries to load gridchart.css
so it misses gridchart.css and you get errors.

This is issue with require.js and file loading

see this:
https://community.qlik.com/t5/Integration-Extension-APIs/RequireJS-appending-js-extension-when-loading-resources/td-p/1696865

Re: Custom Extension in Mashup

Shadi_Sai — Fri, 07 Jul 2023 12:01:30 GMT

in that case how can I proceed with this issue, I should use the full URL in require(["js/qlik"], function (qlik) instead of ["js/qlik"] ? which is this way:
require('https://dv_main/jwt/resources/assets/external/requirejs/require.js', function (qlik) as it is mentioned in the url that was in the post?

Re: Custom Extension in Mashup

oz_moyal — Sun, 09 Jul 2023 08:43:40 GMT

Well u might try to copy and save gridchart.css as gridchart.css.js (duplicate the file in same location)
maybe it will work , as it will find the file

If this does not work, u may need to look in the extension code, to see how it loads the css, maybe it will be possible to change it there

Re: Custom Extension in Mashup

Shadi_Sai — Mon, 10 Jul 2023 06:03:23 GMT

I have tried duplicating the file in the same directory as gridchart.css.js, however its still not being detected by the browser, even in the sources I don't see it inside the extension folder of the gridchart.

I will try a different chart and see if it will work normally or will I face the same issue.

Re: Custom Extension in Mashup

oz_moyal — Mon, 10 Jul 2023 15:17:35 GMT

Did u try to export the extension, add the file, zip, and re-import ?

I assume if the new chart will be extension you might the same issue, but it also depends how it loads the files.

Re: Custom Extension in Mashup

Shadi_Sai — Tue, 11 Jul 2023 05:51:53 GMT

Thank you @oz_moyal , I exported the mashup and added the files as you mentioned and it worked, other extensions showed the same issue but on multiple files not only the .css file.