topic How to get the object ID based on a div in a Mashup? in Integration, Extension & APIs

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

Wed, 24 Aug 2016 20:42:13 GMT

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?

bknol — Thu, 08 Sep 2016 14:47:53 GMT

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?

Anonymous — Thu, 26 Oct 2017 17:05:06 GMT

it is possible generate data-qlik-objid, data-qlik-appid by drag and drop object?

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

websy1985 — Mon, 30 Oct 2017 09:10:41 GMT

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