Qlik Community

Qlik Sense Integration, Extensions, & APIs

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

erikborenas
New Contributor II

Multiple extensions in same sheet - Qlik sense

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:

<div class="field-top-00">

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

                    }

                        

               }

          }]

     };

} );

Tags (1)
1 Solution

Accepted Solutions
erik_wetterberg
Honored Contributor

Re: Multiple extensions in same sheet - Qlik sense

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

Erik Wetterberg
https://extendingqlik.upper88.com/
8 Replies
erik_wetterberg
Honored Contributor

Re: Multiple extensions in same sheet - Qlik sense

Hi,

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

Erik Wetterberg

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

Re: Multiple extensions in same sheet - Qlik sense

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

erik_wetterberg
Honored Contributor

Re: Multiple extensions in same sheet - Qlik sense

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

Erik Wetterberg
https://extendingqlik.upper88.com/
erik_wetterberg
Honored Contributor

Re: Multiple extensions in same sheet - Qlik sense

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

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

Re: Multiple extensions in same sheet - Qlik sense

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

erikborenas
New Contributor II

Re: Multiple extensions in same sheet - Qlik sense

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

erik_wetterberg
Honored Contributor

Re: Multiple extensions in same sheet - Qlik sense

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

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

Re: Multiple extensions in same sheet - Qlik sense

Hi,

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

Thanks for the help, really appreciate it!

Erik

Community Browser