topic Re: Multiple extensions in same sheet - Qlik sense in Integration, Extension & APIs

Multiple extensions in same sheet - Qlik sense

Anonymous — Wed, 27 Jun 2018 07:47:41 GMT

Hello!

I am fairly new to HTML, JavaScript and Qlik Sense and I am currently working on an extension. The extension is working as it should when only one object is used in the sheet. However, adding multiple objects (of the same extension) triggers a bug.

When modifying one of the objects, the other object also gets modified. I know why this is happening, but I do not know how to fix it.

Down below is the code (the essentials for this problem) that I am using. I am also using an input text box in the properties section where I enter a value which is used as the variable lim in the JavaScript below.

So the problem is when I have two object of this extansion. When I enter some value in the input text box and the script starts, the background color for both extensions might turn red. I reckon this is because I use

document.getElementsByClassName('field-top-00')[0].style.background = 'red';

which will modify both extensions since they are in the same sheet and both uses the class 'field-top-00'.

My question is then, how do I get around this? How can I make the script modifying only the extension that I actually want to modify and not both?

Am I using the scope incorrectly? Can I use the "qId" in some way?

I hope this question makes sense, otherwise let me know and I will try to explain better.

Best regards,

Erik

CSS:

.field-top-00 {

position: absolute;

background: lightgray;

width: 16%;

height: 18%;

border: 0.02px solid black;

}

HTML:

<h1> { { layout.qHyperCube.qMeasureInfo[0].qFallbackTitle } } </h1>

</div>

JavaScript:

define( [

'text!./test.html',

'./properties',

'css!./test.css'

function (ngTemplate, props, thecss, initProps) {

'use strict';

return {

definition: props,

initialProperties: initProps,

template: ngTemplate,

controller: ['$scope', function ( $scope ) {

var lim;

var value;

$scope.greenOrRed = function (){

value = $scope.layout.qHyperCube.qDataPages[0].qMatrix[0][0].qNum;

lim = $scope.layout['box00'];

if(lim > value){

document.getElementsByClassName('field-top-00')[0].style.background = 'red';

}

}]

};

} );

Re: Multiple extensions in same sheet - Qlik sense

ErikWetterberg — Wed, 27 Jun 2018 18:53:22 GMT

Hi,

Don't search the whole document for your target element, just your extension element.

Erik Wetterberg

Re: Multiple extensions in same sheet - Qlik sense

Anonymous — Thu, 28 Jun 2018 06:58:08 GMT

Hi Erik,

Thanks for your reply.

So the problem is this then?

document.getElementsByClassName('field-top-00')[0].style.background = 'red';

I've now been trying to only search through the extension element but I'm not quite sure how to do this.

What i've tried:

var app = qlik.currApp(this); (Included 'qlik' to make this possible)

app.getElementsByClassName('field-top-00')[0].style.background = 'red';

This does not work and I've tried some other stuff too, but I really have no clue how to go about it.

Any suggestions?

Best regards,

Erik

Re: Multiple extensions in same sheet - Qlik sense

ErikWetterberg — Thu, 28 Jun 2018 08:01:36 GMT

Hm, my first suggestion would be OK for a paint-based extension, but this is an angular extension. In that case it's more natural to set the background color as a property in the scope, and then use that property in your template. That would also solve your problem with multiple extensions.

Erik Wetterberg

Re: Multiple extensions in same sheet - Qlik sense

ErikWetterberg — Thu, 28 Jun 2018 17:11:32 GMT

Hi,

The getElementsByClassName method is not a Qlik method but part of the javascript DOM API. It's available not only on the document but also on elements. So it's all about finding the element, I think it's on the scope. Try something like:

$scope.element.getElementsByClassName(.....

Erik Wetterberg

Re: Multiple extensions in same sheet - Qlik sense

Anonymous — Thu, 28 Jun 2018 19:04:32 GMT

Hello,

Thanks for the tips, I will try them first thing in the morning! I will let you know how it turns out!

Best regards

Erik

Re: Multiple extensions in same sheet - Qlik sense

Anonymous — Fri, 29 Jun 2018 05:56:49 GMT

Hello,

I tried

$scope.element.getElementsByClassName(k)[0].style.background = 'red';

But I get this error message

TypeError: Cannot read property 'getElementsByClassName' of undefined

at p.$scope.greenOrRed

Hmm, I think I need to read up on this!

Best regards

Erik

Re: Multiple extensions in same sheet - Qlik sense

ErikWetterberg — Fri, 29 Jun 2018 06:34:26 GMT

So the element is not on the $scope. You could inspect it in the browser console and find where it is, though the other method is is more angular style.

Erik Wetterberg

Re: Multiple extensions in same sheet - Qlik sense

Anonymous — Tue, 03 Jul 2018 07:27:13 GMT

Hi,

I did it in this way and used the ng-style directive in the template!

Thanks for the help, really appreciate it!

Erik