Hosting Wyn in a Web Application via iFrame

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.

Download sample

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:

<form method="post>
	<div class=" align-content-center">
  <div class="centerAlign">
    <label>Wyn Url </label>
    <input type="text" size="70" asp-for="User.WynUrl" />
  </div>
  <div class="centerAlign">
    <label>Username </label>
    <input type="text" size="70" asp-for="User.Username" />
  </div>
  <div class="centerAlign">
    <label>Password </label>
    <input type="password" size="70" asp-for="User.Password" />
  </div>
  <div class="centerAlignButton">
    <button id="btnLogin" type="submit">Login</button>
  </div>
  </div>
</form>

var request = new HttpRequestMessage(HttpMethod.Post, User.WynUrl.TrimEnd('/') + "/connect/token");
Dictionary < string, string > body = new Dictionary < string, string > ();
body.Add("grant_type", "password");
body.Add("username", User.Username);
body.Add("password", User.Password);
body.Add("client_id", "integration");
body.Add("client_secret", "eunGKas3Pqd6FMwx9eUpdS7xmz");
request.Content = new FormUrlEncodedContent(body);
request.Content.Headers.ContentType = new MediaTypeHeaderValue("application/x-www-form-urlencoded");
var client = _clientFactory.CreateClient();
var response = await client.SendAsync(request);
if (response.IsSuccessStatusCode)
{
    var res = await response.Content.ReadAsAsync < Token > ();
    User.WynUrl = User.WynUrl.TrimEnd('/') + "/integration/?token=" + res.Access_Token;
    return RedirectToPage($ "/WynPortal", new {
        url = User.WynUrl, username = User.Username
    });
} else
{
    Console.Write(response.ReasonPhrase);
    return Page();
}

< iframe id = "wynframe"
src = "@Model.User.WynUrl"
height = "800"
marginwidth = "0"
frameborder = "0"
width = "1200" > < /iframe>
WynPortal.cshtml.cs:
    [BindProperty]
public WynUser User {
    get;
    set;
}

public IActionResult OnGet(string url, string username)
{
    User = new WynUser();
    User.WynUrl = url;
    User.Username = username;
    return Page();
}

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: 

Watch a Demo Video

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.