Given a scenario, display and use a custom user interface components, including Lightning Components, Flow, and Visualforce.

After studying this topic, you should be able to:

  • Determine the available features in Salesforce used for creating custom user interface components
  • Identify which feature to use and display to meet the requirement in a given scenario
  • Learn how to provide solutions using Lightning Components, Flow, or Visualforce

Table of Contents

  • Introduction
  • Lightning App Builder
  • Lightning Components
  • Quick Actions
  • Dynamic Forms
  • Dynamic Actions
  • Flows
  • Visualforce
  • Visualforce Page as Custom Tabs
  • Visualforce Page as Buttons or Links
  • Visualforce Page as Quick Actions
  • Visualforce Page in Page Layouts
  • Visualforce Page in Lightning Console Apps
  • Visualforce Page in the Mobile App
  • Lightning Stylesheet in Visualforce
  • Aura Components
  • Lightning Web Components
  • uiRecordApi Module
  • Navigation Module
  • Example Custom UI with Lightning Message Service
  • Scenarios and Solutions

Introduction

  • This page describes the available options in Salesforce that developers can use to build custom user interfaces.
    • Each feature or tool is designed to meet a particular need, and when given a scenario, a developer should be able to determine the options to use in order to meet requirements.
  • The following sections describe Lightning Components, Flow, and Visualforce and how to use them in a solution

Lightning App Builder

  • In order to build and display a custom user interface with Lightning Components, the Lightning App Builder is used. In Lightning App Builder, one can build:
    • Single-page apps that drill down into standard pages
    • Dashboard-style apps such as apps for tracking top sales prospects or performers
    • Utility apps that solve a particular task, such as an expenses-tracking app
    • Custom record pages for your standard or custom objects
    • Custom home pages containing popular components and features
  • Lightning Page Analysis Tool: tool in Lightning App Builder that calculates the page performance of a Lightning Record Page and identifies the components that have the most impact on page load time
    • When a custom Lightning component is added to a Lightning Record Page, the analysis tool may provide insights and recommendations related to the custom component to improve page performance

Lightning Components

  • A Lightning component is a compact, configurable, and reusable element that can be added to a Lightning page in the Lightning App Builder. Lightning Components use the Lightning framework to build dynamic web applications for desktop and mobile devices
    • Types of Lightning components: Standard (built by Salesforce), Custom (built by Salesforce Developers), Third-Party components (built by third-party developers or downloaded from AppExchange)
    • Lightning Component programming models: Aura components, Lightning Web Components
  • Example Standard Lightning Components:
    • Actions & Recommendations component: display a users to-do list
    • Record Detail component: displays fields and sections from the page layout associated with that component
    • Einstein Next Best Action component: Display recommendations and actions
    • List View Component: display the first few records from a list view
    • Recent Items component: display most recently used items
    • Dashboard component: display a dashboard on a Lightning page
    • Dynamic Related List - Single Component: display a single related list with options to filter, sort, limit records and others
    • Visualforce Page component: display a Visualforce page in a Lightning page
  • Custom Lightning Components: such as Aura and Lightning Web components appear in the Custom section in the Lightning Components pane of Lightning App Builder
    • Configuration: custom Lightning component is not readily available in Lightning App Builder nor for Lightning pages
    • My Domain: must be deployed
    • Page Support: custom Lightning component must be configured to be available in Lightning App Builder to support the necessary Lightning page types

Quick Actions

  • Custom global or object-specific quick actions can be created to invoke the following custom user interface components:
    • Flow, Visualforce, Aura components, Lightning Web components
  • When configuring the quick action, the Action Type determines the type of custom user interface component, for example, to invoke when a user clicks on the quick action button

  • Following shows an example configuration file of a Lightning Web component that can be launched using a quick action

Dynamic Forms

  • Dynamic Forms can be used to break up record details by migrating page layout fields and sections as individual page components in Lightning App Builder. Each component becomes configurable like any other component on a Lightning record page.
    • One way to start using Dynamic Forms is to launch the migration wizard by clicking on the Upgrade Now button on the Record Detail component properties of an existing Lightning record page. This process converts page layout sections and fields into components.
    • A Field component represents a single field on a custom object. The Field Section component is required before a field can be added to the Lightning page.

  • Like any other Lightning page component, the Field Section and Field components support visibility settings. Other configuration options are also available on each component

Dynamic Actions

  • Dynamic Actions can be used to dynamically control the visibility of Action buttons on a record page based on the values on the record. It helps in keeping the record page neat and streamlined.

