building new custom qlik sense extension

[124psu]

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.

[124psu]

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

[ajaykakkar93]

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>
'

[124psu]

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.

[ajaykakkar93 · Accepted solution]

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.

[124psu]

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?

[ajaykakkar93]

i assume it was easy & you made it

[ajaykakkar93]

yes

[124psu]

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

[ajaykakkar93]

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

[124psu]

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.