Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

salezian
New Contributor II

Qlik extension tutorial question

Dear Qlik Community

I'm trying to build extension using official tutorial. In the first step there's a code to detect if element exists or not.

var id = layout.qInfo.qId + '_helloworld'; 
var $helloWorld = $( '#' + id ); 
if ( !$helloWorld.length ) { console.log( 'No element found with the given Id'); 
 else {  console.log( 'Found an element with the given Id, so just change it' ); }

These piece of code doesn't work. I cannot trace why ... Also why at the end of layout.qInfo.qId is added string '_helloworld' ?

Thanks in advance

M.

3 Replies
erik_wetterberg
Valued Contributor III

Re: Qlik extension tutorial question

Hi Marcin,

What does not work? If you open the browser console, dl you get the messages?

The qId is added to create a unique html Id for the element. Best practice is to avoid using html ids, since they need to be unique, but it you do need one, you can use the qId to make it unique.

Hope this helps

Erik Wetterberg

Erik Wetterberg
https://extendingqlik.upper88.com/
salezian
New Contributor II

Re: Qlik extension tutorial question

Hi Erik

In theory according the tutorial these piece of code should detect if element already exists and in case when it doesn't exist to create it. Simply the if condition if !($(layout.qInfo.qId.length)) always is false. I was wondering what's the problem.

BR

M.

erik_wetterberg
Valued Contributor III

Re: Qlik extension tutorial question

Hi,

I assume you are referring to this page: Getting started building visualization extensions ‒ Qlik Sense

The element is created and inserted into the DOM with this piece of code:

$helloWorld = $( document.createElement( 'div' ) );

$helloWorld.attr( 'id', id );

$helloWorld.html( 'Hello World' );

$element.append( $helloWorld );

That's a pretty complicated way to create HTML content, but should work.

BTW the condition in the example is:

var $helloWorld = $( '#' + id );

if ( !$helloWorld.length ) {

If you leave the # out it won't work.

Hope this helps

Erik Wetterberg

Erik Wetterberg
https://extendingqlik.upper88.com/