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.
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.
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.
Running the sample
To run the attached sample, follow these steps:
- Open the command prompt for the sample location and run the following command:
npm install - 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.
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.
Hosting Wyn in a Web Application via iFrame
Here, we'll integrate Wyn Enterprise in an ASP.NET Core app via iFrame.
Embedding Wyn Enterprise in a Web App via ReportViewer
How to embed Wyn Enterprise in a Web App using Wyn's own ReportViewer.
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:
Abdias Michael