[SalesForce] How to run code when the browser window is resized in a Lightning Component

I am running some code on the render event that decides whether or not some buttons related to scrolling are displayed depending on some element properties:

<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>

If a user resizes their browser window, I'd like to run the same code. But I do not see any component-level mechanism (such as an event) related to such resizing.

Is there an established pattern for responding to browser window resizes in Lightning Components?

(There is a ui:resizeObserver in the open source but that hasn't made it into the set of supported components if this Component Reference list is complete).

Best Answer

Instead of using

<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>

you can use

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

and you can check window.addEventListner to detect the resizing. Paste this code in your doInit JS controller method and check if it works.

doInit : function(component, event, helper) {
    window.addEventListener('resize', $A.getCallback(function(){
        if(component.isValid()) {
            console.log('Resizing');
        }
    })); 
}

Related Solutions

[SalesForce] How to get the Value of a ui:inputCheckBox Lightning Component

Mohit points out that right now you aren't binding the value of the ui:checkbox to a component attribute, but that's not of concern here.

Using your code copied and pasted into a new component, I cannot reproduce your error. The checkbox state changes and it reports to console. Is there other code in the mix here? Is that your code verbatim?

That being said, both the dev guide and your code follow a bit of an anti-pattern in the event handler. Instead of setting a findable aura:id and hard referencing that in your controller, your code is much more useful (and would handle a list view) if you use the event source instead. Example:

handleChanged : function(cmp,evt,helper){
    var checkbox = evt.getSource();
    console.log(checkbox.get("v.value"));
}

This will fine the component that fired the event.

[SalesForce] Lightning Components: is the Standard Tab component firing app events when switching tabs

There is a Lightning even when navigation happens by adding aura:locationChange. It fires also when user switches tabs. I believe you can determine if tab has been switched or refreshed by value of

var loc = event.getParam("token");

in the handler for

({
    update : function (component, event, helper) {
        // Get the new location token from the event
        var loc = event.getParam("token");
        // Do something else
    }
})

event

<aura:handler event="aura:locationChange" action="{!c.update}"/>

Best Answer

Related Solutions

[SalesForce] How to get the Value of a ui:inputCheckBox Lightning Component

[SalesForce] Lightning Components: is the Standard Tab component firing app events when switching tabs

Related Topic