topic Re: building new custom qlik sense extension in Integration, Extension & APIs

building new custom qlik sense extension

124psu — Sat, 16 Nov 2024 04:29:36 GMT

Hello,

I am working on creating an extension (1st time). I'm looking to implement a pop up form/dialogue box (modal) for a "help" section so when a user hovers or clicks on this "help" box/button a dialogue will open to show the generic "contact us" information.

I have been researching all day to understand how building qlik extension works. I've went through qliks documentation, few of the notable users on the qlik discussion forums version of building qlik extension but still stuck in some areas. I know you have a .qext (metadata) file and a .js file that actually renders what you want in the extension. I've brought in my dependencies for everything I'll be using and created a dummy sample that seems to work. Now, I tried to mimic (literally copy and paste) W3 schools example of what I want implemented but can never get any results. I get the "visualization not in server.. etc" error. Here is the link from W3 schools - https://www.w3schools.com/bootstrap/bootstrap_modal.asp

My question is, how do I make my css, html, and js file all communicate? When I created a mash up, it breaks it down by css, html, js so when I take some code and put it in their respective areas and preview the mash up I am able to see how it looks. Whereas, in the qlik extension building process I never get any results.

After much reading, it seems like you intertwine and throw in your javascript underneath the paint (rendering) section. I've tried this and many other ways but cannot get it to show me any results. I guess mainly the question I'm asking here is - does anyone have a good guide that explains these kind of details? Or can someone offer some guidance on where to look? Much appreciated.

Re: building new custom qlik sense extension

ajaykakkar93 — Tue, 08 Oct 2019 14:42:00 GMT

Hi,

You can use my extension

https://github.com/ajaykakkar93/Qlik-Sense-Dialog-Box

Or if you want to learn how can you build a new extension there will be a

Udemy Tutorials by name of Qlik Sense Extension form Scratch will be online by coming monday

Regards,

Ajay Kakkar

https://github.com/ajaykakkar93/

Re: building new custom qlik sense extension

124psu — Wed, 09 Oct 2019 14:13:59 GMT

Thanks Ajay. You've been awesome. Quick question - do you have a link to that udemy course you had mentioned? I tried looking for the course but came up empty.

Re: building new custom qlik sense extension

124psu — Thu, 10 Oct 2019 15:37:34 GMT

hey Ajay, got through your first part of the video. great material for novice users trying to get their feet wet with creating qlik extensions.

quick question - the dialogue box extension, where in the .js file can I add my own HTML? I've tried to add it in the .js, also tried creating an html file and calling that within the .js file, and also tried adding the HTML code directly into the properties on the extension itself but it's not displaying anything.

I'd like to add some HTML content in here, which would really be like a 2 column structure that list helpdesk/support contact info.

Thanks again.

Re: building new custom qlik sense extension

ajaykakkar93 — Thu, 10 Oct 2019 15:40:50 GMT

send me a sample UI how u want it ill suggest you the best possible way

Re: building new custom qlik sense extension

124psu — Thu, 10 Oct 2019 15:49:02 GMT

This is a quick mock up of what I am trying to achieve. A 2 column format with questions and also who to support in regards of the developed application.

I can do this in html no problem, just having some trouble on where to add/place that code so that in renders on the actual extension.

Re: building new custom qlik sense extension

ajaykakkar93 — Thu, 10 Oct 2019 15:53:23 GMT

Do u want this n exact same way? as it is in image or u made it in my extension/struggling to do it.

Re: building new custom qlik sense extension

124psu — Thu, 10 Oct 2019 15:56:23 GMT

Yes, the image captures how I'd like for the end users to see. I just have a hard time trying to add the html code in the actual extension, I've tried adding it in the property, but doesn't look like it likes that. Ideally, I'd like to add it as part of the extension. I've tried adding an HTML file and calling it in the .js file but it's not working as I expected.

Re: building new custom qlik sense extension

ajaykakkar93 — Thu, 10 Oct 2019 15:58:08 GMT

20min

Re: building new custom qlik sense extension

ajaykakkar93 — Thu, 10 Oct 2019 16:04:46 GMT

