Embed Wyn Enterprise in a Web App using Div

Embedded BI is the integration of BI solutions within business process software. There are many benefits to embedding BI within your own applications. Embedding BI leverages data context to provide relevant information to end-users as they work in familiar environments.

You can embed Wyn's Dashboard Viewer and Designer components in your own custom internal applications or commercial websites using two methods:

Wyn Dashboards API

In this article, we'll develop a simple web application and embed the Viewer and Designer components using div and the Wyn Dashboards API. We'll achieve something like below once we implement these APIs.

Here is the sample showing the integration of Wyn Designer & Viewer using Div in a web application.

Viewer

Embed Wyn Enterprise in a Web App using Div

Designer

Embed Wyn Enterprise in a Web App using Div

Get Categories and Dashboards

To get started, let's fetch the list of categories and dashboards stored on the Wyn Server. For this, we'll send two graphql requests using ajax as below:

graphql
function graphqlRequest(query) {
    return $.ajax({
        url: wynUrl + '/api/graphql?token=' + token,
        type: 'POST',
        data: JSON.stringify({
            query: query,
        }),
        dataType: 'json',
        contentType: 'application/json',
        processData: true,
        headers: getDefaultHeaders(),
        xhrFields: {
            withCredentials: true,
        }
    });
}
Get Categories
function getCategoriesList() {
    return graphqlRequest(
        'query { ' +
        'tags { ' +
        'id,' +
        'name,' +
        'parentId,' +
        'color,' +
        'iconCssClass,' +
        'isFavorites, ' +
        '} ' +
        '}'
    ).then(function (result) {
        console.log(result);
        var categoriesList = getValue(result, 'data.tags') || [];
        return categoriesList;
    });
}
Get Dashboards
function getDashboardsList() {
    return graphqlRequest(
        'query { ' +
        'documenttypes(key: \"dbd\") { ' +
        'documents(orderby: \"-created\") { ' +
        'id, ' +
        'description, ' +
        'type,' +
        'title, ' +
        'tags {id, name}, ' +
        'created_by { name }, ' +
        'created, ' +
        'modified_by { name }, ' +
        'modified, ' +
        '} ' +
        '} ' +
        '}'
    ).then(function (result) {
        console.log(result);
        var dashboardsList = getValue(result, 'data.documenttypes.0.documents') || [];
        return dashboardsList;
    });
}

Now that we have the list of categories and dashboards, we can show them in our application as a list and a grid of cards. You may choose to display them as required in your application.

Let's dive into the APIs and see how we can use them to develop faster and more intuitive BI web applications.

API References

Wyn Dashboards API gets installed with the installation of Wyn Enterprise Server. To use it in our application, we need to add references to the scripts and theme libraries, just as we would for any other library (e.g., bootstrap).

Wyn Dashboard Theme

<link rel="stylesheet" href="http://<WynServerUrl>/api/themefiles/dashboard.vendor.css?theme=dark-forest&version=4.1.16187.0&plugin=dashboards" />
<link rel="stylesheet" href="http://<WynServerUrl>/api/themefiles/dashboard.app.css?theme=dark-forest&version=4.1.16187.0&plugin=dashboards" />

Wyn Dashboard Scripts

<script src="http://<WynServerUrl>/lib/polyfills.js"></script>
<script src="http://<WynServerUrl>/api/PluginAssets/dashboards-4.1.16187.0/dashboard.common.js"></script>
<script src="http://<WynServerUrl>/api/PluginAssets/dashboards-4.1.16187.0/dashboard.table.js"></script>
<script src="http://<WynServerUrl>/api/PluginAssets/dashboards-4.1.16187.0/dashboard.dialog.js"></script>
<script src="http://<WynServerUrl>/api/PluginAssets/dashboards-4.1.16187.0/dashboard.app.js"></script>

Note: The version specified in the above references must be the same as that of the Dashboards Plugin that is installed on the Wyn Server. It can be found through the Admin Portal.

Embed Wyn Enterprise in a Web App using Div

Viewer

The Viewer component is created by passing 'DashboardViewer' as the first argument to WynDashboards' create method. The second argument of this method contains the various parameters that need to be sent along with the create request.

var viewer = WynDashboards.create('DashboardViewer', {
                dashboardId: docId, //Id of the document to View
                edition: 'EN',
                size: "fitToScreen",
                actions: "clearselection,annotation,analysispath",
                openfulldashboardmode: "newwindow",
                containerFilterScope: '',
                version: '1.0.0',
                userId: username, //User name
                lng: 'en',
                baseUrl: wynUrl, //Url of Wyn Server
                token: token, //Access token
});
Designer

The Designer component is created by passing 'DashboardDesigner' as the first argument to WynDashboards' create method. The second argument of this method contains the various parameters that need to be sent along with the create request.

var designer = WynDashboards.create('DashboardDesigner', {
                edition: 'EN',
                dashboardId: docId,
                enableDeveloperMode: true,
                containerFilterScope: '',
                version: '1.0.0',
                userId: username,
                lng: 'en',
                baseUrl: wynUrl,
                token: token
            });

The parameters in focus are:

  • dashboardId - the Id of the dashboard to view/design
  • userId - username of the user
  • baseUrl - Wyn Server Url
  • token - access token retrieved on logging in

Embedding Dashboards using div

Now to show the Viewer and Designer in the application, we'll add two div tags and initialize them as below:

<div id="designer"></div>
<div id="viewer"></div>
Viewer
viewer.initialize({
   container: document.querySelector('#viewer'),
   onClose: () => {
      //console.log('close');
   },
   onLoaded: (docName) => {
      //console.log('loaded');
   },
});
Designer
designer.initialize({
   container: document.querySelector('#designer'),
   onClose: () => {
      //console.log('close');
   },
   onSave: (docName) => {
      //console.log('save');
   },
   onLoaded: (docName) => {
      //console.log('loaded');
   },
});

Embedding Individual Scenarios using div

In addition to embedding the entire dashboard using div, Wyn Dashboards API also provides the ability to embed individual scenarios. To embed individual scenarios, we need to specify an additional option 'scenario' with the scenario's name as its value, when creating the Viewer's object.

viewer = WynDashboards.create('DashboardViewer', {
    scenario: "column-3",
    dashboardId: docId,
    edition: 'EN',
    size: "fitToScreen",
    actions: "clearselection,annotation,analysispath",
    openfulldashboardmode: "newwindow",
    containerFilterScope: '',
    version: '1.0.0',
    userId: username,
    lng: 'en',
    baseUrl: wynUrl,
    token: token,
});

The Viewer with an individual scenario would look like this:

Embed Wyn Enterprise in a Web App using Div

Additional Embedded BI Resources :

Embed Wyn Enterprise in a Web App using Div

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.

Test drive on your own data with our free evaluation.

You can also request a personalized demo to address your individual BI needs.

Take Tour of Wyn Enterprise

Watch an in-depth demo of Wyn, learn about our user portals, and create a report in seconds.

Watch Video