3 Replies Latest reply: Oct 30, 2017 5:10 AM by Nick Webster RSS

    How to get the object ID based on a div in a Mashup?

    lucas stiefel

      Hi all,

       

      I am working on a mashup and I want to use a function in JS that requires to use the QlikSense object ID. However, if I have in total 30 objects in my mashup I don't want to create 30 functions that are exactly the same except the object ID.

       

      I was thinking that a good approach could be to use the div where my object is located. So, if for instance I have 30 objects, then I have 30 divs:

       

      div 1 - object  1

      div 2 - object 2

      .                 .

      .                 .

      .                 .

      div 30 - object  30

       

      I was wondering if it's  possible to get the ID from the object using the div where the object is located?

       

      Thank you very much,

       

      Lucas

        • Re: How to get the object ID based on a div in a Mashup?
          Bas Knol

          Hi Lucas,

           

          I am not sure what you mean, but I think you want to load the Qlik Sense objects based on the div element and attributes you have defined.

           

          See the code example below.

          This example is based on the boilerplate code of the Qlik Analytics plugin for Visual Studio.

          Based on the div elements with the 'qlik-embed' class the Qlik objects are loaded using the attributes data-qlik-appid and data-qlik-objid.

           

          <!DOCTYPE html>
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head runat="server">
              <title></title>
            <link href="https://<qlik_sense_servername>/resources/autogenerated/qlik-styles.css" rel="stylesheet">
              <script src="https://<qlik_sense_servername>/resources/assets/external/requirejs/require.js"></script>
              <script>
                  var config = {
                      host: 'qlik_sense_servername',
                      prefix: '/',
                      port: 443,
                      isSecure: true
                  };
                  require.config( {
                      baseUrl: ( config.isSecure? "https://" : "http://" ) + config.host + (config.port? ":" + config.port: "") + config.prefix + "resources"
                  });
                  var qlikApps = [];
          
          
                  require(["js/qlik"], function ( qlik ){
                      qlik.setOnError(function(error) {
                          alert(error.message);
                      });
                      function attach(elem){
                          var appid = elem.dataset.qlikAppid;
                          var objid = elem.dataset.qlikObjid;
                          var app = qlikApps[appid];
                          if (!app){
                              app = qlik.openApp(appid, config);
                              qlikApps[appid] = app;
                          }
                          app.getObject(elem, objid);
                      }
                      var elems = document.getElementsByClassName('qlik-embed');
                      var ix = 0;
                      for (; ix < elems.length; ++ix){
                          attach(elems[ix]);
                      }
                  });
              </script>
          
          
              <!--Static height to show qlik object, this can be modified.-->
              <style>
                  .qlik-embed {
                      height: 300px;
                  }
              </style>
          </head>
          <body>
            <div class="qlik-embed" data-qlik-objid="hRZaKk" data-qlik-appid="3a0d81ee-5b30-4043-b586-63c9e17248c0"></div>
          </body>
          </html>
          
          
          
          
          

           

          I hope this will help you.

          Bas Knol

          • Re: How to get the object ID based on a div in a Mashup?
            Nick Webster

            Hi Lucas,

             

            You can get a reference to the underlying Qlik Object (and subsequently its ID) using Angular. In your JavaScript, you'll need to get a reference to the element used for the Qlik object, which is typically the first child of your element. Below is an example of one way to achieve it. You'll want to adapt it so it works best for your requirements.

            var el = document.getElementById('some id');
            var objScope = angular.element(el.children[0]).scope();
            var objId = objScope.model.id;
            

             

            I hope that helps.

             

            Thanks

            Nick