Exploring #Winter18

Salesforce winter’18 release came with many good updates. One of that is a new <lightning:flexipageRegionInfo /> tag which allows developers to know how much real estate is available for components to stretch into. Following is a quick example of the same:

<!-- Here width attribute will be populated by Lightning runtime,
with available real estate in LEX i.e. Small, Medium, Large, and Xlarge.
-->
<aura:attribute name="width" type="String"/>
<lightning:flexipageRegionInfo width="{!v.width}"/>

Though, Lightning already had $Browser global variable, which gives an idea of the form factor at runtime.

/*
DESKTOP for a desktop client
PHONE for a phone including a mobile phone with a browser and a smartphone
TABLET for a tablet client (for which isTablet returns true)
*/
{! $Browser.formFactor }

But, the use case we are talking about is not mobile > tablet > desktop responsiveness, it’s more of components flexibility to scale within desktop LEX(Lightning Experience) for given real estate. Following picture gives an idea about those real-estate differences within LEX.

That’s where <lightning:flexipageRegionInfo />  will become handy, as it gives your component an easy way to know the available Small, Medium, Large and XLarge size available, even in desktop form factor. Following video gives a good overview of the same tag in action.

Video Overview of <lightning:flexipageRegionInfo />

Code Snippets

Here are code snippets from video for your reference

flexipageRegionInfoTest.cmp

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId">
    
    <aura:attribute name="width" type="String"/>    
    
    <aura:attribute name="_cellSize" type="Integer"/>   
    
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>    
    
    <lightning:flexipageRegionInfo width="{!v.width}"/>    
    
    
    <!-- as passed by Lightning runtime to v.width attribute -->
    {!v.width} 

    <lightning:layout multipleRows="true" >
        
        <aura:iteration items="1,2,3,4" var="item">
        
            <lightning:layoutItem padding="around-medium"  size="{!v._cellSize}" class="card">
                <lightning:card title="{!'Card ' + item}"> 
                    <h1 class="center">{!item}</h1>
                </lightning:card>                
            </lightning:layoutItem>

        </aura:iteration>        
        
    </lightning:layout>
    
</aura:component>

flexipageRegionInfoTestController.js

({
    onInit : function(cmp, event, helper) {
        var width = cmp.get('v.width');
        var size = width === 'LARGE' ? 3 : (width === 'MEDIUM' ? 6 : 12);
        cmp.set('v._cellSize', size);

    }
})

You can drag/drop this component on any available LEX record page for observing it in action.