Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
QlikWorld, June 24-25, 2020. Free virtual event for DI and DA gurus. Register Now
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Partner
Partner

Qlik Visual component issue

Hi,

I'm having an issue with the <qlik-visual> component when trying to set the app id in the controller.

The example below works fine

Template file:

<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">

    <qlik-visual appid="af5e0cc8-8426-423b-acad-02dad7c04d13" visid='hNLUPu'></qlik-visual>

</div>

And the following chart is being rendered:

pic1.PNG

But when I instead try to set the appid property with a $scope variable I get an issue.

.js file:

define( ["qlik", "text!./template.html"],

    function ( qlik, template ) {

        return {

            template: template,

            support: {

                snapshot: true,

                export: true,

                exportData: false

            },

            paint: function () {

                return qlik.Promise.resolve();

            },

            controller: ['$scope', function ( $scope ) {

                $scope.appid = "af5e0cc8-8426-423b-acad-02dad7c04d13";

            }]

        };

    } );

Template file:

<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">

    <qlik-visual appid="{{appid}}" visid='hNLUPu'></qlik-visual>

</div>

The chart itself is actually being rendered but there is an error message on top saying the the app id cannot be found

pic2.PNG

What can be the reason for this and is there anything I can do to fix this?


Regards

1 Solution

Accepted Solutions
Highlighted
Employee
Employee

Re: Qlik Visual component issue

Hi jesper.snihs‌‌,

I think in your case, the issue is how angular apply's the scope, the first time {{appid}} is empty, the second time, it gets it from the scope and missing appid is poorly handled in `<qik-visual/>` (something we should fix!)


Try set the attribute lin the controller instead

define( ["qlik", "text!./template.html"], 

    function ( qlik, template ) { 

 

        return { 

            template: template, 

            support: { 

                snapshot: true, 

                export: true, 

                exportData: false 

            }, 

            paint: function () { 

                return qlik.Promise.resolve(); 

            }, 

            controller: ['$scope', '$element', function ( $scope, $element ) {

               $element.find("qlik-visual").attr("appid","af5e0cc8-8426-423b-acad-02dad7c04d13");

            }] 

        }; 

 

    } );

I hope this helps,

View solution in original post

1 Reply
Highlighted
Employee
Employee

Re: Qlik Visual component issue

Hi jesper.snihs‌‌,

I think in your case, the issue is how angular apply's the scope, the first time {{appid}} is empty, the second time, it gets it from the scope and missing appid is poorly handled in `<qik-visual/>` (something we should fix!)


Try set the attribute lin the controller instead

define( ["qlik", "text!./template.html"], 

    function ( qlik, template ) { 

 

        return { 

            template: template, 

            support: { 

                snapshot: true, 

                export: true, 

                exportData: false 

            }, 

            paint: function () { 

                return qlik.Promise.resolve(); 

            }, 

            controller: ['$scope', '$element', function ( $scope, $element ) {

               $element.find("qlik-visual").attr("appid","af5e0cc8-8426-423b-acad-02dad7c04d13");

            }] 

        }; 

 

    } );

I hope this helps,

View solution in original post