Custom UI with Visualforce, Aura Components and Screen Flows

What it is

Salesforce offers several ways to build custom user interfaces:

• Lightning Web Components: the default for new components.
• Aura components: the original Lightning component model, still used in older code and some containers.
• Visualforce: server-rendered pages with Apex controllers, the classic framework.
• Screen flows: declarative wizards, which can include custom Lightning Web Components.

The exam asks you to choose among them and to read Visualforce and controller code.

How it works

Choosing a UI technology

Visualforce controllers

<apex:page standardController="Opportunity" extensions="OppExtension">
    <apex:form>
        <apex:inputField value="{!Opportunity.Amount}"/>
        <apex:commandButton action="{!save}" value="Save"/>
    </apex:form>
</apex:page>

public with sharing class OppExtension {
    private final Opportunity opp;
    public OppExtension(ApexPages.StandardController std) {
        this.opp = (Opportunity) std.getRecord();
    }
}

An extension's constructor takes the controller as its only argument. When several extensions define the same method, the leftmost extension in the list wins, and extensions override the controller.

Visualforce limits and features

• View state holds the page's state between requests and is limited to 170 KB.
• ApexPages.StandardSetController paginates up to 10,000 records.
• readOnly="true" on apex:page raises the query row limit for pages that make no DML.
• <apex:actionFunction>, rerender and <apex:actionSupport> refresh parts of the page.
• Visualforce can be used in Lightning Experience and wrapped in Lightning pages.

Aura components

An Aura component can contain Lightning Web Components; an LWC cannot contain Aura.

Screen flows with custom components

A Lightning Web Component can be a screen component in a flow. Its meta file uses the target lightning__FlowScreen, and @api properties become inputs and outputs in Flow Builder. The component can block Next with a validate() method and move the flow with FlowNavigationNextEvent.

A worked example

Sales wants a printable quote document from an Opportunity with its line items. An LWC has no built-in way to render a page as PDF, but a Visualforce page can, with renderAs="pdf" and a standard controller on Opportunity plus an extension that loads the line items. A quick action or button opens it. For a multi-step discount request that admins maintain, a screen flow is the better choice.

How the exam asks about this

• "Two extensions both define save(). Which runs?" The leftmost extension in the list.
• "Paginate thousands of records in Visualforce." StandardSetController.
• "Use a custom component inside a flow screen." An LWC with the lightning__FlowScreen target.