Width Detection of the Lightning Web Component

Dealing with screens of different sizes on almost every platform can be very challenging.

In Salesforce, when developing custom components, we need to consider not only that the component will be displayed on different screens but also that it might be in different areas of the screen. For example, if we develop a component for lightning pages, it can be added as the main region, left side, or right region.

In most cases, we would prefer to let the Salesforce shell take care of it for us, and indeed, most of the time, if we use the right CSS elements, it should work fine.

Still, there will be times when we need to use a different display for different screen widths.

In the following example, you can see an implementation of a calendar that displays seven days across the screen width. When the screen is too narrow, it reduces the width of each cell, but at a certain level, the width will become so narrow that it won't be possible to insert anything in the cell, so the implementation is that on narrow screens, the display will be slightly different.

How can this be done? How can we identify the width of the screen, or rather, the width of our component?

First, note that if we are only interested in the size of the screen, it is possible and recommended to use a CSS media query. This allows us to set different styling CSS based on the type and size of the screen.

However, in this case, we want to use the component size, so we will use other solutions.

1. A relatively simple solution is to use the variable that Salesforce prepared for us: flexipageRegionWidth.

The possible values ​​are SMALL, MEDIUM, and LARGE and it is indicate the width of our component, not the width of the screen.

In order to use it, all we need to do is set api variable with this name, and then we can build logic based on that.

@api flexipageRegionWidth;

get isnarrowscreen(){
    return this.flexipageRegionWidth == 'SMALL';
}

<template lwc:if={isnarrowscreen}>
	narrow
</template>

<template lwc:else>
	wide
</template>

After adding a component with this code twice to a lightning page, this will be the result

• In the same area, it is worth noting that it is also possible to know the type of user's device (desktop, table or phone) by importing the formFactor model. 

2. In some cases, we will want higher accuracy and not necessarily sizes like SMALL, MEDIUM, and LARGE. There are several variables that can be accessed in javascript that will allow us to read the width of the screen, but the tricky part is detecting the width of our component. One of the techniques for this purpose is to measure the distance in one of the UI components.

For example, I added in the component variable compWidth and calculate it based on the right-left of the element "main".

@api flexipageRegionWidth;
compWidth;

get isnarrowscreen(){
	return this.flexipageRegionWidth == 'SMALL';
}

connectedCallback(){
	this.setCompWidth();
}

setCompWidth(){
	let containerElem = this.template.querySelector(".main");

	if(containerElem){
		this.compWidth = containerElem.offsetWidth;   
	}
}

<template>
    <div class="main">
        <template lwc:if={isnarrowscreen}>
            narrow
        </template>

        <template lwc:else>
            wide
        </template>
        <br/>
        width: {compWidth}
    </div>

</template>

The result:

3. Notice that in the examples above, there is no treatment in cases where the width changes. For example, when the user expands or narrows the window, one option for handling that is to set a resize event. This way, any time the window size is changed, we will invoke the method that recalculates the dimensions.

In the javascript code, I will add one line that listens to the resize event:

@api flexipageRegionWidth;
compWidth;

get isnarrowscreen(){
	return this.flexipageRegionWidth == 'SMALL';
}

connectedCallback(){
	this.setCompWidth();

	window.addEventListener('resize', ()=> this.setCompWidth());
}

setCompWidth(){
	let containerElem = this.template.querySelector(".main");

	if(containerElem){
		this.compWidth = containerElem.offsetWidth;   

	}
}

The result:

Finally, it is worth noting that messing with the width and different displays increases the complexity of the development, and in most cases, it is recommended to let the platform determine the correct display for the components. When we decide that there is a need for such customization, we should take into account that we are taking responsibility for an important part that may require more maintenance.