Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

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

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

3 Replies
bknol
Partner - Contributor III
Partner - Contributor III

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

Anonymous
Not applicable
Author

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

websy1985
Luminary Alumni
Luminary Alumni

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