How to Create a Custom App Page in Salesforce Lightning

Custom App Page in Salesforce
Custom App Page in Salesforce

In this Salesforce tutorial, we will learn how to create a Custom App page in Salesforce Lightning. We will also discuss, how to add this Custom App page to our applications.

In addition, we will also cover the two different techniques using which we can create a custom app page in Salesforce Lightning.

What is App Page in Salesforce

In Salesforce, App pages are designed to be displayed in the form of Tabs in the Salesforce App. App Pages are used to customize the user interface of the Salesforce app to meet specific needs.

Custom App pages can extend the standard Salesforce functionality and provide the user with a more specialized interface. Custom App Pages put things in one place, which makes things easy.

How to create Custom App Page in Salesforce Lightning using App Builder

Custom App pages are created in Salesforce with the help of Lightning app builder. To create a Custom App Page in Salesforce Lightning follow the below steps.

Step-1: First login into your account and you will see the home screen of Salesforce Lightning. On the left side, below the Setup you will see an option User Interface, click on that and you will see an option of Lightning App Builder.

Setup Custom Page in Salesforce
Setup Custom Page in Salesforce

Step-2: After clicking on Lightning App Builder, a new window Lightning App Builder Setup will open. Where you will see the list of App pages (if created earlier). Here we have to click on the New button.

Lightning App Builder Salesforce
Lightning App Builder Salesforce

Step-3: As we click on New, on another window Create a Lightning Page there will be options like App Page, Home Page, Record Page, etc. Since we are creating an App Page so we will click on App Page and then click Next.

Lightning App page in Salesforce
Lightning App page in Salesforce

Step-4: In this step, we will name our App Page. You will see a label* in that we will write the name of our App Page and click on Next as shown in the below image.

App Page in Lightning
App Page in Lightning

Step-5: On clicking Next, we will see a list of templates format to choose from. You can choose any of the templates as per your choice. I am selecting the Header and two Regions for this App Page and after selecting the template click on Finish.

Salesforce Custom App Page
Salesforce Custom App Page

Step-6: In this window, we can view the Custom Sales App Page. We will customize this page with the help of standard components shown on the left side bar as shown in the below picture.

Salesforce Lightning Custom Page
Salesforce Lightning Custom Page

Step-7: To add components to the templates of the Custom Page drag the components to the columns of the template on the App page.

Custom App Page in Salesforce
Custom App Page in Salesforce

Step-8: In this step, we will add some Actions like New contact, New lead, etc. in the Custom App Page. By adding these actions, we can perform these actions within the App Page. On the left side of the Custom App page, there will be an option for Actions. Click on Select as shown in the below picture.

Custom App Page Actions
Custom App Page Actions

Step-9: On clicking Select Actions a new window will open, where we will choose the Actions we want to add to our Custom App Page. Select the actions and click OK.

Salesforce Lightning Actions
Salesforce Lightning Actions

Step-10: Now the customization part is complete so we will save this Custom App Page now by clicking on the Save button on the right-upper side of the Page.

Salesforce Lightning Custom App Page
Salesforce Lightning Custom App Page

Step-11: After clicking save, a new window will open to activate the page. We will click on Activate to begin the activation process of the Custom App Page.

Activate Custom Page in Salesforce
Activate Custom Page in Salesforce

Step- 12: In this step, we will activate the Page App. There will be a choice under the heading Page activation. We can choose for whom we want to activate this page, either the System administrator or all users. In this case, we will activate the Page for all users.

See also  How to remove new event from activity tab in Salesforce lightning

Step-13: Now we will move to the LIGHTNING EXPERIENCE, here we will add this Custom App page to an application. We can add this page to multiple applications.

Custom App Page
Custom App Page

Step-14: In this step, we will add our app to the Custom App Page.

Lightning Salesforce Custom App Page
Lightning Salesforce Custom App Page

Step-15: Now click on MOBILE NAVIGATION to add a mobile view to the Custom App Page. It is completely optional to do it. After selecting the Mobile Navigation Menu click on save.

Custom App Page Navigation
Custom App Page Navigation

Step-16: On clicking save we will complete our activation process and it will again redirect us to the Custom App Page. There on the upper right side click on the save to apply all the changes.

Custom App Page Lightning
Custom App Page Lightning

Step-17: Go back to the application in which you have added this Custom Page and click on the App Launcher (9 dots), it will open a search bar. There enter the name of the Custom Page.

Custom App page in Salesforce App
Custom App page in Salesforce App

Step-18: On Clicking Custom Sales App Page this page will also open in the tab as shown in the picture below.

Custom App Page Lightning Salesforce
Custom App Page Lightning Salesforce

Now we have created a Custom App Page and added that page to an application. In the next steps, we will see how to create Custom App Page through the Salesforce lightning application.

How to deploy App page to Salesforce Lightning Application

How to create Custom App Page within Salesforce Lightning App

There is another way to create a Custom App page, which is through the application. In this case, instead of creating a page directly through App Builder, we will create the Custom App page through the edit tab of the Application.

See also  How to Restrict Users From Switching Salesforce Lightning to Salesforce Classic

To create a Custom App Page within a Salesforce lightning application, open the home page and follow the steps mentioned below.

Step-1: Once you open the home page, on the left you will see a list of tabs there you have to click on Apps and then click on the drop-down of Apps. Now there will be the option of App Manager, click on that and a new window will appear.

Custom App page in Lightning App
Custom App page in Lightning App

Step-2: On clicking App Manager we will see a list of default apps and created apps as shown in the below picture. There click on the application in which you want to add the Custom App Page. I am selecting the Sales Tech App to add the Custom App Page. On the right of the app name, you will see a dropdown, and in that click on the Edit option.

Custom lightning app
Custom lightning app

Step-3: Now on another window you will see the App Settings tab. There will be a drop-down Pages, click on it and then click New Page.

App Page in Lightning Application
App Page in Lightning Application

Step-4: On clicking New Page, on another window Create a Lightning Page there will be options like App Page, Home Page, Record Page, etc. Since we are creating an App Page so we will click on App Page and then click Next.

Salesforce lightning add Custom App Page
Salesforce Lightning add Custom App Page

Step-5: In this step, we will name the Custom App Page, under the label tag write the App page name and click on Next. I am naming it a New Custom App Page. You can use any name as per your requirements.

App Page in Salesforce
App Page in Salesforce

Step-6: In this step, we will select the template design for our Custom App Page. There will be a list of templates format on the right side. We can choose any of them according to our requirements. After selecting the template format click on Finish.

Lightning Custom App Page
Lightning Custom App Page

Step-7: On clicking Finish, a new tab Sales Tech App (app name)-New Custom App Page (page name). On the right side of the window, there will be Standard components under the Standard heading. We will use these components in our Custom App Page.

Custom App Page Lightning App Builder
Custom App Page Lightning App Builder

Step-8: To add these components to the App page, click on the component you want to select and drag them to the templates of the App page.

App Page in Salesforce App builder
App Page in Salesforce App builder

How to remove App Page from App in Salesforce Lightning

Step-9: Now we will add Actions to our custom app page. These actions will help us to perform those actions within the app page and it make things easier. To add actions, On the bottom-right side of the page click on the Select below Actions.

Actions in Lighting App Page
Actions in Lighting App Page

Step-10: In this tab, we can see a list of Available actions. The selected actions will appear in the Selected column. After selecting the Actions of your choice click on the OK button.

Custom Lightning App Page
Custom Lightning App Page

Step-11: After clicking OK, we will save the changes, and for that click on the save button on the upper right side of the screen.

New Custom App Page Lightning App
New Custom App Page Lightning App

Step-12: A new tab will open to confirm the activation, we will click on Activate to activate this Custom Page to make it visible to the users.

Salesforce Custom Lightning App Page
Salesforce Custom Lightning App Page

Step-13: On clicking Activate, a new window Activation: New Custom App Page will open. Here in the tab PAGE SETTINGS, there will be options for Page activation we want to activate this page for all users or for administrators only. We are selecting Activate for all users to make this page visible to all users.

Custom Salesforce Lightning App page
Custom Salesforce Lightning App page

Step-14: Now move on to the MOBILE NAVIGATION to add a mobile view to the Custom App Page. It is completely optional to do it. After selecting the Mobile Navigation Menu click on save.

Custom Lightning App Page in Salesforce
Custom Lightning App Page in Salesforce

Step-15: On clicking save we will complete our activation process and it will again redirect us to the Custom App Page. There on the upper right side click on the save to apply all the changes.

App Page in Salesforce Lightning
App Page in Salesforce Lightning

Step-16: Go to the application in which you have created this Custom App Page and click on the 9 dots, it will open a search bar, and then enter the name of the Custom App Page in the search bar and click on it.

Custom App Page in Salesforce Lightning
Custom App Page in Salesforce Lightning

Step-17: Click on the New Custom App Page tab and it will open the created Custom App Page in the application as shown in the picture below.

New Custom App Page Salesforce
New Custom App Page Salesforce

With this step, we have successfully created a Custom App Page through the Application in Salesforce Lightning.

See also  Create list view for queue in Salesforce [Lightning & Classic]

Conclusion

In this Salesforce Lightning tutorial, we learned How to Create a Custom App Page with the help of Lightning app builder. We discovered both possible ways, through which a Custom App Page can be created. First, by creating an App Page directly from the App Builder, and second way through Create a Custom App Page within the application.

In addition, we also learned about the App Pages in Salesforce Lightning and their utility in the Lightning Application.

You may also like to read the following articles: