Embedding MI Content in Visualforce Pages

Metric Insights Tiles, Preview, Full Chart View, and the entire Viewer can be embedded in Visualforce Pages.

PREREQUISITES:

  • Embedding must be enabled both for MI and external application that is used as Data Source for Object creation. See the below section for instructions on how to enable embedding on the MI side.
Enabling Embedding for Metric Insights

By default, Metric Insights restricts embedding of its Objects in external applications, but it can be enabled by adding custom configuration to web service.

  • For Simple Installation, the configuration file is located at: /opt/mi/config/custom/etc/apache2/mi.conf.external.d/metricinsights-custom.conf
  • For orchestrated installations, the configuration file is located in web container at: /opt/mi/config/apache2/external_config/metricinsights-custom.conf

The example below describes changes for Simple Installation. For orchestrated installation, access web container and follow the same procedure (mi-console command is used only for Simple Installation).

$ mi-console
$ vi /etc/apache2/mi.conf.external.d/metricinsights-custom.conf
Header unset X-Frame-Options
Header append Content-Security-Policy "frame-ancestors 'self' <Salesforce domain name where MI Object will be embedded>;"

$ cat /etc/apache2/mi.conf.external.d/metricinsights-custom.conf 
Header unset X-Frame-Options
Header append Content-Security-Policy "frame-ancestors 'self' <Salesforce domain name where MI Object will be embedded>;"

$ service apache2 restart

1. Finding Embed Codes

This article describes how to embed External Report as an example. For more details on how to find embed codes in Metric Insights, see Embedding Overview.

Locate and access the Object for embedding

Proceed to Advanced tab

 

  1. Click [Embed Code] under Public Access & Embedding
  2. Select Language for embedding
  3. Choose Element view
  4. Copy URL form the Embed code field as exemplified above

2. Access Visualforce Pages in Salesforce

Access Setup Home from Salesforce UI

  1. Under Custom Code, find Visualforce Pages

3. Add New Page

  1. Click [New] to access the Page editor

4. Provide Details

  1. Add Label for the Page
  2. Input a descriptive phrase in Name
    • NOTE: The name can only contain underscores and alphanumeric characters. It must begin with a letter and be unique, and must not include spaces, end with an underscore, or contain two consecutive underscores.
  3. Optionally, add Description
  4. Use the Visualforce Markup Language to create the Page
    • Insert the URL copied from Embed code field
  5. [Save]
  6. [Preview]

5. Verify the Result