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
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.
JS
JS
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
The above call will return a list of reports in json format as below:
JS
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:
JS
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
Now when we click on a report name, it will be displayed in the viewer as below:
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.
Wyn Enterprise requires these settings to allow your application to make API calls to Wyn and send the desired response.
- Note: You must have yarn installed before executing the above commands.
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.
If you have questions about this article, reach by email or contact support.
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.
Hosting Wyn in a Web Application via iFrame
Here, we'll integrate Wyn Enterprise in an ASP.NET Core app via iFrame.
Abdias Michael