Hosting Wyn in a Web Application via iFrame
Wyn Enterprise is a fully-secured enterprise business intelligence software that delivers collaborative self-service reporting and analytics. While Wyn Enterprise helps end-users design and work with ad hoc dashboards and reports, it also enables enterprise IT teams to integrate the functionality right into their business systems. They can leverage embedded BI to bring the analytics and KPIs to the user where they work, rather than have them switch to a special BI environment.
In this article, we'll integrate Wyn Enterprise in an ASP.NET Core app. Wyn, in itself, is a self-hosted application and doesn’t need to be integrated in any other tool or application; however, sometimes we may want to integrate it within our own applications.
To integrate Wyn Enterprise in an ASP.NET Core app:
- Get an authentication token from the Wyn server through an API call.
- Construct the Wyn Portal Url using this token.
- Set this URL as the source of an iFrame.
Let’s look at these steps in detail.
Step 1: Create an ASP.NET Core App
Create an ASP.NET Core Web app with Razor pages (you could choose MVC if it suits you better). If you already have created an ASP.NET Core app, you can skip this step.
If you don’t have one, you could refer to this tutorial to get started with Razor Pages in ASP.NET Core.
Step 2: Create the UI
Create the UI for the user to enter the Wyn URL, username and password. Since we’re going to send a POST request to the api to get the authentication token, we’ll place all our elements inside a form element with its method set to ‘post.’
Paste the following code in Index.cshtml:
This is how it will look like with the above HTML:
Step 3: Get Authentication Token
Here, we’ll send out a POST request using HTTPClient to the Wyn api (/connect/token) with the entered username and password as part of the request’s body. Once we get a response we’ll use the returned token and append it to the Wyn url to be used as the source of the iframe on the next page.
Place the following code in the OnPostAsync method of Index.cshtml.cs.
To obtain the client_secret, please access the url ‘{serverURL}/management#client-management’ and get the client_secret corresponding to the ‘integration’ client_id.
You must be logged in as the admin to access the above URL (you might have to edit the client to view the complete client_secret).
These are a part of the request’s body and the endpoint returns an access token which is then used in all subsequent API calls to ensure the required permissions are granted.
Step 4: Show Wyn Portal in iFrame
The final step is to use the Wyn URL from the previous page as the source of the iframe on the next page.
Place the following code in the .cshtml and .cshtml.cs pages of your Razor page.
WynPortal.cshtml:
Once you enter the Wyn URL, username and password and click login, this is how the next screen will look:
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.
Embed Individual Dashboard Scenarios into a Web App
An overview of Wyn's embeddable BI capabilities and integrate a single scenario/visualization from a complete dashboard.
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.