Skip to main content Skip to footer

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:

Hosting Wyn in a Web Application via iFrame

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:

Hosting Wyn in a Web Application via iFrame

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 →

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.

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: 

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.