Solved: Custom Extension in Mashup - Qlik Community

Shadi_Sai · ‎2023-07-04

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.

oz_moyal · ‎2023-07-10

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.

View solution in original post

alex_colombo · ‎2023-07-06

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

Shadi_Sai · ‎2023-07-07

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>

alex_colombo · ‎2023-07-07

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?

Shadi_Sai · ‎2023-07-07

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.

oz_moyal · ‎2023-07-07

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-loadi...

Shadi_Sai · ‎2023-07-07

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?

oz_moyal · ‎2023-07-09

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

Shadi_Sai · ‎2023-07-10

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.

oz_moyal · ‎2023-07-10

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.