Integrating the Dashboard Viewer into an Application (TypeScript)
Unsere Beispiele der Projekte und Berichtsvorlagen helfen Ihnen, die Grundlagen der Arbeit mit unserer Software zu erlernen.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
Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen:
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');
}
...Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen: