Working with onDesign and onExit Events
Our sample projects and report templates can help you learn the basics of working with our products.The viewer and designer can be combined into one edit-and-preview flow, switching between them with a flag.
In React.
How it works. A single flag chooses which component renders, so users move from dashboard preview to editing and back within one screen.
In React.
import { Viewer, Stimulsoft } from "stimulsoft-dashboards-js-react/viewer";
import { Designer } from "stimulsoft-dashboards-js-react/designer";
var report = new Stimulsoft.Report.StiReport();
report.loadFile("Dashboards/Dashboard.mrt");
function App() {
const [isViewer, setIsViewer] = React.useState(true);
function onDesignReport(a) { setIsViewer(false); }
function onOpenedReport(a) { report = a.report; }
async function onExitDesigner() { await report.renderAsync2(); setIsViewer(true); }
function onAssignedReport(a) { report = a.report; }
return isViewer
? <Viewer report={report} onDesignReport={onDesignReport} onOpenedReport={onOpenedReport} />
: <Designer report={report} onExit={onExitDesigner} onAssignedReport={onAssignedReport} />;
}onDesignReport— the viewer's Design button; switch the flag to show the designer.onExit— the designer's Exit; re-render the dashboard and switch back to the viewer.
How it works. A single flag chooses which component renders, so users move from dashboard preview to editing and back within one screen.