Configure Your Component for Different Form Factors

Configure a component to display on a Lightning app page when the page is rendered in desktop format (Large), phone format (Small), or both.

In the <targetConfigs> section of the component’s configuration file, use the <supportedFormFactors> tag set to declare which form factors the component supports for a page type.

If you don’t define <supportedFormFactors>, the component supports the form factors that the page type supports. However, we recommend defining <supportedFormFactors> for each page type.

App and record pages support the Large and Small form factors. Home pages support only the Large form factor.

Components on app and record pages can render on both phone and desktop because those pages support both phone and desktop. Components on Home pages can render only on desktop because Home pages support only desktop.

This sample component is supported on three page types: app, record, and Home. On app pages, it’s configured to render only on devices with a Small form factor. When a user views an app page on a device with a Large form factor, the component doesn’t render.

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>42.0</apiVersion>
4    <isExposed>true</isExposed>
5    <masterLabel>Best Component Ever</masterLabel>
6    <description>This is a demo component.</description>
7    <targets>
8        <target>lightning__RecordPage</target>
9        <target>lightning__AppPage</target>
10        <target>lightning__HomePage</target>
11    </targets>
12    <targetConfigs>
13        <targetConfig targets="lightning__AppPage">
14            <property name="prop2" type="Boolean" />
15            <supportedFormFactors>
16                <supportedFormFactor type="Small" />
17            </supportedFormFactors>
18        </targetConfig>
19        <targetConfig targets="lightning__RecordPage">
20            <property name="prop1" type="String" />
21            <supportedFormFactors>
22                <supportedFormFactor type="Large" />
23            </supportedFormFactors>
24        </targetConfig>
25        <targetConfig targets="lightning__HomePage">
26            <property name="prop3" type="Integer" />
27            <supportedFormFactors>
28                <supportedFormFactor type="Large" />
29            </supportedFormFactors>
30        </targetConfig>
31    </targetConfigs>
32</LightningComponentBundle>

Once a component is in use on a Lightning page, you can only increase the supported form factors for the component, not decrease them.

Note

See Also