Integrating the Dashboard Viewer into an Application (TypeScript)
Our sample projects and report templates can help you learn the basics of working with our products.This example shows how to integrate the dashboard viewer into a React application with TypeScript. First of all, load scripts:
Then, create an
Finally, use
In the screenshot below you can see the result of the sample code:
import React from 'react';
import { Stimulsoft } from 'stimulsoft-dashboards-js/Scripts/stimulsoft.viewer'
import 'stimulsoft-dashboards-js/Css/stimulsoft.viewer.office2013.whiteblue.css';
import './App.css';Then, create an
App class which extends from React component:
class App extends React.Component {
private viewer = new Stimulsoft.Viewer.StiViewer(undefined, 'StiViewer', false);
private report = Stimulsoft.Report.StiReport.createNewDashboard();
render() {
return (
<div id="viewer" className="App">
</div>
);
}
...Finally, use
componentDidMount() method to set viewer options, load the dashboard and display it in the viewer:
...
async componentDidMount() {
console.log('Loading Viewer view');
const response = await fetch('dashboard/DashboardChristmas.mrt');
const data = await response.json();
console.log('Load dashboard from url');
this.report.loadDocument(data);
this.viewer.report = this.report;
console.log('Rendering the viewer to selected element');
this.viewer.renderHtml('viewer');
}
...In the screenshot below you can see the result of the sample code: