Project: Mobile Sales Workspace
By the end of this lesson, you'll be able to:
- Apply Module 18's mobile-first practices to a real, on-the-go sales workspace
- Design tap-friendly quick actions rather than hover-dependent ones
- Declare supportedFormFactors for a genuinely mobile-first component
Prerequisites: "Project: External API Integration Component"
What We're Building
A mobileSalesWorkspace component showing a rep's today's tasks and quick actions — designed mobile-first this time, rather than retrofitted (contrast with Module 18's capstone, which converted an existing desktop component).
Declaring Mobile Support From the Start
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<supportedFormFactors>
<supportedFormFactor type="Small" />
<supportedFormFactor type="Large" />
</supportedFormFactors>
</targetConfig>
</targetConfigs>Tap-Friendly Quick Actions
<div class="slds-grid slds-wrap slds-gutters">
<template for:each={quickActions} for:item="action">
<div key={action.id} class="slds-col slds-size_1-of-2 slds-medium-size_1-of-4">
<lightning-button
label={action.label}
icon-name={action.icon}
onclick={handleQuickAction}
data-action={action.id}
class="slds-p-around_x-small">
</lightning-button>
</div>
</template>
</div>Every action here is a full lightning-button, comfortably tappable by design (Module 18) — no hover-revealed menus or tiny custom icons that would work fine with a mouse but poorly with a finger.
Exercise
Explain, as a comment, what distinguishes this project's approach from Module 18's capstone conversion project.
Show hint
Think about when mobile support was considered in each case.
Exercise
Challenge: why does this component use lightning-button for every quick action instead of small custom clickable icons?
Show hint
Recall Module 18's tap-target-sizing lesson.
Project: Mobile Sales Workspace Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
A sales rep's on-the-go workspace, built mobile-first per Module 18 — declared Small form-factor support, a responsive single/two-column layout, and tap-first quick actions from the start.