Form factors and responsive component markup
Two layers decide what a phone, tablet or desktop user sees: supportedFormFactors in the LWC configuration file or Aura design resource decides whether a Lightning page renders the component at all, while @salesforce/client/formFactor, $Browser and lightning-layout device sizes decide how its markup adapts.
Identify aspects of LWC or Aura Components that can cause a component's markup to display in a responsive manner based on form factor.
~8 min read · 8 practice questions ·
What the exam expects
- Restrict a Lightning web component or an Aura component to desktop, phone or both on a Lightning page type, and predict when a page drops it.
- Know which page types support which form factors, and why a deployment that removes a form factor fails.
- Render different markup per device inside one component:
@salesforce/client/formFactorin LWC,$Browserin Aura. - Read
lightning-layoutandlightning-layout-itemmarkup and work out each item's width on a phone, tablet and desktop.
Key terms: form factor (the device class: Large desktop, Medium tablet, Small phone), supportedFormFactors (the configuration that tells a Lightning page on which devices to render the component), global value provider (an Aura expression source such as $Browser), device-size attributes (small-, medium- and large-device-size on a layout item), mobile-first (the base size applies first and larger devices override it).
Key facts
- Detail
<supportedFormFactors>inside a<targetConfig>of.js-meta.xml
- Detail
<design:supportedFormFactors>in the.designresource
- Detail
Large(desktop) andSmall(phone)
- Detail
- App and record pages: Large and Small; Home pages: Large only
- Detail
- Component supports the form factors its page type supports
- Detail
- Supported form factors can be increased, not decreased
@salesforce/client/formFactor values- Detail
Largedesktop,Mediumtablet,Smallphone
$Browser in Aura- Detail
formFactor,isPhone,isTablet; markup expressions or$A.get()
size- Detail
- Setting any device-size attribute requires
sizetoo
- Detail
- Each applies to its device size and larger
multiple-rows- Detail
- Items wrap when they exceed the layout width; default false
Sources for this section (6)
- Configure Your Component for Different Form Factorsdeveloper.salesforce.com (opens in a new tab)
- Aura Component Bundle Design Resourcesdeveloper.salesforce.com (opens in a new tab)
- Access Client Form Factordeveloper.salesforce.com (opens in a new tab)
- $Browserdeveloper.salesforce.com (opens in a new tab)
- lightning-layout-itemdeveloper.salesforce.com (opens in a new tab)
- lightning-layout specificationdeveloper.salesforce.com (opens in a new tab)
- Why does a component on a Home page never render on a phone, even when its configuration declares `Small`?
- When is removing a form factor from a component's configuration rejected?
- Which value does `@salesforce/client/formFactor` return on a tablet?
- Why must an item that sets `medium-device-size` also set `size`?
- How does an Aura component show different markup on phones without a second component?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the Platform Developer II pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 28 lessons of the Platform Developer II guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (8 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams