topic Re: Qlik extension tutorial question in Integration, Extension & APIs

Qlik extension tutorial question

salezian — Mon, 19 Jun 2017 19:18:19 GMT

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

Re: Qlik extension tutorial question

ErikWetterberg — Tue, 20 Jun 2017 03:52:14 GMT

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

Re: Qlik extension tutorial question

salezian — Tue, 20 Jun 2017 07:11:29 GMT

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.

Re: Qlik extension tutorial question

ErikWetterberg — Tue, 20 Jun 2017 08:05:13 GMT

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