Qlik Community

Ask a Question

Qlik Sense Integration, Extensions, & APIs

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

Announcements
March 11, 2PM EST: Do More with Qlik - Getting Started wtih Qlik Sense SaaS - Redux. REGISTER NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
erikborenas
Contributor II
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';

                    }

                        

               }

          }]

     };

} );

1 Solution

Accepted Solutions
ErikWetterberg

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

View solution in original post

8 Replies
ErikWetterberg

Hi,

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

Erik Wetterberg

erikborenas
Contributor II
Contributor II

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

ErikWetterberg

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

View solution in original post

ErikWetterberg

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

erikborenas
Contributor II
Contributor II

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
Contributor II
Contributor II

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

ErikWetterberg

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

erikborenas
Contributor II
Contributor II

Hi,

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

Thanks for the help, really appreciate it!

Erik