Lightning Web Components Making Width Aware

Let us discuss here how to define the lightning web component width aware of the screen. When building web apps, it is sometimes advantageous for components to have awareness of their size and position on the screen. This is useful both for rendering content initially, but also for components that need to know when their size changes. When you add a component to a region on a page in the Lightning App Builder, use @api flexipageRegionWidth to pass the region’s width to the component. Then with some strategic CSS, you can tell the component to render in different ways in different regions at runtime. This example will display the opportunity table and adding different boards based on width as shown below.

In the component’s JavaScript class, use the @api decorator to create a public flexipageRegionWidth property. This property receives the width value of the region that the component resides in on the page. the flexipageRegionWidth will return SMALL ,MEDIUM ,LARGE values

 

Step 1: Create an Apex Class

Create a simple apex class that queries the opportunity and return the data. run the following command from the SFDX

sfdx force:apex:class:create -n GetOppList -d force-app/main/default/apex

Here is the complete code for apex class

public with sharing class GetOppList {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpp() {
        return [SELECT Id, Name  ,StageName ,CloseDate, Type FROM Opportunity LIMIT 10];
    }
}

 

Step 2: Create a lightning web component

Create a Lightning web component by using the following SFDX command

sfdx force:lightning:component:create --type lwc -n RegionEx -d force-app/main/default/lwc

Here is the RegionEx.html markup code which will display the opportunity table.

<template>
    <div class="slds-text-align_center">
Page Region 1- {flexipageRegionWidth}   
    </div>
    <div class={flexipageRegionWidth}>
        <table class="slds-table">
            <thead>
                <tr class="slds-line-height_reset">
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate">Opportunity Name</div>
                    </th>
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate">Stage</div>
                    </th>
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate">Close Date</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <template if:true={opps.data}>
                    <template for:each={opps.data} for:item="opp">
                        <tr class="slds-hint-parent"  key={opp.Id}>
                            <td>
                                <div class="slds-truncate" key={opp.Id}>{opp.Name}</div>
                            </td>
                            <td>
                                <div class="slds-truncate" key={opp.Id}>{opp.StageName}</div>
                            </td>
                            <td>
                                <div class="slds-truncate" key={opp.Id}>{opp.CloseDate}</div>
                            </td>
                        </tr>
                    </template>
                </template>


            </tbody>
        </table>

    </div>
</template>

Here is the RegionEx.js JavaScript controller.I n the component’s JavaScript class, use the @api decorator to create a public flexipageRegionWidth property. This property receives the width value of the region that the component resides in on the page.

 

import { LightningElement,api ,wire} from 'lwc';
import getOpp from '@salesforce/apex/GetOppList.getOpp';

export default class RegionEx extends LightningElement {
   @api flexipageRegionWidth;
   @wire(getOpp) opps;
}

Here are the RegionEx.css styles that we will used  based on the region

 .MEDIUM {
    background: red !important;
    background-color: lightblue !important;
    border: 10px solid yellowgreen !important;
}
 .SMALL {
    background: blue !important;
    background-color: royalblue !important;
    border: 10px solid blueviolet !important;
}

Here is the RegionEx.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>false</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>

</LightningComponentBundle>

 

Step 3: Push Changes to Scratch Org 

Now push the changes using this SFDX command

sfdx force:source:push

Add the Lightning web component to the record page and you can able to see the styles based on the region width of the page as shown below.