is this what you desire?

Re: building new custom qlik sense extension

124psu — Thu, 10 Oct 2019 16:06:32 GMT

Ah yes, that is pretty much it.. where did the html code get placed?

Re: building new custom qlik sense extension

ajaykakkar93 — Thu, 10 Oct 2019 16:14:39 GMT

Here is the html file download it & copy the code inside it edit it if you want.

1) copy the code

2) paste inside ='' string inside the HTML Para textarea

3) Dialog height % to 0

4) Para Height to 300

Done

Code:

='
<div style="display:flex; width:100%;">
<div style="width:50%;font-size: 14px;">
<h2 style="
font-size: 20px;
">Help/Support</h2>
<p>FAQ-</p>
<p>HOW DO I EXPORT IT AS EXCEL/PDF?</p>
<p>ANSWER...</p>
</br>
<p>CAN I TAKE SNAPSHORT OF A CHART</p>
<p>ANSWER...</p>
</br>
<p>HOW OFTEN IS THE DATA RELOADED</p>
<p>ANSWER...</p>
</div>
<div style="width:50%;font-size: 14px;">
<p>IF YOU HAVE ANY QUESTIONS REGUARDING THIS APPLICATION PLEASE CONTACT...</p>
</br>
</br>
<p>POC#1 - email/phone</p>
<p>(email will be href and open outlook auto with the POCs e-mail already pre-populated)</p>
</br>
<p>POC#2 - email/phone</p>
<p>POC#3 - email/phone</p>
</div>
</div>
'

Re: building new custom qlik sense extension

124psu — Thu, 10 Oct 2019 16:21:27 GMT

Feel like I'm doing something wrong because no results. Mind if you send a quick snapshot to where this code will be placed. Thanks again Ajay.

Re: building new custom qlik sense extension

ajaykakkar93 — Thu, 10 Oct 2019 16:27:35 GMT

Yes you are doing it wrong my friend i just added the html in the property panel of my extension by creating a button & followed the above steps. here is the gif follow the steps.

Re: building new custom qlik sense extension

124psu — Thu, 10 Oct 2019 16:30:35 GMT

awesome, this is what I was looking for. I was over here over complicating things. This will hopefully be my last question, but if I wanted to add css - I can do so directly on the extension in the css file so as long as I call the right class/id and it should work?

Re: building new custom qlik sense extension

ajaykakkar93 — Thu, 10 Oct 2019 16:30:39 GMT

i assume it was easy & you made it

Re: building new custom qlik sense extension

ajaykakkar93 — Thu, 10 Oct 2019 16:32:01 GMT

yes

Re: building new custom qlik sense extension

124psu — Thu, 10 Oct 2019 16:36:52 GMT

Ajay, once again thank you. Been tremendous with explaining. Loving your course as well.

Re: building new custom qlik sense extension

ajaykakkar93 — Thu, 10 Oct 2019 16:41:32 GMT

thank you ill appreciate if you share it with developer,

i have widget & mashup course as well in udemy.

you can use this links to avail discounted price

Mashup:

https://www.udemy.com/course/qlik-sense-mashup/?referralCode=8DAC57B53E9ACE07D6E9

Extension:

https://www.udemy.com/course/qlik-sense-extension-form-scratch/?referralCode=73A520531AC865B3BED9

Widget:

https://www.udemy.com/course/qliksense-widget/?referralCode=2296186B87D36D2F7F07

Re: building new custom qlik sense extension

124psu — Thu, 10 Oct 2019 21:56:05 GMT

Ajay thanks again. I have one last question - where in your extension code can I put a direct css in the style tag so that I can manually change the background color for the header? I was able to find it for the footer.

htm += '<div class="lui-dialog__header" style="background-color:#0a3745; '+(ShowDialogTitle?'':'display:none;')+'">';

I assumed that this was the header, since I checked the footer side and it was pretty much the same syntax, but doesn't look like it's doing anything. If I take out the ShowDialogTitle portion it'll auto populate the label "Title".

update --

looks like the header part is working but did not know that it was getting cut off. If you compare to the footer, looks like the header has a higher height.