Flows

  • Screen flows can be used to create a custom user interface for collecting user input or displaying information. Some of the features:
    • Multiple screens can be added to build a wizard or guided walkthrough
    • Custom Lightning components can be added to the flow screens
    • A variety of field types are supported such as radio buttons, picklist, file upload, etc
    • A Lookup screen component can be added to a flow screen for record search
    • The screen flow can be launched from a button click
    • Flows can be added to an Actions & Recommendations component
    • Flows can be embedded in a Visualforce page, Aura component, or Lightning web component
    • Fields on a screen flow can be conditionally shown or hidden

  • A flow can be embedded in a Visualforce page, Aura component, or Lightning web component
    • Following shows the Booking_Form that is embedded in a Lightning web component called myEmbeddedFlow

Visualforce

  • Visualforce framework provides a tag-based markup language and server-side controllers that enable developers to build custom user interface and features on the Salesforce platform
    • Visualforce can be used to:
      • Build wizards and other multi-step processes
      • Implement functionality in an application that uses custom logic or behavior
      • Define navigation patterns and data-specific rules for efficient application navigation
      • Serve as an application container for third-party JavaScript frameworks such as AngularJS or React
      • Generate and display a PDF document
  • Applications of Visualforce pages:
    • Custom Tabs: Custom tabs can be created for Visualforce pages and added to the navigation menu
    • Override Object Home Page: Tab home pages of standard or custom objects can be overridden with Visualforce pages
    • Buttons and Links: Visualforce pages can be launched using custom buttons and links, and standard buttons can be overridden.
    • Lightning Experience Stylesheets: Visualforce pages can use Lightning Experience styling and custom theming using the ‘lightningStylesheets’ attribute
    • Page Layouts: Visualforce pages can be embedded in page layouts of standard and custom objects
    • Dashboard Components: Visualforce pages can be used as data sources for dashboard components
    • Custom Console Components: Custom console components with Visualforce pages can be added to Sales or Service Console
    • Salesforce Mobile App Menu Items: A Visualforce tab can be added to the Salesforce Mobile App Navigation menu to enable it for Salesforce Mobile app users
    • Quick Actions in the Salesforce Mobile App: Visualforce custom actions can be created and added to Salesforce Mobile App and Lightning Experience Actions section
    • Lightning Pages: A Visualforce page can be added to a Lightning Page using the Visualforce Component in Lightning App Builder

Visualforce Page as Custom Tabs

  • Visualforce Tabs: Visualforce pages can be launched from the navigation menu using a Visualforce tab. A Visualforce tab can be created by configuring a custom tab in Setup
    • Display Options: A custom tab can be created to display either of the following options: custom object, web, Visualforce, Lightning component, or Lightning page
    • Direct Access: A Visualforce tab enables directly accessing a Visualforce page from a tab or navigation menu
    • Choose Page: The Visualforce page to display in the custom tab is selected when the tab is created
  • When choosing to create a new Visualforce tab, the Visualforce page to display is selected from a dropdown list

  • The following shows a Visualforce tab that is added to the navigation menu of a Lightning app and loads a chosen Visualforce page

  • The tab home page of a standard or custom object can be overriden with a Visualforce page
    • Overriding tabs only works when the Visualforce page uses the standard list controller for that tab, a custom controller, or no controller
  • Override tabs: A standard tab can be overridden to launch a Visualforce page. Tabs can be overridden in the Buttons, Links, and Actions tab in the Object Manager

  • The following shows a configuration where a Visualforce page is selected to override the standard Accounts tab

Visualforce Page as Buttons or Links

  • Overrides for Buttons, Links, and Actions: Standard buttons can be overridden independently for each user interface

  • Visualforce Page from a Button or Link: buttons or links can be configured to launch Visualforce pages
    • Custom Button: Custom buttons can be added to standard or custom objects
    • Buttons and Links: Buttons and links can be overridden to display Visualforce pages
    • Standard Buttons: Standard buttons, such as New, can be overridden using the action override screen. All experiences (Salesforce Classic, Lightning Experience, and Mobile) can be overridden on this screen
  • Overridable Standard Buttons/Links - following standard buttons can be overridden using a Visualforce page
    • New: Standard button used to create a new record
    • Edit: Standard button/link used to access the edit page of a record
    • View: Standard button/link used to access the detail page of a record
    • Delete: Standard button used to delete an existing record
    • Clone: Standard button used to clone an existing record
    • Tab & List: Tab is used to access an object’s home page, while List is used in related lists
  • Custom Buttons can be created for both standard and custom objects and added to a page layout

Visualforce Page as Quick Actions

  • Create a Quick Action: A quick action can be created to launch a Visualforce page. The following shows a sample quick action configuration for a Case standard object.

  • Enable a Visualforce Custom Action: Visualforce custom actions need to be added to Salesforce Mobile and Lightning Experience Actions section of the page layout to enable it for Salesforce Mobile App

Visualforce Page in Page Layouts

  • Inline Visualforce Page: An inline Visualforce page is a Visualforce page that is embedded in page layouts of a standard or custom object
    • Standard Controller: Visualforce page should use the standard controller of the standard or acustom object associated with the page layout in order for the page to be available in the page layout editor
  • Visualforce page below uses the standard controller for the Case object to display parent details
    • Visualforce Pages option in the page layout editor displays available Visualforce pages that can be embedded into the current page layout

  • Example Lightning record page below shows the embedded Visualforce page that displays parent case details

Visualforce Page in Lightning Console Apps

  • Visualforce pages can be added as components to page layouts or console apps
    • Sidebar: Visualforce components can be added to the sidebar on the right, left, top, or bottom
    • Footer: Visualforce components can also be added to the console’s footer
    • Layout: Multiple components can be added and arranged as stack, tabs, or accordion
    • Button: Look and feel of the button used to access the component can be specified
  • Following shows sample configuration of a custom console component using a Visualforce page that displays case record information

  • Console app below displays a custom console component in the sidebar using a Visualforce page

Visualforce Page in the Mobile App

  • Visualforce can be used to extend the Salesforce Mobile App:
    • Visualforce Tab: a new Visualforce tab needs to be created for a Visualforce page before it can be added as a menu item
    • Enable Page: Visualforce page needs to be enabled for Salesforce mobile apps and Lightning Pages in Setup
    • Added to Menu: Visualforce tab should be added to the Navigation Menu to make it available to Salesforce mobile app users
    • Visible to Profile: Tab should be visible to the profile that needs to access it as a menu item in the Salesforce mobile app
  • Salesforce Navigation setting determines the Mobile Only navigation menu items in the Salesforce mobile app

  • Salesforce mobile app supports quick actions which can be used to access Visualforce pages
    • Action Bar: Salesforce can connect social profiles to leads, person and business accounts, and contacts
    • Page Layout: The Visualforce custom action can be added to the page layout of the object in order to enable it for the Salesforce mobile app
    • Override Action: Predefined actions need to be overridden in the Salesforce Mobile App and Lighting Experience Actions section

Lightning Stylesheet in Visualforce

  • Visualforce Pages with Lightning Experience Stylesheets: Visualforce pages can be styled with the look of Lightning Experience when viewed in Lightning Experience or the Salesforce mobile app
    • SLDS Components: The <apex:slds/> tag with custom Salesforce Lightning Design System (SLDS) code can be used to include SLDS components that are not part of the Visualforce component library
    • Default Styling: Some Visualforce components such as <apex:selectOptions>, <apex:selectRadio>, <apex:inputFile>, and some <apex:inputField> elements use the browser’s default styling instead
    • No Styling Required: The Visualforce components such as <apex:form>, <apex:outputText>, and <apex:param> do not require styling
  • The following Visualforce page markup will render components in the Lightning Experience interface using Lightning Experience UI styling

  • A Visualforce page with lightningStylesheets set to true uses the Lightning Experience UI styling when accessed in Lightning Experience

  • Following is another Visualforce page example that uses the Lightning stylesheets. Note that Visualforce pages can also be accessed or launched directly or through its own URL

Aura Components

  • Before an Aura component can be used, for example, in Lightning App Builder or added to a Lightning page, it must implement one of what is called an interface

  • If an Aura component needs to retrieve the Id or object API name of the record in a Lightning record page where it is added, the following interfaces can be used

  • An interface is implemented in an Aura component by specifying the name of the interface in the implements attribute of the component markup. A component can support multiple interfaces

  • A component attribute can be exposed in Lightning App Builder, Experience Builder, or Flow Builder by specifying a <design:attribute> in a design resource file, which is included in the component bundle

  • An Aura component can be configured to exclusively support specific devices or sObjects by defining the following tags in the design resource file
    • <design:supportedFormFactors> AND <design:supportedFormFactor>: To support desktop devices only, the value “Large” is used in the tag. To support phone devices only, “Small” is used. If no tags are specified, the component will automatically support the devices supported by the Lightning page it is used in
    • <sfdc:objects> AND <sfdc:object>: To make an Aura component available only to the record pages of a specific object or objects, the object API names are added using these tags. Note that these tags are not supported in Experience Builder or Flow Builder

Lightning Web Components

  • Configuration File: Similar to an Aura component’s design resource file, a Lightning web component uses a configuration file for the following:
    • Distribute: Allow the component to be used in Lightning App Builder and in managed packages
    • Page Types: Specify which Lightning page types are supported by the component
    • Properties: Configure which attributes will be exposed to builder tools such as Lightning App Builder
    • Devices: Specify the devices that the Lightning web component will only support
    • Objects: Specify the objects of the record pages where the component can only be used
  • To make a Lightning web component available in App Builder, the isExposed metadata value must be set to true in its configuration file, and at least one<target> is specified. Below lists some targets

  • Record or Object Awareness: If a Lightning web component needs to retrieve the Id or object API name of the record where it is used, the public properties recordId or objectApiName respectively need to be added in the component

  • Public properties in a Lightning web component can be exposed in Lightning App Builder, Experience Builder, or Flow Builder, by adding the corresponding <property> subtags in the configuration file

  • A Lightning web component can be configured to exclusively support specific devices or sObjects by defining the following tags in the configuration file
    • <supportedFormFactors> AND <supportedFormFactor>: To support desktop devices only, the type “Large” is used. To support phone devices only, the type “Small” is used. If no tags are specified, the component will support the devices supported by the Lightning page it is used in
    • <objects> and <object>: To make a Lightning web component available only to the record pages of a specific object or objects, the object API names are added using these tags. Note that these tags are not supported in Experience Builder or Flow Builder

uiRecordApi Module

  • Built on top of Lightning Data Service, the uiRecordApi module includes wire adapters and APIs that can be used to process records without writing Apex code. Some of the functions are summarized below
    • getRecord: This function is used to retrieve data of a single record by specifying the record ID and the fields to retrieve
    • updateRecord: This function is used to update a record and requires an object parameter called RecordInput, which contains data of the existing record to update
    • createRecord: This function is used to create a new record and requires an object parameter called RecordInput, which contains data of the new record to create
    • deleteRecord: This function is used to delete a record by passing the ID of the record to delete as its parameter
  • Lightning Web Component Controller: The following illustrates how the functions are being used to create, update, delete, and get record details in a single custom Lightning component example called uiRecordApiExample

  • Lightning Web Component Markup: The Lightning web component markup uses standard Lightning components for creating, updating, and viewing records

  • Creating a New Record: Clicking the Create Account button on the user interface invokes the handleCreateRecord() function

  • Editing a Record on the Table: To edit a record inline on the table, click on the pencil icon that appears when hovering on the cell

  • Viewing More Details of a Record: When the View button is clicked, the handleRowAction() function in the controller is invoked

  • Deleting a Record from a Table: When the Delete button is clicked, the handleRowAction() function in the controller is also invoked.

  • Editing Multiple Rows in a Table: The uiRecordApiExample shown in the previous slides is capable only of updating one record at a time. To update multiple records efficiently in a single transaction, Apex should be used. Here is an example

  • The following shows the updateRecords Apex method on the AccountController class that is used to update records in bulk

  • Using Apex is the recommended option when multiple rows need to be updated in a single transaction

  • Lightning datatable comes with many other UI and functional features:

  • Lightning web components can use the navigation service to navigate to different page types. Instead of a URL, the navigation service uses a PageReference, which is an object defined with the properties:
    • Type: The type property is a required string value that represents the target page type such as a record page, list view, object, or other types including files
    • Attributes: The attributes property is a required object parameter that contains name-value pairs of attribute values that define the target page
    • State: The state property is an optional object depending on the target page type that contains a set of key-value pairs used to customize content in the target page
  • To use the navigation service, NavigationMixin is imported from the lightning/navigation module. This example Lightning web component shows how it uses the service for navigating.

Example Custom UI with Lightning Message Service

  • Lightning Message Service is a service which enables the following technologies to communicate with each other within a single Lightning page or between multiple Lightning pages
    • Visualforce Pages: The global variable $MessageChannel is used to access the service
    • Lightning Web Components: The scoped module @salesforce/messageChannel is used to access the service
    • Aura Components: The Aura component lightning:messageChannel is used to access the service
    • Utility Bar Components: Standard or custom Lightning components utility items can also use the service
  • Lightning message Channel: The Lightning Message Service is based on Lightning Message Channels, which is metadata used as an exclusive channel by components to subscribe and publish messages to

  • A Lightning web component uses the @salesforce/messageChannel scoped module to reference a message channel

  • An Aura Component subscribes to a Lightning message channel using the <lightning:messageChannel> component where the channel name and message handler is specified

  • A Visualforce page accesses the $MessageChannel global variable to reference a Lightning message channel and uses the sforce.one object to subscribe and publish messages

  • Following uses code from above and shows a Lightning web component and an Aura component communicating with each other in a Lightning App page

  • Lightning Message Fields: The lightningMessageFields is a configuration field that can optionally be added to the configuration file to represent a list of the message payload fields in the current Lightning Message Channel

Scenarios and Solutions

Reference FoF Slides