8 Replies Latest reply: Jul 3, 2018 3:27 AM by Erik Borenäs RSS

    Multiple extensions in same sheet - Qlik sense

    Erik Borenäs



      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,




      .field-top-00 {

      position: absolute;

      background: lightgray;

      width: 16%;

      height: 18%;

      border: 0.02px solid black;






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

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



      define( [







      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;



                          if(lim > value){

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






      } );