topic Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes? in Integration, Extension & APIs

How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

Fri, 09 Jun 2017 13:04:47 GMT

When using plain JavaScipt, we write the rendering logic inside the 'paint' function and it gets executed and the view gets re-rendered, whenever we resize the element, or when the data changes on applying filters.

But when using AngularJS controller, re-rendering is not happening in both the cases. I've to refresh the browser to see the changes take effect.

Please help me with this.

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

Stefan_Walther — Fri, 09 Jun 2017 18:43:52 GMT

Angular uses double-way binding, so there is no re-paint, AngularJS takes care of updating the corresponding DOM elements. Maybe this article helps as a starting point:

The Angular Way: Basics | qliksite.io

Hope this helps.

Regards

Stefan

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

Fri, 09 Jun 2017 19:44:08 GMT

No Stefan, update is happening neither when resized (positioning of the elements inside, based on the new width and height after resize) nor when the data changes. I've to refresh the page to see the new data and positioning.

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

d_pranskus — Sun, 30 Jul 2017 12:35:35 GMT

I had the same issue, I was able to find a workaround. Not sure if this is the best solution or not, but it worked for me.

What I wanted was to detect when the following events are triggered:

1. Browser window has been resized

2. Extension element has been resized

3. Layout/properties of my extension has been modified

The first might be achieved by subscribing to window resize event. With the jquery it is easy - just put it in your angular controller

$(window).on("resize", function(event) {
    console.log("window.resize");
    console.dir(event);
    // Do whatever you want
});

Other two were a bit trickier.

To sort the second issue I did the following:

I created a dummy invisible component in my extension definition, injected a $rootScope into the controller and then created an event watcher:

refresh: {
    component: {
        template: "<span></span>",
        controller: ["$rootScope", "$scope", function ($rootScope, $scope) {
            $scope.$on("layoutchanged", function (event, data) {
                $rootScope.$broadcast("myLayoutChanged", data);
            });
        }]
    }
}

Then in the main component controller I added another watcher:

$scope.$on("myLayoutChanged", function (event, data) {
    console.log("myLayoutChanged");
    console.dir(event);
    console.dir(data);
    // Do wahterver you want
});

I tried to watch on the "layoutchanged" message directly on the main controller, but it did not work. Possibly that the message was not propagated to it.

The solution to the third issue was to inject a $rootScope into main controller, add to the layout object a function to return the $rootScope object and then use it in the onResize() (non angularjs) event to broadcast a message which can be then catched in the main controller:

resize: function($element, layout) 
{
    if (layout.getRootScope) {
        var $rootScope = layout.getRootScope();
        $rootScope.$broadcast("myElementResize", $element);
    }
},
template: ngTemplate,
controller: ["$rootScope", "$scope", "$element", "$attrs", function ($rootScope, $scope, $element, $attrs) {

    $scope.layout.getRootScope = function() {
        return $rootScope;
    }

    $scope.$on("myElementResize", function (event, data) {
        console.log("myElementResize");
        console.dir(event);
        console.dir(data);
        // Do whatever you want
    });
    // The rest of the controller code goes here

}]

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

d_pranskus — Sun, 30 Jul 2017 12:40:29 GMT

Sorry you need to switch places my answers 2 and . Also for data change event you may try the similar approch to layout change, but use "datachanged" message instead.

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

ygfletch — Thu, 01 Feb 2018 14:46:52 GMT

Hey Darius,

I'm having this issue when building AngularJS style extensions, I'm not really seeing the value in creating these style extensions when the DOM doesn't actually get updated with layout changes. swr‌ can you help explain why it is like this with AngularJS extensions?

I can't get your solution to work, have you found another way of updating the extensions DOM when the layout is changed at all? Do you know if this method is still working in November 2017?

Many thanks

Graham

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

ErikWetterberg — Thu, 01 Feb 2018 18:33:47 GMT

Hi!

You probably need to publish some code snippet to explain your problem. There are lots of angular-based extensions where this works, so it must be some special case you have come across.

You could of course use paint() and resize() even in an angular-based extension, but in most cases this should not be needed.

Erik Wetterberg

Extending Qlik – Use Qlik in your own apps and sites

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

ygfletch — Fri, 02 Feb 2018 09:38:32 GMT

Thanks for the reply Erik. I've played around with it after what you've said as I thought I must have been missing something. I was saving the values from the layout directly onto $scope in the controller, then using these variables within an ng-class expression. I've changed the template to use the layout.variable version and this does update.

Cheers Erik

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

Anonymous — Sat, 30 Jun 2018 15:01:34 GMT

Yes Angular does take care of most variables by two-way binding but that works only with variables declared in the scope.

In a scenario where you are giving the user some filtering option by using some custom property on the side panel, those aren't updated by Angular, so you have to use the paint method to render those changes in the view. I prefer linking view to the controller with a variable and then when the side panel filter is applied, I used the paint function to just simply update my scope variable, Angular will take care of the rest!

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

organgrindingmo — Thu, 13 Dec 2018 13:30:18 GMT

I know this is an old thread but I was looking for some help on it and thought that I would add my 2 cent solution for future readers.

TL;DR; use Angular Events to call your custom code when using a property on the $scope object.

So as far as I understand it, once the cube is returned, the ngTemplate and the $scope are 2 way bound, which means that when the $scope.layout.qHyperCube is updated by Qlik, the template will re-render. This only works when your template references the cube, which is updated and the binding then renders to the Template.

In my extension, I looped through the cube and massaged the data into the shape that I required and then added it as a property on the $scope object ($scope.myData = {...}), and my ngTemplate was bound to the myData property. In this scenario, the cube gets updated but my code doesn't get called to process the data into what I need.

To fix this, I re-run my code whenever the extension's data is Validated by using an Angular Event.

return {
    initialProperties: initialProps,
    definition: props,
    template: ngTemplate,
    controller: ['$scope', '$element', function ($scope, $element) {

        function processData() {
        var data = {};
        // Do Stuff...
        $scope.myData = data;
        }

        // Enable scrolling
        $element.css("overflow-y", "auto");

        processData();

        /**
         * Validated event.
         * @description The data has been recalculated and new valid data is available.
         */
        $scope.component.model.Validated.bind(function () {
            processData();
        });
    }]
};

Not sure if this is the correct way to do it but it seems to be working.

(note: Using Qlik Sense Sept 2018)

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

ErikWetterberg — Tue, 02 Oct 2018 13:53:42 GMT

Hi,

Yes that's a way to do it: the Validated event is actually not an angular event, but one that Qlik Sense defines. You probably also could use the paint method.

Erik Wetterberg

Re: How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data chan

rhannuschka — Wed, 17 Apr 2019 16:12:43 GMT

A bit late maybe, but we have not the same problem. I want to know when grid cell size has been changed so we could recalculate some stuff ( scrollbars / virtual scroll). At this point we use Angular 2+ to create extensions so the Angular1 scope is not very usefull.

In short ( this is Typescript nothing special for JS just remove Types ) to get notified something has been changed, just use the MutationObserver to get notified some styles changes ( or other dom properties ).

// get parent cell which describes width and height of the cell
const cell: HTMLElement = $element.closest('.cell').get(0);
const obs = new MutationObserver((mutations) => {
    // at this point we get notified if grid cell style has been changed
    // this could be width, height, left or top 
    // this only happens if we  modify the grid cell into editor
    console.log(mutations);
});

/** tell the mutation observer to watch the cell for style changes */
obs.observe(cell, {
    attributes: true,
    attributeFilter: ["style"]
});

/** @todo disconnect on destroy to avoid memory leaks */