README
Wyn Report Designer
How to install
npm install @grapecity/wyn-report-designer
How to include
Bundle location: ./node_modules/@grapecity/wyn-report-designer/dist
If previewing reports is not needed, adding viewer-app.css
/ viewer-app.js
to HTML, importing from wyn-report-viewer
and specifying designerOptions.openViewer
can be omitted.
Using the physical path:
<head>
<link href="./node_modules/@grapecity/wyn-report-designer/dist/designer-app.css" rel="stylesheet">
<link href="./node_modules/@grapecity/wyn-report-viewer/dist/viewer-app.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="./node_modules/@grapecity/wyn-report-designer/dist/designer-app.js"></script>
<script type="text/javascript" src="./node_modules/@grapecity/wyn-report-viewer/dist/viewer-app.js"></script>
</body>
Using the package name:
import "@grapecity/wyn-report-designer/dist/designer-app.js";
import "@grapecity/wyn-report-designer/dist/designer-app.css";
import "@grapecity/wyn-report-viewer/dist/viewer-app.js";
import "@grapecity/wyn-report-viewer/dist/viewer-app.css";
Using the attributes main
and style
from package.json
:
import "@grapecity/wyn-report-designer";
import "@grapecity/wyn-report-viewer";
How to use
Add this snippet to <body>
after <script>
with designer-app.js
/ viewer-app.js
:
<div id="report-designer-app"></div>
<script type="text/javascript">
var portal = { url: '<portalUrl>', username: '<username>', password: '<password>' };
function createDesignerApplication(portalUrl, referenceToken) {
var designerOptions = GrapeCity.WynReports.Designer.createDesignerOptions(portalUrl, referenceToken);
var viewer = null;
designerOptions.openViewer = function(options) {
if (!viewer) {
viewer = GrapeCity.WynReports.Viewer.create({
element: options.element,
portalUrl: portalUrl,
referenceToken: referenceToken,
locale: options.locale,
});
}
viewer.openReport(options.reportInfo.id);
};
GrapeCity.WynReports.Designer.renderApplication('report-designer-app', designerOptions);
}
GrapeCity.WynReports.getReferenceToken(portal.url, portal.username, portal.password)
.then(function(referenceToken) {
createDesignerApplication(portal.url, referenceToken);
});
</script>