Device Form Factor in LWC Salesforce

by Rijwan Mohmmed
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”;

device-form-factor-in-lwc-salesforce
device-form-factor-in-lwc-salesforce

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 :

responsive-LWC-datatable-in-lwc-salesforce

Reference :

  1. Form Factor
What’s your Reaction?
+1
4
+1
2
+1
0
+1
0
+1
0
+1
2

You may also like

Leave a Comment