Working with onDesign and onExit Events
Наши примеры проектов и шаблоны отчётов помогут Вам разобраться в основах работы с нашими продуктами.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.