User Interface · Topic 3 of 3
Programmatic Lightning Component Customizations
When Salesforce UI needs code: Lightning web components, Aura and Visualforce, exposing components to Lightning App Builder and flows, and access to Apex.
- 4 min
- LWC is the recommended technology for new custom components; Aura and Visualforce are older.
- Developers expose components to page types, flows and actions; builders then place them.
- Design properties let builders configure components without code.
What it is
When standard components, Dynamic Forms and screen flows cannot produce the interface a business needs, a developer builds a custom component. The app builder does not write the code, but must know when code is needed and how to use the finished component with clicks.
Salesforce has three programmatic UI technologies: Lightning Web Components (LWC), the current standard; Aura components, the older Lightning framework; and Visualforce, the original page framework.
How it works
The three technologies
| Technology | Notes |
|---|---|
| Lightning Web Components | Built on web standards; recommended for new components |
| Aura components | Older framework; still supported; can contain LWCs |
| Visualforce | Page-based framework from Salesforce Classic; can be shown in Lightning Experience |
When a custom component is needed
- A visual interaction no standard component offers, such as drag-and-drop scheduling, a drawing pad or a signature capture.
- A screen flow input that standard screen components cannot provide.
- Combining data from several sources into one specialized view.
- Reusing an existing Visualforce page inside Lightning Experience.
If a standard component, Dynamic Forms or a screen flow can meet the need, that is still the expected answer.
Where a builder can use a custom component
A developer decides where a Lightning web component can be used by setting its targets in its configuration file. Depending on those targets, the builder can:
| Place | How |
|---|---|
| Lightning App Builder pages | Drag it onto record, app or home pages |
| Screen flows | Add it to a flow screen |
| Quick actions | Launch it from an object-specific action |
| Lightning component tabs | Open it from the app's navigation bar |
| Experience Builder sites | Use it on community pages |
A developer can also add design properties, so the builder configures the component, such as a title or a record limit, in Lightning App Builder without code.
If a deployed component does not appear in Lightning App Builder, it usually has not been exposed for that page type.
Visualforce in Lightning Experience
- Add Visualforce pages to Lightning pages with the Visualforce component, to tabs, to quick actions or to buttons.
- A page must be marked Available for Lightning Experience, Experience Builder sites, and the mobile app to appear in some of these places, such as the mobile app.
- Only Visualforce pages built for the right object appear for object-specific buttons and actions.
Access to custom components
Components often call Apex classes. If a user sees an error that they cannot access an Apex class, grant Apex class access through their profile or a permission set. Components installed from a managed package cannot be edited, but can be placed and configured like any other.
A worked example: dispatchers need to drag job cards onto hourly slots in a weekly grid on the Service Appointment page. No standard component does this. A developer builds a Lightning web component exposed to record pages with a design property for the number of days shown. The builder adds it to the record page in Lightning App Builder, sets the property to five days, and grants dispatchers access to the Apex class it calls through a permission set.
The app builder's job with code is to recognise when it is needed and then configure the result with clicks.
How the exam asks about this
- "A drag-and-drop interface that no standard component offers." A Lightning web component.
- "A new component does not appear in Lightning App Builder." Check that it is exposed to that page type.
- "Users get an Apex class access error." Grant Apex class access.
What to remember for the exam
- LWC is the recommended technology for new custom components; Aura and Visualforce are older.
- Developers expose components to page types, flows and actions; builders then place them.
- Design properties let builders configure components without code.
- Visualforce can appear in Lightning pages, tabs, buttons and actions.
- Users need Apex class access when a component calls Apex.
Placing a component on a page does not grant data access. Users still need object, field and Apex class permissions.
Common mistakes
Choosing code when Dynamic Forms or a screen flow would work. Clicks first.
Expecting every component to appear everywhere. It must be exposed to that target.
Editing a managed package component. It can be configured, not changed.
Check yourself
Which UI technology does Salesforce recommend for new custom components?
Lightning Web Components.
Why might a deployed Lightning web component be missing from Lightning App Builder?
It has not been exposed to that page type in its configuration.
How can a builder configure a custom component without code?
Through design properties the developer added, set in Lightning App Builder.
Topic 3 of 3 in User Interface
Test yourself on User Interface
The full Salesforce Platform App Builder question bank has 648 questions, with timed practice exams and an explanation for every answer.
This study guide is independent and is not affiliated with, endorsed by, or sponsored by Salesforce. Vendor names, certification names and exam codes are trademarks of their respective owners and are used for identification only.