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.

Add Dashboard to an Salesforce App Page

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

Salesforce Add Dashboard to an 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.

Salesforce Lightning App page dashboard

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.

Salesforce Lightning App page Add dashboard

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.

Add Dashboard to a Salesforce Lightning App Page

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.

See also  How to Create Loss Rate Report in Salesforce

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.

Adding a Dashboard to App page in Salesforce

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.

Dashboard Embedded in a Salesforce Lightning App page

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.

Salesforce Lightning user permissions for Dashboard

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.

Dashboard in Lightning App page in Salesforce

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.

Salesforce Add Dashboard to an App page in Lightning

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.

Dashboard in a Salesforce Lightning App page

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.

Add Dashboard to an Lightning App page

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.

Dashboard in Salesforce Custom App page

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.

Adding Dashboard To Salesforce Lightning App Page

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

See also  How to Duplicate a Report in Salesforce

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.

Dashboard in New Salesforce App page

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.

Add a Dashboard to an Salesforce App Page

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.

Add dashboard to an existing Salesforce App page

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.

See also  How to Filter Multiple Value in Salesforce Report

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

Add Dashboard to template region of 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.

Salesforce Lightning App page for Dashboard

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.

Dashboard in existing Lightning App page in Salesforce

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.

Salesforce Add Dashboard to an existing App page in Lightning

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.

Dashboard in an existing Salesforce Lightning App page

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.

Added Dashboard to a custom App page in Salesforce

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: