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.

Getting ready

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:

1. 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:

2. 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.

3. Click the Setup option, as shown in the following screenshot:

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

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

7. Click on New.
8. Enter the name of the Static Resource in the Name field. For this recipe, type WidgetsXYZlogo.
9. Enter This is the company logo for WidgetsXYZ in the Description field.
10. 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.
11. 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).
12. The Static Resources setup screen appears as shown in the following screenshot:

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

15. 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:

How to do it...

Carry out the following steps to develop a custom Lightning component and add it to an existing Home page within Lightning App Builder:

1. 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.

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

3. In the resulting Developer Console window, click on File.
4. Click on New.
5. Click on Lightning Component, as shown in the following screenshot:

6. In the resulting New Lightning Bundle dialog, enter CompanyLogo for the Name.
7. Enter This is a Company Logo Component for the Description.

 

8. Click on Submit, as shown in the following screenshot:

9. In the resulting Component page, paste the following code:

<aura:component implements="flexipage:availableForAllPageTypes" access="global"> 
   <img src="{!$Resource.WidgetsXYZlogo}"/> 
</aura:component> 

10. Click on File.
11. Click on Save, as shown in the following screenshot:

12. 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.

13. Click the Setup option, as shown in the following screenshot:

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

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

17. 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.

How it works...

The customized Home page for the assigned users will appear with the custom logo, as shown in the following screenshot:

 

There's more...

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:

1. 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.

2. Click the Setup option, as shown in the following screenshot:

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

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

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

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