User Interface

User Interface Introduction

  • Per MW, this is the most changed section from the old DEV 401 course
    • A transition exam is available for people who hold DEV 401 and are trying to transition into holding PAB certifications
  • In the past, only needed to use enhanced page layout editor, not need to be able to configure Lightning Experience user interface, customize lightning pages in Lightning App Builder, etc
    • As well as Mobile: Compact Layouts, Global Actions, Object-specific actions, etc

Introducing the Enhanced Page Layout Editor

  • Accessed from Object Manager > Page Layouts for any object
  • When viewing fields, can click greyed out fields (which indicates they are already present on the page layout), and the field will flash on the page layout to help you find them
  • Report charts are available to be added to page layouts
  • Components can hold visual force pages that have been set up for the object
  • The Preview As drop down allows you to preview the page layout as a different user

Working with Fields in the Enhanced Page Layout Editor

  • Change the page layout to be a 1- or 2-column layout by clicking the wrench at the top of each section
    • Can also change whether each section is visible by Default of just when Editing records
  • Can specify that fields are required or read-only on the Page Layout
    • In addition to being read-only at the profile level

Working with Buttons in the Page Layout

  • In Lightning, Salesforce is moving away from Custom Buttons and Links and towards Actions. Lightning Experience does not support custom Javascript in buttons, for example.
    • Old orgs may have buttons that need to be converted to Actions to be Lightning friendly

Working with Custom Links in the Page Layout

  • Custom links are created in the Buttons, Links, and Actions section of the object manager and created by using the “Detail Page Link” display type
  • Once a custom link has been created on the object, the “Custom Links” section will be available on the Page Layout editor

Working with Quick Actions in the Page Layout

  • “Quick Actions in the Salesforce Classic Publisher” section of the page laytout editor is specific to Salesforce Classic

Working with Expanded Lookups in the Page Layout

  • “Expanded Lookups” are the same as “Mobile Cards” and are specific to the mobile app
  • The cards show up under the “Related” tab

Working with Related Lists in the Page Layout

  • Related Lists have to do with any records that are related to the record that you are on
  • Can customize:
    • Which fields are included in the related list
    • Sort order for the related records
    • Which buttons are available on the related list

Working with Report Charts in the Page Layout

  • Report Charts can be added to page layouts

Working with Components in the Page Layout

  • Mobile Cards (AKA Expanded Lookups) can also contain “Components”

Working with Visualforce Pages in the Page Layout

  • In Classic, the “Edit Layout” link available behind the gear icon in the top right would take you to the page layout. In Lightning, the same button takes you to the Lightning App Builder.
  • At time of these notes, “Visualforce Page” was not available from within the Page Layout editor. MW expects that it will be soon.
  • MW recommends the app Layout Page as a tool to assist with generating visualforce code. At time of these notes the package does not appear to be available any longer. Appears to have been replaced by Visualforce Builder.

  • To see the Apex code editor on a visualforce page, need to check the box “Development Mode” on a User record. Then, to quickly create a new visualforce page, can navigate to a link like https://...visualforce.com/apex/sampleaccount. Then, click the link to “Create Page sampleaccount.”
    • Can adjust the code in the page and save it.
    • Changed first line from <apex:page> to <apex:page standardController="Account" sidebar="false" showHeader="false">
  • Once a Visualforce page has been created that calls the standardController for accounts (ref line above), Visualforce Page will be available under the Page Layouts column. The page can then be added to the Page Layout. Behind the wrench icon, the width, height, and other attributes can be adjusted.

Adding Sections and Blank Space to a Page Layout

  • Sections and Blank Space are available in the “Fields” section of the page layout editor

Page Layout Assignments

  • Page Layouts can be assigned by record type, by profile

Automate Page Layout Change When Opportunity Closed

  • Record types on Opportunity are assigned specific Sales Processes.
    • By making a record type specific to a Sales Process that only has “Closed Won” as a stage, its possible to make the Page Layout change automatically once that stage of the Sales Process has been reached.
      • This is one way of locking down the “Stage” field on opportunities - you can have it become “Read-Only” on a Page Layout with a Sales Process specific to the “Closed Won”

Introducing the Path - Formerly Known as Sales Path

  • Paths can have specific fields highlighted at different stages of the process, called “Key Fields.” “Guidance for Success” can also be specified. Clicking “Edit” on that “Key Fields” screen will present a window wherein users can edit just those specific fields.
    • Setup the path via: Setup > User Interface > Path Settings

Page Layout Edits impact on Lightning Experience

  • At time of writing these notes, both Lightning and Classic user interfaces are available on the platform. Page Layout edits to one interface also impacts the other.

Creating Custom Buttons

  • MW demoed an example of a Custom Button that executed Javascript. At time of writing these notes, adding a custom button with Javascript results in a flag in Lightning Experience “JavaScript custom buttons may reduce application security and block compatibility with Lightning Experience. We advise against using these buttons.”
  • Same note as above: Custom Links that execute Javascript block compatibility with Lightning Experience.

Creating Quick Actions

  • Quick Actions are more fully-supported than either Custom Buttons or Custom Links
  • At time of these notes, Quick Actions can:
    • Create a Record, Send Email, Log a Call, Custom Visualforce, Update a Record, Lightning Component, Flow
  • To add a Quick Action to Lightning Experience, need to click “override the predefined actions” link to set a customized list of actions.
  • Quick Actions show up in the Activity section of a Page.

Custom Tabs

  • Five types of Custom Tabs can be created:
    • Custom Object Tabs
    • Web Tabs: shows a website within the Salesforce org, but per MW, websites now often block cross-site embedding of websites within i-Frames, so Web Tabs may not work.
    • Visualforce Tabs: For example, the page that the Page Layout app had included with their app was a Visualforce Page.
    • Lightning Component Tabs
    • Lightning Page Tabs

Lightning App Builder Tool Introduction

  • Access via: Setup > Quick Find > “app builder” > Lightning App Builder.
    • Lighting Pages are built using Lighting Components which are lightweight, configurable, and reusable elements that you can drag and drop into regions of the page using Lightning App Builder
  • Need to create a Lightning Page in order to use the App Builder tool. We are presented with a few options:
    • App Page
    • Home Page
    • Record Page

Lightning Pages

  • Three examples of Lightning Pages Components come installed in every Trailhead org:
    • tt_install_package_cmp
    • tt_login_cred_cmp
    • tt_welcome_cmp
  • The Home tab is its own Lightning Page that can be customized.

Lightning Components

  • Standard Components
    • Filter List: List View of a selected object
    • Recent Items: Shows recently updated items from one or more selected objects
    • Rich Text: Displays a message for the user
    • Visualforce Page
    • Sales Path
  • Create a new Lightning Component via Gear Icon > Developer Console > File > New > Lightning Component

Lightning App Builder Sample Exam Question #1 from Study Guide

  • Where can a Standard Lightning Component be placed in the Lightning App Builder tool?
    • Canvas

Updating the Page Layouts for our IMDb Clone App

  • To create Lightning Pages for individual objects, view an object’s record page, then gear icon > Edit Page
  • MW presented options for how Lightning Pages could be set up for the pages of his IMDB clone app. His examples primarily focused on Related Lists.

Providing Localization in the Interface via the Translation Workbench

  • Access Translation via: Setup > Quick Find > “Translation” > Translation Language Settings
    • Involves specifying translators for a variety of languages, who can then provide translations for various labels, field names, object names, etc on the org.
    • Also possible to use “Export” and “Import” to send and receive files with the translatable text and the translated text, respectively
  • Changing the “Locale” for users will result in their seeing a specified language