Working with onDesign and onExit Events
Наши примеры проектов и шаблоны отчётов помогут Вам разобраться в основах работы с нашими продуктами.The viewer and designer can be combined into one edit-and-preview flow, switching between them with React state.
Toggle the two components with state.
How it works. React state chooses which component renders, so users move from preview to editing and back within one screen.
Toggle the two components with state.
function App() {
const [isViewer, setIsViewer] = useState(true);
function onDesignReport(args) { setIsViewer(false); }
async function onExitDesigner() { await report.renderAsync2(); setIsViewer(true); }
return isViewer
? <Viewer options={viewerOptions} report={report}
onDesignReport={onDesignReport} onOpenedReport={onOpenedReport} />
: <Designer options={designerOptions} report={report}
onExit={onExitDesigner} onAssignedReport={onAssignedReport} />;
}onDesignReport— the viewer's Design button; switch the flag to show the designer.onExit— the designer's Exit menu; re-render the report and switch back to the viewer.
How it works. React state chooses which component renders, so users move from preview to editing and back within one screen.