You can use HTML Div tags and APIs to embed the Report Viewer and Report 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.

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.

See Also

     System Configurations