Embed Individual Dashboard Scenarios into a Web App

Embedded BI is the integration of BI solutions within business process software. Instead of using a standalone application, embedded BI enables business intelligence directly within an organization’s application.

Embedded BI provides critical to day-to-day operations and long-term strategic planning by providing actionable insights into the same environment as other business applications.

Embedded BI should include the ability to embed more than only dashboards.

While useful in many cases, embedding entire dashboards runs the risk of missing key takeaways from the dashboard consumer’s data. End-users may skim over a dashboard, missing the aggregate key points, or misinterpret a visualization.

Embedded BI should always offer the flexibility to embed individual visualizations as their own entity in a business application, such as an individual KPI (single scenario integration).

Integrate a Single Scenario

In this article, we’ll explore the ability to integrate a single scenario. Here’s a glimpse of what we can achieve by embedding individual scenarios from the complete dashboard. The ‘Gross Profit Margin,’ ‘Operating Profit,’ and ‘Monthly Sales’ are all individual scenarios from an existing dashboard.

Generate Scenario URL in Application

The basic concept involved in integrating a single scenario into a business application is to generate the URL for the scenario with the required options and set it as the source of an iframe. It is similar to embedding an entire dashboard into an application, but the URL will have an additional parameter ‘scenario’ where the name of the visualization is passed in as its value.

URL:

http://<WynServerUrl>/dashboards/view/<DashboardID>?scenario=<ScenarioName>


Once the URL is created, we can set it as the source of an iframe.

<iframe className="dashboard-preview" title="Scenario View" src={scenarioUrl} />

For the purpose of this article, we’ll be working with a reactjs application. The Server URL, Token and the Dashboard ID are stored in the state object of the App component.

export default class App extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            token: '61keii49qdakj031k9e1h9ann0s8e08qhlk741nkjkl22n2asdf983yi2bsi3bdn', //Token generated from Wyn Server
            serverURL: 'http://localhost:51980', //Wyn Server Url
            dashboardID: '28ack2s2-9cc9-2h8s-j9l1-ois2nai4la32', //ID of the Dashboard containing the KPI/Visualization
            docTitle: 'Retail Sales Analysis',           
            scenarioURL: '',
            selectedStore: null,
            selectedRegion: 'All'
        };
}

To create the scenario URL, I’ve added a function that will combine the values of the variables stored in the state object and return the URL with the specified scenario name.

generateScenarioUrl = (scenarioName) => {
        let url = "";
        url = `/dashboards/view/${this.state.dashboardID}?token=${this.state.token}&scenario=${scenarioName}&size=fittoscreen&actions=clearselection&openfulldashboardmode=newwindow`;
        return url;
}

The scenario name can be found from the Dashboard in Edit mode from the Inspector panel on the right.

Generate Scenario URL through Wyn Portal

Although you can generate the scenario URL within your application itself as shown above, Wyn Enterprise also gives you the ability to generate it through the Portal in two simple steps:

1. Edit Dashboard

Click the ‘More…’ button on the Dashboard where the visualization/KPI you wish to embed exists and select Edit Dashboard.

2. Get Scenario Markup

Select the scenario/visualization that you wish to embed and click on the ‘Share Scenario’ option at the top right corner. From the popup you can select/deselect options you wish to include/exclude and click the ‘Copy Options’ button to copy the markup.

You can now embed the copied iframe markup in your application. The markup contains all the required parameters (server URL, token, dashboard id and scenario name) along with options such as size and analysis path, etc.

Download Sample

Running the sample

To run the attached sample, follow these steps:

1. Open the command prompt for the sample location and run the following command:
   npm install
   
2. Now execute the following command to run the application:
   npm run start

Note: You must have nodejs installed before executing the above commands.

Embedding Wyn Enterprise – Additional Resources

For language packs, samples, and custom visuals, explore our GitHub . 

Embedding Wyn Enterprise in an Application via API – Part I

Here, we’ll integrate Wyn into a React application with the help of Wyn’s API endpoints.

Learn More →

Embed WynDashboards in a Web App Using Div

Here, we’ll develop a simple web application and embed the Viewer and Designer components using div and the Wyn Dashboards API.

Read More →

Hosting Wyn in a Web Application via iFrame

Here, we’ll integrate Wyn Enterprise in an ASP.NET Core app via iFrame.

Read More →

Embedding Wyn Enterprise in a Web App via ReportViewer

How to embed Wyn Enterprise in a Web App using Wyn’s own ReportViewer.

Learn More →

Understand the Story Behind Your Data

 Wyn is a web-based BI and data analytics platform that provides greater insight into your data.

Wyn offers built-in tools for report and dashboard creation, data governance, security integration, embedded BI, automated document distribution, and a business-user friendly interface for self-service business intelligence.

Learn more about Wyn Enterprise: 

Watch a Demo Video Test Drive Wyn

Abdias Michael

A veteran of the technical team, Senior Software Engineer Abdias Michael loves working with new technologies and focusing on providing quality solutions to customers. In his spare time, he enjoys traveling, playing guitar, and badminton. He has a Bachelor of Engineering degree from Dronacharya College of Engineering. You can find him on Twitter at @abdiasm.