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

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

                          }

                              

                     }

                }]

           };

      } );