How To Create A Custom Tab In Salesforce

Understanding Lightning Components and Record Pages

Salesforce Lightning Experience comes with a slick user interface that is easy to navigate and even easier to use right from the beginning. Lightning is built entirely out of what Salesforce calls Lightning Components, which are miniature applications designed to help users accomplish tasks. Subsequently, it is quick and easy to create a custom lightning record page in Salesforce. A Lightning Record Page is a collection of several components within a single web page. By default, each object – Accounts, Contacts, Opportunities, etc. – has its own unique record page provided by Salesforce, consisting of several standard lightning components, also provided by Salesforce.

As an example, let's look at the default Quote Record Page below:

#	Component	Description
1	Record Page	Wrapped in the green box. Houses the collection of Lightning Components
2	Highlights Panel	Contains compact basic information of the record. Also has action buttons to help the user work on the record.
3	Status Path	Contains the path of available Quote Statuses. Users can change the status on the fly.
4	Tabs	Gives the page more depth to fit even more Components on the page.
5	Related Lists	Show all object lists for records related to this Quote. Which Lists are displayed depends on the Classic Page Layout.
6	Activities	Houses tasks, events, call logs, and emails for the Quote.

Customize Your Own Record Page with Lightning App Builder

Above all, as displayed in the previous example, Salesforce Lightning Experience provides a lot of great tools right out of the box to get any user up and running on their platform from day 1. However, Salesforce also gives its users full flexibility to design a record page however you'd like to through a tool called the Lightning App Builder.

The following is a quick rundown of the Lightning App Builder.

#	Section	Description
1	Web Page Preview	Treat this as a preview of the page displayed to the user. Lightning Components can be dragged and dropped here and are editable or removable as well.
2	Component List	Contains all usable components for the Page. This includes standard and custom components
3	Component Properties	When a component is selected on the web page, its properties pop up in the right panel of the screen.

Example

Create a New Custom Lightning Record Page

In the following example, we will first create a custom Quote Record Page, then add and customize standard components, as well as add our own exclusive CloudFirst Labs custom Agile Quote components to the page. Then we will activate the newly created page for our org. To Start:

In Salesforce, click the Setup icon and click Setup
While in Setup, navigate to the Object Manager tab then Click into the Quote object.
In the left panel, click Lightning Record Pages.
Click New to create a new page.
The Lightning App Builder opens with a Create new page wizard. Click to create a Record Page, and then click Next.
On the next screen, give the page a name, and select Quote as the object, and then click Next.
Now it is time to select a page template to use. There are many to choose from, but for this example, select Header and Right Sidebar, and then click Finish.

Adding and Customizing Standard Components

Now that the Page has been created, we have a blank slate of 3 panels to add components to. To start let's add the Highlights panel and work our way down.

To begin with, in the Components list on the left panel of the page, locate the Highlights Panel, click and drag and drop the component into the top most section of the Lightning Page.
then
Next locate the Path Component and drop that also into the top most section, immediately below the Highlights.
Sticking with the Standard Components, simply drop a Tabs component in the Right Panel
The Tabs component properties will load on the right side of the screen. Click the defaulted Details tab because we are going to change the tab label to Activity.
Select the Related Tab in the Page Preview to make it active then drop the Related Lists standard component into it.
Select the Activity Tab in the Page Preview to make it active then drop the Activities standard component into it.

Adding Custom Components

You now understand how simple and fast it is to build Lightning Pages with standard Salesforce components. With this in mind, the next example is to show how it works with custom components. Hint: it's just as easy.

In the Components list, scroll down to the custom Lightning Components section.
From here you can drop any custom built component into your Page as long as it is Available For All Page Types. For this example, we will drop our custom Header and Lines components into the remaining left panel of the Page.

Saving and Activating the Page

Subsequently, the page is fully set up and ready for use by the users. After that, the only thing left to do is Save it and Activate it. For this example we are just going to activate it as the default for our org.

Click the Activation button in the top right corner of the screen. As a result, the Activation wizard opens.
Look for the Assign as Org Default button and click it:
Click Next on the Assign Form Factor page.
Click Save on the Review Assignment page.
As a result, you are returned to the Lightning App Builder with the Activation settings saved. Lastly, click the Save button to save the changes to the Page itself.