Basic usage

Changes in JasperReports Server

1. Navigate to Path_to_tomcat/webapps/jasperserver-pro/WEB-INF/applicationContext-security-pro-web.xml
2. Add the following entries to <property name="allowedHeaders"> property:
   
   • <value>Fetch-Csrf-Token</value>
   • <value>Owasp_csrftoken</value>

Configure the Default Styles

You have two options for configuring the import of default styles:

• In your main CSS file:

  @import "@jaspersoft/jv-ui-components/dist/jv-ui.css";
  

• At the top of your main TypeScript or JavaScript file:

  import "@jaspersoft/jv-ui-components/dist/jv-ui.css";
  

Load Visualize.js

• Import the visualizejsLoader function from the @jaspersoft/jv-tools package.

  import {
    Authentication,
    VisualizeClient,
    VisualizeFactory,
    visualizejsLoader,
  } from "@jaspersoft/jv-tools";
  

• Provide the visualizejsLoader a valid URL from where the Visualize.js library should be downloaded.
• If you don’t provide a URL because Visualize.js is already loaded into the window object, then this package will automatically take it from there.
• When you provide a valid URL, this method will add a new script tag in your application’s document referencing the URL you provided, making the Visualize.js library available for your application.
• visualizejsLoader is a promise, so you must execute it and it will return the VisualizeFactory. Make sure to store this reference in your application because it will be needed later for logging in the user to JasperReports Server.

Authentication

• Now that the Visualize.js library is loaded in your application, you must authenticate with JasperReports Server.
• Use VisualizeFactory object returned by the visualizejsLoader to authenticate with JasperReports Server. As this is a promise, handling the success and error cases is an exercise for the user.
• Example authentication object:

   {
      auth: {
         name: "joeuser",
         password: "joeuser",
         organization: "organization_1",
         locale: "en_US",
         },
   }
  

• After authenticating, the VisualizeClient object (or simply v object) is returned. It is used to interact with the Visualize.js API. Store a reference to this object in a global scope of your application to perform other operations with Visualize.js, such as loading a report.

More details about Visualize.js loader can be found at loading visualize.js.

Render the Scheduler

The JavaScript Approach

Import

import { renderScheduler, SchedulerConfig } from "@jaspersoft/jv-scheduler";

Scheduler package provides a renderScheduler(v: VisualizeClient, uri:string, container: HTMLElement, config: SchedulerConfigProps): void method.

Parameters:

• v - The VisualizeClient instance used to interact with Visualize.js API.
• uri - The path to a report or a dashboard (/path/to/my/reports/SalesReport).
• container - The DOM element to render input controls to.
• config ^(optional) - The configuration object for the input controls. See configure input controls.

Return value:

• None.

Example:

renderScheduler(visualizeClient, container, schedulerConfig)

The React Approach

Import

import { Scheduler, SchedulerConfigProps } from "@jaspersoft/jv-scheduler";

The package @jaspersoft/jv-scheduler provides a React component that uses the Scheduler methods to render the scheduler component in the UI. This component is called Scheduler and can be used as follows:

<Scheduler
    v={visualizeClient}
    config={schedulerConfig}
/>

The attributes the Scheduler component receives are very similar to what has been explained in the JavaScript approach.