Developing a Lightning component to display a custom logo on a customized Home page
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:
Note
The Setup gear icon is located in the top right-hand corner of the main Home page.
- 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, type WidgetsXYZlogo
. - Enter
This is the company logo for WidgetsXYZ
in the Description
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 default Private
(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 on View file
, as shown in the following screenshot:
- In the resulting
Static Resource Detail
page, you can verify that the image is loaded by clicking on View 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:
Note
The Setup gear icon is located in the top right-hand corner of the main Home page.
- Click the
Developer Console
option, as shown in the following screenshot:
- In the resulting
Developer Console
window, click on File
. - Click on
New
. - Click on
Lightning Component
, as shown in the following screenshot:
- In the resulting
New Lightning Bundle
dialog, enter CompanyLogo
for the Name
. - Enter
This is a Company Logo Component
for the Description
.
- 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:
Note
The Setup gear icon is located in the top right-hand corner of the main Home page.
- 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 the Home_Page_Default
customized Home page, as shown in the following screenshot:
- In the resulting
Lightning App Builder
page, drag and drop the CompanyLogo
component from the custom Lightning 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:
Note
The Setup gear icon is located in the top right-hand corner of the main Home page.
- 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: