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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Step-14: In this step, we will add our app to the 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.
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.
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.
Step-18: On Clicking Custom Sales App Page this page will also open in the tab as shown in the picture below.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
With this step, we have successfully created a Custom App Page through the Application in Salesforce Lightning.
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:
- How to create App in Salesforce
- Chatter not available in Salesforce Lightning App Builder
- How to create a Custom Home Page in Salesforce Lightning
I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.