In Salesforce Visualforce pages, we can embed the reports and dashboards to display the data of past activities in the org directly on the custom Visualforce pages. In this Salesforce tutorial, I will explain how to embed reports and dashboards on the custom Visualforce pages.
Embedding a Report Chart in the Visualforce Page
To embed a report chart on the Visualforce page, there are two methods. The first method is using the <analytics:reportChart> tag, and another way to embed the report is using the <iframe> tag.
To embed the report on the Visualforce page using the <analytics:reportChart>, we need the ID of the report to pull and display the chart on the visualforce page.
- First, we need to create a report with a chart using the Salesforce Report Builder. If you haven’t created a report, then create it first.
- After creating the report with the report chart, we need the ID of the report through which we will embed the report chart in the Visualforce page.
To get the report ID, copy it from the URL after opening the report or request it through the API.
- Now, we will create a visualforce page with the report chart tag <analytics:reportChart> with the attribute reportID to parse the report ID.
Enter the code below inside the <apex: page> and save it.
<apex:page >
<analytics:reportChart reportId="00O5i00000AqI6bEAF" size="small"></analytics:reportChart>
</apex:page>- Navigate to the Visualforce page setup from Setup > Visualforce pages. In the next window, select the visualforce page where you added the report chart.
- On the setup page of the selected visualforce page, click on the Preview button.
In the preview, you will see the report chart embedded in the Visualforce page.
This way, we can embed or add a report chart to the visualforce page in Salesforce by following the above steps.
Embedding a Dashboard in the Visualforce page
To display the dashboards on the visualforce page, we will add the URL source of the dashboard component to the Visualforce page.
To add the dashboard to the visualforce page, first switch to the Salesforce Classic edition because the “img src” that we need to embed the dashboard in the visualforce cannot be accessed from the Lightning edition.
After switching to the classic edition, navigate to the Dashboards from the app launcher and follow the steps below.
- Open the Dashboard you want to add to the Visualforce page. Then, right-click on the dashboard component and select Inspect.
- In the Inspect elements code, search for the “img src” link of the dashboard component, and as we hover over the “img src” link, it will show another link to the Current source. Here, click on the link for the current source.
- The Dashboard component will open in a new window. Here, right-click on the image and select Copy Image URL.
- Now open the visualforce page where you want to embed the dashboard and enter the <iframe> tag code inside the <apex: page> component.
<apex:page>
<h1>
Opportunity Dashboard
</h1>
<iframe title="dashboard" src="Copied Image URL"></iframe>
</apex:page>Replace the “Copied Image URL” with the image link you have copied.
- After adding the Dashboard to the Visualforce page, navigate to the Salesforce Visualforce Pages setup from Setup > Visualforce Pages.
After this, select the Visualforce page where you added the dashboard link. Then, in the next window, click on the Preview button.
We will see the embedded dashboard component in the Preview of the Visualforce page.
This way, we can embed Dashboards in the Salesforce Visualforce page by following the above steps.
Common Issues while Adding Dashboards to the Visualforce Pages
In Visualforce pages, when we try to embed the Dashboards, I have listed some common issues and their solutions that can help you while embedding dashboards on the Visualforce page.
While adding a dashboard to a Visualforce page in Salesforce Lightning, I got an issue where, after deploying the dashboard, the Preview was showing a VF Page Error: “example.com refused to connect.” so I made some changes in settings and then added the dashboards using the above method.
1. Check Clickjack Protection Settings
Salesforce has built-in protections to prevent pages from being embedded in <iframe> tags. To resolve this, follow the steps below.
- Go to the Setup and navigate to Session settings from the quick find box.
- In the session settings, disable the Clickjack Protection for Visualforce Pages and ensure that protection settings allow the Visualforce pages to be displayed in the <iframe>.
- Uncheck some of the security restrictions for testing purposes.
2. Whitelist the Domain in CSP
If there are issues related to the org domain, then we can whitelist the org domain in CSP (Content Security Policy).
- In Salesforce’s setup page, search for and select Trusted URLs.
- Click on the New Trusted URL button on the setup page.
- Enter the API name and your org URL in the URL field.
- In the CSP context, select the option Visualforce Pages.
This way, you can avoid the issues that we generally face while adding a dashboard to the Visualforce page in Salesforce.
Conclusion
In this Salesforce tutorial, we have learned how to add a report chart and a dashboard to the custom Visualforce pages in Salesforce. To deploy the report charts in Visualforce pages, we have used the <analytics:reportChart> tag, and to add the dashboard to the Visualforce pages, we used the <iframe> tag, through which we parsed the dashboard component with an image URL and displayed it on the visualforce pages.
Along with this, we also discussed the issues that we generally face while adding a dashboard to the custom visualforce page, and by following the solutions above, you will be able to resolve those issues and efficiently deploy the reports and dashboards to Visualforce pages in your Salesforce org.
You may also like to read:
- Embed an Image in Salesforce Visualforce Pages
- Visualforce Page Tags in Salesforce
- Implement Pagination in Salesforce Visualforce Pages
- Create Forms using Visualforce Page in Salesforce
- Create Pie Chart in Tableau
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.
