Wyn Enterprise: Using Div Tags

This article talks about embedding Report Viewer and Report Designer components in a web application using div tags and the respective Report Designer and Report Viewer APIs.

Please reach out to our wyn-experts for working code samples to use as further reference.

Embed Wyn Enterprise Report Viewer in a Web App

1. Define the Report Viewer Component

Specify the div element that acts as a host for the viewer:

<div id="report-viewer-app" class="not-displayed"></div>

2. Integrate the Report Viewer Component

To view the reports in report viewer, initialize the Report Viewer component and pass report id of the report to view, in the openReport method:

export const createViewer = async (portalUrl, referenceToken) => {
    const prevDocumentTitle = document.title;

    const info = await getReportingInfo(portalUrl, referenceToken);

    const reportViewerAppId = 'report-viewer-app';
    let viewer = window.GrapeCity.WynReports.Viewer.create({
        element: reportViewerAppId,
        portalUrl,
        referenceToken,
        locale: info.locale,
        makeTitle: (reportName) => reportName,
    });
    return {
        openReport: async (report) => {
            await viewer.openReport(report.id);
            document.getElementById(reportViewerAppId).classList.remove('not-displayed');
        },
        close: () => {
            if (viewer) {
                viewer.destroy();
                viewer = null;
            }
            document.getElementById(reportViewerAppId).classList.add('not-displayed');
            document.title = prevDocumentTitle;
        },
    };
};

Embed Wyn Enterprise Report Designer in a Web App

1. Define the Report Designer Component

Specify the div element that acts as a host for the designer:

 <div id="report-designer-app" class="not-displayed"></div>

2. Integrate the Report Designer Component

To design reports in the designer, initialize the Report Designer component:

export const createDesigner = async (portalUrl, referenceToken) => {
    const prevDocumentTitle = document.title;

    const info = await getReportingInfo(portalUrl, referenceToken);

    const designerOptions = window.GrapeCity.WynReports.Designer.createDesignerOptions(portalUrl, referenceToken);
    designerOptions.locale = info.locale;

    designerOptions.makeTitle = (reportName, options) => {
        const title = `${reportName}${options.dirty ? ' *' : ''}`;
        return title;
    };

    let viewer = null;
    designerOptions.openViewer = (options) => {
        if (!viewer) {
            viewer = window.GrapeCity.WynReports.Viewer.create({
                element: options.element,
                portalUrl,
                referenceToken,
                locale: options.locale,
            });
        }

        viewer.openReport(options.reportInfo.id);
    };

    await window.GrapeCity.WynReports.Designer.renderApplication('report-designer-app', designerOptions);

    const reportDesignerApp = document.getElementById('report-designer-app');

    return {
        createReport: (reportType) => {
            window.GrapeCity.WynReports.Designer.closeViewer();
            window.GrapeCity.WynReports.Designer.api.createReport({
                reportType: (reportType || '').toUpperCase() === 'FPL' ? 'FPL' : 'CPL',
            });
            reportDesignerApp.classList.remove('not-displayed');
        },
        openReport: (report) => {
            window.GrapeCity.WynReports.Designer.closeViewer();
            const reportInfo = {
                id: report.id,
                name: report.name,
                permissions: ['all'],
            };
            window.GrapeCity.WynReports.Designer.api.openReport({ reportInfo });
            reportDesignerApp.classList.remove('not-displayed');
        },
        close: () => {
            if (viewer) {
                viewer.destroy();
                viewer = null;
            }
            window.GrapeCity.WynReports.Designer.destroy();
            reportDesignerApp.classList.add('not-displayed');
            document.title = prevDocumentTitle;
        },
    };
};

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