How to add a Dashboard to an app page in Salesforce

In this Salesforce tutorial, we will learn how to Add a Dashboard to a Lightning App page in Salesforce Lightning and Salesforce Classic.

We are going to cover the following topics in this Salesforce tutorial.

• Dashboard in Salesforce App page
• Add a Dashboard to a new App page in Salesforce Lightning
• Add a Dashboard to an existing App page in Salesforce Lightning

Dashboard in Salesforce App page

In Salesforce dashboards are created using reports and can contain a variety of components such as charts and tables. By adding a Dashboard to an app page, we can provide users quick access to the dashboards and also the dashboard on an app page, enhancing user productivity by presenting relevant data on an app page.

While working in a Sales team of an organization that uses the Salesforce CRM tool to track the sales and customer data, in the Sales Tech application of our organization, we had the existing Salesforce app pages provide a lot of data and records. Still, there were no interacting visualizations for the sales matrics from where the sales team can get easy access to view sales performance with data visualization.

Then we decided to add a dashboard having sales reports to the app page so that we could have access to the sales reports on the App pages to view the overall sales performance and make efficient and strategic decisions on time. Now, I will explain to you how we added the Dashboard to a Salesforce app page.

Read How to add Image to an App page in Salesforce

Add a Dashboard to a New App page in Salesforce Lightning

To Add a Dashboard to an App page in Salesforce Lightning, log in to your Salesforce developer account and follow the steps below.

Step-1: On the Setup page of Salesforce Lightning, go to the Quick Find box and search app builder. Then from the options in the dropdown, select Lightning App Builder.

Step-2: In the Lightning App Builder click on the New button, to create a new app page.

Step-3: In this step, we can see options for lightning pages. Here select the option App Page and then click on the Next button.

Step-4: Now enter the app page name in the Label tag and then click on the Next button. In this case, I have named the app page the Sales App page.

Step-5: In this step, we will select the template format for the app page. In this case, I have selected the template format Header and Left Sidebar. After selecting the template format, click on the Done button.

Step-6: In this step, we will add a dashboard to the app page. On the left sidebar, there are standard components; in the list of components, we can also see Dashboard.

To add this Dashboard to the app page, we have to pick it from the standard components and then drag and drop it to the template region of the app page, as shown in the picture below.

Step-7: After adding the Dashboard to the template region, we can choose the specific dashboard from the list of Dashboard. To select a Dashboard for the app page, go to the right sidebar and click on the search icon under the heading Dashboards.

As we click on the search icon, we can see the list of Dashboards, and from here select the dashboard that you want to add to this app page. In this case, I have selected the dashboard All Opportunities details.

Step-8: After selecting the Dashboard, we will add the component visibility for the Dashboard and for that click on the Set Component Visibility on the right sidebar and then click on Add Filter, and then click on the Select button under the heading Field.

Step-9: As we click on the Field button, a new window will appear here Click on the Permissions button and then select Standard Permission and Access Activities, respectively, like Permissions> Standard Permission> Access Activities. After selecting the fields, click on the Done button.

Step-10: As we click on the Done button, we can see the Field is set. In the Operator, enter Equal and set the Value field to True.

Step-11: Select the Dashboard height under the heading Max height after setting the permissions. We can select the dashboard height between 200 to 10,000 pixels. I have selected the max height as 5,000 pixels. Along with this, activate the checkbox Hide on Error; this function will hide the error if it will prevent the dashboard from loading. After applying these changes, click on the Save button.

Step-12: On clicking the Save button, a pop-up window will appear for the activation of the created app page. Here, click on the Activate button to activate this app page in a lightning application.

Step-13: In this window, go to the Page activation section and here we can see two options for page activation First Activate for all users, and second Activate for system administrators. I have activated the radio button Activate for all users to activate this app page for all users. Now, go to the Lightning Experience tab.

Step-14: In the Lightning Experience tab, select the Lightning application from the list of apps on the left side. I have selected the Sales application to activate this app page and after selecting the app click on the button Add page to the app and then click on the Save button.

As we click on the Save button this App page with an embedded Dashboard will be activated by the selected salesforce lightning application.

I have activated this app page with a dashboard in the Sales App. So, you can see the dashboard is visible on the Sales App page of the Sales application.

Now, we have successfully created an app page with an embedded dashboard and also activated that app page in a salesforce application.

Add a Dashboard to an existing App page in Salesforce Lightning

To add a Dashboard to an existing App page in Salesforce Lightning, go to the Setup page of Salesforce Lightning.

Step-1: On the Setup page of Salesforce Lightning, go to the Quick Find box, search for a lightning app builder, and then click on the same from the dropdown.

Step-2: In the Lightning App Builder, from the list of Lightning pages, select the app page to which you have to add a dashboard and click on the Edit button on the left side of the app page title. In this scenario, I have selected the app page Custom user app page to add a dashboard.

Step-3: As we click on the Edit button, the app page will open in a Lightning App builder and we will add a Dashboard to this App page. On the left side bar under the heading Standard, we can see a list of standard components.

Now, from the list of standard components, select the Dashboard and drag it to the template region of the app page.

As we add a dashboard to the app page, it will display a random dashboard, and to select the required Dashboard, click on the search icon under the heading Dashboard in the right sidebar, and from the list in the dropdown, select the required dashboard.

In this case, I have selected the dashboard Sales tracking(Opportunity Records) for this app page.

Step-5: Now we have selected the Dashboard, In this step, we will add the Dashboard component visibility for the user. Click on the Set Component Visibility on the right sidebar and then click on Add Filter, and then click on the Select button under the heading Field.

Step-6: In the select field window, click on the Permissions button and then select Standard Permission and Access Activities, respectively. After setting the fields, click on the Done button.

Step-7: Till now, we have set the Field for Dashboard. Now in the Operator field, enter Equal and set the Value field to True.

Step-8: Now we have selected the Dashboard for the app page, we can add more filters to the Dashboard. To set the height of the dashboard, go to the heading Max height, and from here, we can select the dashboard height between 200 and 10,000 pixels. I have selected the max height as 5,000 pixels. We can also activate the Hide on Error checkbox to hide the error if it prevents the dashboard from loading on the app page.

Lastly, click on the Save button to apply the changes.

As we click on the Save button, the dashboard will be deployed on the app page, and this custom app page was activated in the Sales Tech App. So, In the application, we can see the dashboard is added to the app page custom user app page.

Now we have successfully added a Dashboard to an existing App page in Salesforce Lightning.

Conclusion

In this Salesforce tutorial, we have learned about the method to add a Dashboard to a Salesforce Lightning App page, and we discussed the process of adding a Dashboard to a Lighting App page in two ways. First, we added a dashboard while creating a new app page, and later we learned to add a dashboard to an existing Lightning App page.

You may like to read:

• Build a Mobile App page in Salesforce
• How to add standard component in app page in salesforce lightning