@grapecity/wyn-report-designer NPM

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>

@everything-registry/sub-chunk-373 @zalastax/nolb-_grape @infinitebrahmanuniverse/nolb-_grape

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago