Skip to main content

Embedding Wyn Enterprise in a Web App via ReportViewer

Wyn Enterprise is a business intelligence software that delivers collaborative self-service reporting and analytics, data visualization, data moderation, and dashboards.

Not only does Wyn Enterprise give you the flexibility to design your own dashboards and reports using your data, it also gives you the ability to provide embedded BI inside your own applications.

In an earlier article, we talked about hosting Wyn Enterprise in a web application with the help of an iFrame.

In this article, we're going to embed Wyn Enterprise in a Web App using Wyn's own ReportViewer.

The ReportViewer encompasses the required operations (navigation, parameters panel, export, print, etc), so you don't need to code these functions separately.

The Authentication Process in BI

Every business application needs to be secure and Wyn Enterprise makes sure your data isn't compromised by providing you with its own authentication method. The authentication process in Wyn is simple and straightforward. We'll send out a request to Wyn's authentication API endpoint '/connect/token' with the required parameters to get an access token.

The API endpoint requires grant_type, username, password, client_id and a client_secret as parameters. The username and password are the same that you use to log in to the Wyn portal. These are all a part of the request's body and the endpoint will return an access token. The returned access token will be required subsequently to get a list of reports from the Wyn Server and to view a report.


async function getReferenceToken(url, user, password) {
    const endpoint = concatUrl(url, 'connect/token');
    const resolveResponse = async (response) => {
        const jsonResponse = await response.json();
        if (jsonResponse.error) return null;
        return jsonResponse.access_token;

    return await fetch(endpoint, {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            Accept: '*/*',
        method: 'post',
        body: `grant_type=password&username=${user}&password=${password}&client_id=integration&client_secret=eunGKas3Pqd6FMwx9eUpdS7xmz`
    }).then(async response => {
        let res = await resolveResponse(response);
        return res;
    }).catch(error => {
        return null;


   "access_token": "ywkpbtr9aafehf39uaiuic4292ncashf9hf4nwqpzx29aqoduxn",
   "expires_in": 315360000,
   "token_type": "Bearer"
Get Reports List

Once the authentication is successful, the next step is to show a list of reports stored on your Wyn server (that the user can select to view).

The call to the server to get a list of all the reports is made using a GraphQL query, along with the access token that was fetched through the Authentication API endpoint (in the first step).

GraphQL query:

query: 'query { documenttypes(key:"rdl") { documents{ id, title, type } } }'

For reports, the 'key' attribute's value is 'rdl'. Additional fields can be added to the 'documents' array if required, e.g. created, created_by, modified, modified_by, effective_ops, etc.

Here is more information on using GraphQL with Wyn Enterprise.


async function getReportList(portalUrl, referenceToken) {
    const url = concatUrl(portalUrl, 'api/graphql');
    const init = {
        headers: {
            'Cache-Control': 'no-cache, no-store, must-revalidate',
            Accept: 'application/json',
            'content-type': 'application/json',
            'pragma': 'no-cache',
            'Reference-Token': referenceToken
        method: 'post',
        body: JSON.stringify({ query: 'query { documenttypes(key:"rdl") { documents{ id, filename, title, type } } }' })
    const res = await fetch(url, init);
    if (!res.ok) return null;
    let response = await res.json();
    let documents =[0].documents;
    let list = => ({ name: x.title, id: }));
    list.sort((x, y) => < ? -1 : 1);
    return list;

The above call will return a list of reports in json format as below:


  "data": {
    "documenttypes": [
        "documents": [
            "id": "4b7e3f22-41e1-409e-bd22-c36d4a734e54",
            "filename": "TestPageReport.rdlx",
            "title": "TestPageReport",
            "type": "rdl"
            "id": "6b8d4j22-41e1-409e-bd22-cadjsf48afj4",
            "filename": "TestReport2.rdlx",
            "title": "TestReport2",
            "type": "rdl"
  "errors": null

Create the Report Viewer

Now, we'll look at creating the Report Viewer which will be used to view the reports fetched in the previous step. Wyn Enterprise has a native Report Viewer control which inherits its functionality from the ActiveReports JS Viewer.

To initialize the Wyn Report Viewer, we need an HTML element (div) that will act as the host element. Next, we add the reportService attribute to the Report Viewer with the URL of the Wyn Server and the access token fetched through the Authentication API endpoint in the first step.

Below is the code to initialize the Report Viewer:


const wynViewer = GrapeCity.ActiveReports.JSViewer.create({
        element: '#wyn-viewer-root',
        reportID: '',
        reportService: {
            url: portalUrl,
            securityToken: referenceToken,

Viewing a Report

Now that we have initialized the Report Viewer, the next step is to load a report in the viewer to view it.

To load a report in the viewer, we need to call the viewer's 'openReport' method, which requires the report Id as a parameter. The viewer then uses your Wyn portal URL and the access token fetched earlier to get the report from the server and display it. We're going to add the 'click' event listener to the list items displaying the report name and pass the report Id to the 'openReport' method.

Let's look at the code snippet below:


const reports = await getReportList(portalUrl, referenceToken);
            reportsList.innerHTML = null;
            reports.forEach(report => {
                var item = document.createElement("li");
                item.value =;
                var text = document.createElement("span");
                text.innerHTML =;
                item.className = 'wyn-report-list-item';
                item.addEventListener('click', () => {
                    let items = reportsList.children;
                    for (let i = 0; i < items.length; i++) {

Running the Sample Application

In order to run the sample, please follow these steps:

1. Add CORS settings to your Wyn Enterprise server.

a.) Open your Wyn Enterprise Portal
b.) Go to the Admin Portal
c.) From the left panel, select System Configurations
d.) Under 'Allowed CORS Origins' enter your application URL(s) where you will run/host the application. For example, when running the application in development mode, add 'http://localhost:3000'.
e.) Under 'Exposed Headers' add 'location' and 'content-Disposition', each in a separate line.

Wyn Enterprise requires these settings to allow your application to make API calls to Wyn and send the desired response.

Embedding Wyn Enterprise in a Web App via ReportViewer

2. Open command prompt and run the following commands to run the sample application:

yarn dev

The dev server will start and you can open your browser and enter 'http://localhost:3000' to see the application in action.

For any questions on this article, please email

Understand the Story Behind Your Data

Wyn Enterprise 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: 

About the author

Abdias Michael

A veteran of GrapeCity's 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.
Back to top