Device Form Factor in LWC Salesforce

Hello folks, today we are going to discuss the Device Form Factor in LWC Salesforce. By using Form Factor in LWC we can configure components accordingly. Like, show different designs in mobile view and desktop view. By default, all LWC components are available for the desktop view but for the mobile view, we need to put the design attributes in the XML file with the supported type.

Also, check this: Field Set in Apex LWC Salesforce

Key Highlights :

1. We can recognize the device and set the design accordingly.
2. Form Factor necessary for mobile view salesforce view.
3. We use import FORM_FACTOR from “@salesforce/client/formFactor”;

Code :

Here I create an LWC component with an LWC data table that is responsive according to the device.

formFactorLWC.HTML :

<template>
	<lightning-card title="Device Form Factor in LWC Salesforce">
		<div class="slds-var-m-around_medium">
			<b>You are viewing it from {deviceType} and Table below</b>
		</div>
		<div>
			<lightning-datatable key-field="id" data={data} columns={columns}
				class="slds-max-medium-table_stacked-horizontal">
			</lightning-datatable>
		</div>
	</lightning-card>
</template>

formFactorLWC.JS:

import { LightningElement } from "lwc";
import FORM_FACTOR from "@salesforce/client/formFactor";
const columns = [
    { label: 'Name', fieldName: 'name' },
    { label: 'Website', fieldName: 'website', type: 'url' },
    { label: 'Type', fieldName: 'type' }
];

export default class FormFactorLWC extends LightningElement {
    deviceType;
    columns = columns;
    data = [
        { id: 1, name: 'Ankit', type: 'CS', website: 'https://techdicer.com/' },
        { id: 2, name: 'Rijwan', type: 'EC', website: 'https://techdicer.com/' },
        { id: 3, name: 'Himanshu', type: 'MEC', website: 'https://techdicer.com/' },
    ];

    connectedCallback() {
        this.handleFormFactor();
    }

    handleFormFactor() {
        if (FORM_FACTOR === "Large") {
            this.deviceType = "Desktop/Laptop";
        } else if (FORM_FACTOR === "Medium") {
            this.deviceType = "Tablet";
        } else if (FORM_FACTOR === "Small") {
            this.deviceType = "Mobile";
        }
    }
}

formFactorLWC.js-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
	</targets>
	<targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <supportedFormFactors>
                <supportedFormFactor type="Small" />
				<supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Output :

Reference :

1. Form Factor