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 straight-forward. 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 login 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.

JS
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 => {
        alert(error);
        return null;
    });
}

The 'url' parameter in the above method is the url of your Wyn server. The response of the above call will be something like below:

JS
{
   "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.

JS
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 = response.data.documenttypes[0].documents;
    let list = documents.map(x => ({ name: x.title, id: x.id }));
    list.sort((x, y) => x.name < y.name ? -1 : 1);
    return list;
}

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

JS
{
  "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

Let us now 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) which 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:

JS
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:

JS
const reports = await getReportList(portalUrl, referenceToken);
            reportsList.innerHTML = null;
            reports.forEach(report => {
                var item = document.createElement("li");
                item.value = report.id;
                var text = document.createElement("span");
                text.innerHTML = report.name;
                item.appendChild(text);
                item.className = 'wyn-report-list-item';
                reportsList.appendChild(item);
                item.addEventListener('click', () => {
                    let items = reportsList.children;
                    for (let i = 0; i < items.length; i++) {
                        items[i].classList.remove('active');
                    }
                    item.classList.add('active');
                    wynViewer.openReport(report.id);
                });
            });

Now when we click on a report name, it will be displayed in the viewer as below:

Embedding Wyn Enterprise in a Web App via ReportViewer

A complete sample app with the above implementation is available for download here.

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.

These settings are required by Wyn Enterprise 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
     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 Wyn.Experts@grapecity.com.

Are you interested in implementing an advanced BI system into your business?

Request a Trial | Request a Demo