You can use HTML Div tags and APIs to embed the Report Viewer, Report Designer, and Data Source Designer components of the Wyn Enterprise application in another web application. Follow the below instructions,

Note: To enable your web application to make API calls to Wyn Enterprise and send the desired response, add the location and content-disposition to the exposed headers. For more information, please see System Configurations.

Report Viewer and Designer Components

1. Define Report Viewer and Designer Components - Define a single host element for both Report Viewer and Report Designer. Specify the following Div tag to define a single host,

   <div id="wyn-root"></div>

2. Install the Wyn Intergration Package - Run the following command in the root directory of your application to install the Wyn Integration Package,

   npm install @grapecity/wyn-integration

3. Integrate The Report Viewer Component - To view the reports in Report Viewer, initialize the Report Viewer component and pass Report Id of the report in the openReport method:,

   var instance = null;
   const createViewer = async (portalUrl, referenceToken, report) => {
   
       if (instance) {
           instance.destroy();
           clearContainer();
       }
   
       wynIntegration.createReportViewer({
           baseUrl: portalUrl,
           reportId: report.id,
           lng: 'en',
           token: referenceToken,
           // for v5.0, v5.1 ignore
           //version: '5.0.21782.0',
       }, '#wyn-root').then(ins => {
           instance = ins;
       });
   }
   
   const clearContainer = () => {
       const container = document.querySelector('#wyn-root');
       if (container) container.innerHTML = '';
   }

4. Integrate The Report Designer Component - To design reports in the designer, initialize the Report Designer component in the createDesigneroptions method,

   	const createDesigner = async (portalUrl, referenceToken, onSavedReport, report, reportType) => {
   
        if (instance) {
            instance.destroy();
            clearContainer();
        }
   
        let reportId = report != null ? report.id : '';
        wynIntegration.createReportDesigner({
            baseUrl: portalUrl,
            reportId: reportId,
            lng: 'en',
            token: referenceToken,
            onSaved: onSavedReport,
            makeTitle: (reportName, options) => {
                const title = `${reportName}${options.dirty ? ' *' : ''}`;
                return title;
            },
            // for v5.0, v5.1 ignore
            //version: '5.0.21782.0',
        }, '#wyn-root').then(ins => {
            instance = ins;
            instance.closeViewer();
            instance.api.createReport({ reportType });
        });
    };

Find the complete sample for embedding Wyn Report Viewer and Designer on GitHub.

Please reach out to our Wyn Experts for working code samples to use as further reference.

Datasource Designer Component

Install the Wyn Integration Package - Run the following command in the root directory of your application to install the Wyn Integration Package,

    npm install @grapecity/wyn-integration

Integrate The Datasource Designer Component - Wyn supports embedding the Data Source Designer into any DIV container in a web application. To design changes to data sources online integrate as follows:

import { WynIntegration } from '@grapecity/wyn-integration';

let designer: any = null;
const createDesigner = (baseUrl, token, title, documentId) => {
    if (designer) {
        designer.destroy();
    }

WynIntegration.createDatasourceDesigner({
                    baseUrl,
                    token,
                    theme: 'default',
                    //language: 'En',
                    showCloseButton: true,
					showCreateDataSourceItemPanel: false,
					specifiedDatasourceType: 'SqlServer',
                    siteTitle: 'sds',
                    // for v5.0, v5.1 ignore
                    //version: '6.0.26071.0',
                }, '#wyn-root').then(ins => {
                    state.loading = false;
                    state.ins = ins;
                });
}	

It supports the specifiedDatasourceType and showCreateDataSourceItemPanel. If the showCreateDataSourceItemPanel is set to False, the page for creating data sources is opened directly and the datasource selector page is not displayed. Using the specifiedDatasourceType property, you can by default open the datasource creation page of the specified database.

Please note that there can be the following error scenarios:

• Scenario 1- If Datasource is disabled

  If the datasource provider is disabled by the admin, then an

  Error message box The specified datasource type ' {{datasourceName}}' is disabled by the administrator is displayed as shown below.

  
  

  
  

• Scenario 2 - The DataSource name is not valid

  Error message box Invalid datasource type '{{datasourceName}}' is displayed as shown below.

  
  

See Also

System Configurations