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
Setupoption, as shown in the following screenshot:
- Type
static resourcesin the Quick Find search box, as shown in the following screenshot:
- Select the
Static Resourcesoption. - Click on
New, as shown in the following screenshot:
- Click on
New. - Enter the name of the Static Resource in the
Namefield. For this recipe, typeWidgetsXYZlogo. - Enter
This is the company logo for WidgetsXYZin theDescriptionfield. - 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 Controlpicklist 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 Resourcessetup screen appears as shown in the following screenshot:
- Click on
Save. - In the resulting
Static Resource Detailpage, click onView file, as shown in the following screenshot:
- In the resulting
Static Resource Detailpage, 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 Consoleoption, as shown in the following screenshot:
- In the resulting
Developer Consolewindow, click onFile. - Click on
New. - Click on
Lightning Component, as shown in the following screenshot:
- In the resulting
New Lightning Bundledialog, enterCompanyLogofor theName. - Enter
This is a Company Logo Componentfor 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
Setupoption, as shown in the following screenshot:
- Type
app builderin the Quick Find search box, as shown in the following screenshot:
- Select the
Lightning App Builderoption. - Click the
Editlink for theHome_Page_Defaultcustomized Home page, as shown in the following screenshot:
- In the resulting
Lightning App Builderpage, drag and drop theCompanyLogocomponent from the customLightning Componentspane 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
Setupoption, as shown in the following screenshot:
- Type
my domainin 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
OKto confirm, as shown in the following screenshot:
- In the resulting screen, the final step,
My Domain Settingsare displayed, as shown in the following screenshot:
