In this chapter, we will cover the following recipes:
- Building a custom Admin Home page in Lightning Experience
- Cloning the standard Home page for a customized Lightning Experience
- Composing a system notification message on the Lightning Experience Home page
- Providing a system support email link on a customized Home page
- Creating a personal setup link on a customized Home page
- Generating a filtered report link on a customized Home page
- Developing a Lightning component to display a custom logo on a customized Home page
The Home
tab in Salesforce CRM Lightning Experience is generally set as the opening page for users when they first log into the application.
Users of Salesforce like having access to the information and data that is most relevant to them in a quick and easy fashion, and landing on a customized Home page is usually preferred by most users.
Out of the box, the Home page in Salesforce CRM Lightning Experience provides a great way for users to view sales performance and opportunity top deals, tasks and events, account news, recent records, and so on. The following screenshot shows the Salesforce CRM Home
tab screen:

The Home
page in Salesforce CRM Lightning Experience allows various standard Home page components to be shown, such as Quarterly Performance
, Today's Events
, or Top Deals
(as shown in the preceding screenshot).
In addition to the standard components, it is possible to create custom components with functionality that is not provided by default. Both types of components can be made available to users by customizing the Home page layouts and assigning different Home page layouts to different users based on their profile.
The following recipes are designed to improve the usefulness and relevance of the Home page and also provide additional features and functionality that are not provided natively within the Salesforce CRM application.
The sales performance or opportunity top deals components, which are provided out of the box on the Home page, give sales people a very good insight into their sale activities. However, sales performance may not necessarily be relevant to or desired by non-sales users with job functions in other areas, such as marketing, service, finance, or even Salesforce system administration.
Rather than presenting the default Home page to all users in all business functions, you can create custom Home pages with features relevant to specific types of users, and assign the customized pages to different user profiles with Lightning App Builder in Lightning Experience.
There are two methods of creating custom Home pages in Salesforce CRM Lightning Experience. These methods involve either editing an existing Home page or creating a new page using a Home page template.
In this recipe, we will create a new custom Home page using Lightning App Builder and a Home page template.
Carry out the following steps to build a new custom Home page using Lightning App Builder:
- Click on the Setup gear icon at the top right of the main Home page, as shown in the following screenshot:

- Click the
Setup
option, as shown in the following screenshot:

- Type
app builder
in the Quick Find search box, as shown in the following screenshot:

- Select the
Lightning App Builder
option. - Click the
New
button, as shown in the following screenshot:

- In the resulting
Create a New Lightning Page
dialog, choose theHome page
Lightning Experience page type, as shown in the following screenshot:

- Click on
Next
. - Now enter
Admin
in theLabel
box presented in the next dialog and then click onNext
.
- In the final dialog, keep the tab option set as
CHOOSE PAGE TEMPLATE
, which shows the selection ofStandard Home Page
as default, as shown in the following screenshot:

- Click on
Finish
. - In the resulting Home page Layout screen, drag the desired components from the left-hand components pane, which contains all the standard components available for the Home page, onto the canvas section.
Note
Here, we will drag the Recent Items
to the top section, the Chatter Feed
to the bottom left, the Chatter Publisher
to the bottom right, and the App Launcher
component to the right-hand section.
- Enter
This is a custom Home page created for use by Salesforce CRM Administrators
in theDescription
box of the page, as shown in the following screenshot:

- Finally, click on
Save
, as shown in the following screenshot:

After the page has been saved, the Home page must be activated. Upon saving the page, the
Activation...
option will be visible, as shown in the following screenshot:

- Click on
Activation...
.
Note
When clicking on Save
for the very first time you will be presented with a Page Saved
dialog that provides an Activate
button to active the page. The dialog also presents a message saying Activate this page to make it visible to your users
along with a checkbox with the caption Don't show this message again
, which, when checked, prevents the dialog from reappearing.
- In the resulting Activation dialog, choose the
Assign this Home page to specific profiles
option, as shown in the following screenshot:

- Click on
Next
. - In the resulting
Select Profiles
dialog, choose theSystem Administrator
profile, as shown in the following screenshot:

- Click on
Next
. - Finally, in the resulting
Review Assignments
confirmation dialog, click onActivate
, as shown in the following screenshot:

There are two methods of creating custom Home pages in Salesforce CRM Lightning Experience. One method is to edit an existing Home page and the other is to create a new page using a Home page template. Both methods utilize Lightning App Builder, which allows you to generate and configure the various components and properties of the page.
In this recipe, we will use Lightning App Builder to clone the existing standard Home page.
Carry out the following steps to assign the system administrator profile to the default standard Home page:
- Click on the Setup gear icon at the top right-hand corner of the main Home page, as shown in the following screenshot:

- Click the
Setup
option, as shown in the following screenshot:

- Type
home
in the Quick Find search box, as shown in the following screenshot:

- Select the
Home
option. - Click on
Set Page Assignments
, as shown in the following screenshot:

- In the resulting
Select Profiles
dialog, scroll through the listed profiles and check theSystem Administrator
checkbox, as shown in the following screenshot:

- Click on
Next
. - In the resulting
Choose Lightning Page
dialog, either verify or choose theSystem Default
option (depending on your current settings), as shown in the following screenshot:

- Click on
Next
. - Finally, in the resulting
Review Assignments
confirmation dialog, click onAssign
, as shown in the following screenshot:

Carry out the following steps to clone the standard Home page using Lightning App Builder:
- From the main Home page, click on the Setup gear icon at the top right of the page, as shown in the following screenshot:

- Click the
Edit Page
option, as shown in the following screenshot:

Note
If you have not already created a custom Home page, then behind the scenes, Salesforce makes a cloned copy of the standard Home page when you click Edit Page
and subsequently save it.
The cloned custom Home page is associated with the standard Home page and a reference is maintained by the system. As new capabilities are introduced to the standard Home page in future releases, these are also made available to your custom Home page. The cloned custom Home page is then loaded for editing within Lightning App Builder.
- In the resulting Lightning App Builder page, type
Cloned Standard Home Page
in theDescription
field, as shown in the following screenshot:

- Click on
Save
. - Finally, click on
Back
.
Often there is a need to communicate with the users of your Salesforce CRM application and give updates and status alerts for various reasons.
You can send emails, Chatter posts, and instant messages, for example, to give users dynamic messages about planned releases, system maintenance, and so on; however, to ensure that everyone reads and is shown a more static notification, you can create a message within Salesforce CRM.
In this recipe, we will compose a system notification message on the Home page using Lightning App Builder to edit a customized Home page.
Carry out the following steps to edit an existing Home page to add a system notification message using Lightning App Builder:
- Click on the Setup gear icon, as shown in the following screenshot:

- Click the
Setup
option, as shown in the following screenshot:

- Type
app builder
in the Quick Find search box, as shown in the following screenshot:

- Select the
Lightning App Builder
option. - Click the
Edit
link for theHome_Page_Default
customized Home page, as shown in the following screenshot:

- In the resulting
Lightning App Builder
page, drag and drop theRich Text
component from the standardLightning Components
pane to the top of the Home page canvas, as shown in the following screenshot:

- Click on the newly added
Rich Text
component. - Enter
Please be aware of routine Salesforce CRM maintenance on 4th July!
into theRich Text
properties section. - Choose the text font, size, and color using the text formatter in the right-hand section of the Lightning App Builder, as shown in the following screenshot:

- Click on
Save
, as shown in the following screenshot:

- Finally, click on
Back
.
The customized Home page for the assigned users will appear with a system notification message, as shown in the following screenshot:

As a system administrator, you will receive requests for changes to your Sales CRM application. These requests may be received via email, phone call, Salesforce case record, or external case management system. Either way, it is often useful to provide users with a single email address with which they can log issues or request enhancements within Salesforce CRM.
In this recipe, we will create a system support email link that users can click for support using Lightning App Builder to edit a customized Home page.
Carry out the following steps to edit an existing Home page to provide a system support email link using Lightning App Builder:
- Click on the Setup gear icon, as shown in the following screenshot:

- Click the
Setup
option, as shown in the following screenshot:

- Type
app builder
in the Quick Find search box, as shown in the following screenshot:

- Select the
Lightning App Builder
option. - Click the
Edit
link for theHome_Page_Default
customized Home page, as shown in the following screenshot:

- In the resulting
Lightning App Builder
page, drag and drop theRich Text
component from the standardLightning Components
pane to the top of the Home page canvas, as shown in the following screenshot:

- Click on the newly added
Rich Text
component and enterFor Salesforce Help please send requests for support to
into theRich Text
properties section.
This is shown in the following screenshot:

- Click the Link icon, as shown in the following screenshot:

- Select
E-mail
, as shown in the following screenshot:

- Enter the appropriate details for your organization in the
E-Mail Address
,Message Subject
, andMessage Body
textboxes, as shown in the following screenshot:

- Click on
OK
. - Choose the text font, size, and color using the text formatter, as shown in the following screenshot:

- The
Lightning App Builder
page should now be configured, as shown in the following screenshot:

- Click on
Save
. - Finally, click on
Back
.
The customized Home page for the assigned users will appear with the system support email link, as shown in the following screenshot:

All users need to change their Personal Information settings in the Salesforce CRM application from time to time. They may, for example, wish to edit their user information, change their password, or you may need them to grant login access to administrators, plus many other reasons.
Accessing the Personal Information area is done by users clicking their profile picture and then stepping through the options to navigate to the My Personal Information
in the setup section of the sidebar. This takes extra clicks and can often be a challenge for less experienced users of the application.
In this recipe, we will create a shortcut link directly on the Home page to allow users to access their Personal Information options with a single click.
Carry out the following steps to edit an existing Home page to create a personal setup link on a customized Home page using Lightning App Builder:
- Click on the Setup gear icon, as shown in the following screenshot:

- Click the
Setup
option, as shown in the following screenshot:

- Type
app builder
in the Quick Find search box, as shown in the following screenshot:

- Select the
Lightning App Builder
option. - Click the
Edit
link for theHome_Page_Default
customized Home page, as shown in the preceding screenshot:

- In the resulting
Lightning App Builder
page, drag and drop theRich Text
component from the standardLightning Components
pane to the top of the Home page canvas, as shown in the following screenshot:

- Click on the newly added
Rich Text
component and enterQuick Personal Setup Link
into the Rich Text properties section. - This is shown in the following screenshot:

- Click the Link icon as shown in the following screenshot:

- Select
URL
for theLink Type
. - Select
https://
for theProtocol
. - Paste or enter the following for the
URL
:/one/one.app#/settings/personal/PersonalInformation/home
- Click on
OK
, as shown in the following screenshot:

- The Lightning App Builder page should now be configured as shown in the following screenshot:

- Click on
Save
. - Finally, click on
Back
.
The customized Home page for the assigned users will appear with the personal setup link, as shown in the following screenshot:

Upon clicking the personal setup link, users will be presented with the Personal Information
page, as shown in the following screenshot:

In this recipe, we are going to provide a link on the Home page that directly calls a filtered report with a parameter to display a subset of the data in the report.
We will initially create an opportunity report that is filtered by the standard Amount field, which we can call directly using a URL link with an Amount parameter.
The URL link that invokes the filtered opportunity report will be generated using the Lightning App Builder and configured on an existing customized Home page.
Carry out the following steps to create an opportunity report that is filtered by the standard Amount field:
- Click on the
Reports
tab. - Click on
New Report
, as shown in the following screenshot:

- In the resulting
Create New Report
page, select theOpportunities
report type. - Click on
Create
, as shown in the following screenshot:

- Click on
Add
in theFilters
section. - Select a filter for the
Amount
field, choose the option greater or equal, and enter the value10000
. - Click on
OK
. - Click on
Save
, as shown in the following screenshot:

- In the resulting
Save Report
dialog, enterHigh Amount Opportunities
in theReport Name
textbox. - Enter
Report for high amount opportunities
in theReport Description
textbox. - Select one of your existing folders or leave as default in the
Report Folder
to save the report. - Click on
Save
, as shown in the following screenshot:

- In the resulting saved Report page, click
Run Report
, as shown in the following screenshot:

- Note the URL that is displayed in the browser address bar as this is the location for the report, as shown in the following screenshot:

- In the resulting saved
REPORT
page, click the Filter icon to take a look at the way the filter forAmount
is set asgreater or equal "100,000"
and get an idea of how we will update the Amount parameter as part of this recipe.
Note
The URL that is generated is https://widgetsxyzlex-dev-ed.lightning.force.com/one/one.app#/sObject/00O0Y000006eJLvUAM/view.
You will now need to make a note of only the following part of the report URL/one/one.app#/sObject/00O0Y000006eJLvUAM/view
that is shown in your Salesforce organization.
We need to further modify the URL to pass the Amount as a variable that allows us to run the report from a link with any value of opportunity Amount. This modified URL becomes the following:/one/one.app#/sObject/00O0Y000006eJLvUAM/view?fv0=250000
.
This appended URL will be used in the following How to do it... section.
Carry out the following steps to edit an existing Home page to generate a filtered report link on a customized Home page using Lightning App Builder:
- Click on the Setup gear icon, as shown in the following screenshot:

- Click the
Setup
option, as shown in the following screenshot:

- Type
app builder
in the Quick Find search box, as shown in the following screenshot:

- Select the
Lightning App Builder
option. - Click the
Edit
link for theHome_Page_Default
customized Home page, as shown in the following screenshot:

- In the resulting
Lightning App Builder
page, drag and drop theRich Text
component from the standardLightning Components
pane to the top of the Home page canvas, as shown in the following screenshot:

- Click on the newly added
Rich Text
component and enterOpportunities with Amount >= 250,000
into the Rich Text properties section. - This is shown in the following screenshot:

- Click the Link icon as shown in the following screenshot:

- Select
URL
for theLink Type
,https://
for theProtocol
, and enter/one/one.app#/sObject/00O0Y000006dz0bUAA/view?fv0=250000
for the URL. - This is shown in the following screenshot:

- Click on
OK
. - The
Lightning App Builder
page should now be configured as shown in the following screenshot:

- Click on
Save
. - Finally, click on
Back
.
The customized Home page for the assigned users will appear with the filtered report link, as shown in the following screenshot:

Users can click the following link:
/one/one.app#/sObject/00O0Y000006dz0bUAA/view?fv0=250000
They will then be presented with the filtered report, as shown in the following screenshot:

Within the Salesforce CRM application, you can natively add rich-text-related sections to the Home page that can be configured to present messages and hyperlinks, and launch email applications.
Using Lightning App Builder, the Home page can be configured with the use of the standard Rich Text Lightning component, which supports formatted text, URLs, and email links as covered in other recipes within this chapter.
Organizations often have a requirement to brand the software applications that are in use by their employees or display graphic notifications, such as terms and conditions of system use, and this can be achieved in Salesforce CRM by displaying a custom image on the landing Home page.
Salesforce does not, however, provide a way of adding custom images to the Home page natively using a standard component within Lightning App Builder; therefore, we are going to develop a custom Lightning component to fulfill this requirement.
In this recipe, we are going to display a company logo on the Home page and we can either use an image file that we have created ourselves or use one obtained from an external source.
We will store the image file in the Salesforce CRM application as a resource so we can maintain a copy, and this will then be linked to enable the image to be referenced in our Lightning component.
Carry out the following steps to upload an image file into Salesforce CRM using Static Resources:
- Create or source a suitable image to be used as a company logo in the JPG, GIF, or PNG format and approximately 200 x 40 pixels, as shown in the following screenshot:

- Click on the Setup gear icon, as shown in the following screenshot:

- Click the
Setup
option, as shown in the following screenshot:

- Type
static resources
in the Quick Find search box, as shown in the following screenshot:

- Select the
Static Resources
option. - Click on
New
, as shown in the following screenshot:

- Click on
New
. - Enter the name of the Static Resource in the
Name
field. For this recipe, typeWidgetsXYZlogo
. - Enter
This is the company logo for WidgetsXYZ
in theDescription
field. - In the file uploader control, click on the
Browse...
button to select the image to upload from your computer. In this recipe, choose the image identified in step 1. - Ignore the
Cache Control
picklist selection and leave it as defaultPrivate
(Cache Control is only relevant to static resources used in https://www.force.com/, a Salesforce technology used for creating public web applications and web sites). - The
Static Resources
setup screen appears as shown in the following screenshot:

- Click on
Save
. - In the resulting
Static Resource Detail
page, click onView file
, as shown in the following screenshot:

- In the resulting
Static Resource Detail
page, you can verify that the image is loaded by clicking onView file
, which will load the file that has been uploaded. In our example, this is our company logo:

Carry out the following steps to develop a custom Lightning component and add it to an existing Home page within Lightning App Builder:
- Click on the Setup gear icon, as shown in the following screenshot:

- Click the
Developer Console
option, as shown in the following screenshot:

- In the resulting
Developer Console
window, click onFile
. - Click on
New
. - Click on
Lightning Component
, as shown in the following screenshot:

- In the resulting
New Lightning Bundle
dialog, enterCompanyLogo
for theName
. - Enter
This is a Company Logo Component
for theDescription
.
- Click on
Submit
, as shown in the following screenshot:

- In the resulting Component page, paste the following code:
<aura:component implements="flexipage:availableForAllPageTypes" access="global"> <img src="{!$Resource.WidgetsXYZlogo}"/> </aura:component>
- Click on
File
. - Click on
Save
, as shown in the following screenshot:

- Now, to add the component to an existing Home page using Lightning App Builder, click on the Setup gear icon, as shown in the following screenshot:

- Click the
Setup
option, as shown in the following screenshot:

- Type
app builder
in the Quick Find search box, as shown in the following screenshot:

- Select the
Lightning App Builder
option. - Click the
Edit
link for theHome_Page_Default
customized Home page, as shown in the following screenshot:

- In the resulting
Lightning App Builder
page, drag and drop theCompanyLogo
component from the customLightning Components
pane to the top of the Home page canvas, as shown in the following screenshot:

Note
At the time of writing, custom Lightning Components only appear in the list of Lightning Components if you have set a custom Salesforce domain name for your organization. This is required for security reasons and is done by creating a My Domain subdomain, as detailed in the There's more... section of this recipe.
The customized Home page for the assigned users will appear with the custom logo, as shown in the following screenshot:

Custom Lightning Components are only available for use if you have set a custom Salesforce domain name for your organization. This is required for security reasons and is done by creating a My Domain subdomain. Carry out the following to set up a My Domain subdomain:
- Click on the Setup gear icon, as shown in the following screenshot:

- Click the
Setup
option, as shown in the following screenshot:

- Type
my domain
in the Quick Find search box. - Click on
My Domain
, as shown in the following screenshot:

- Enter name.
- Click on
Check Availability
. - Click on
Register Domain
, as shown in the following screenshot:

- Click on
Deploy to Users
. - Click on
OK
to confirm, as shown in the following screenshot:

- In the resulting screen, the final step,
My Domain Settings
are displayed, as shown in the following screenshot:
