The viewer and designer can be combined into one edit-and-preview flow, switching between them with a flag.

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} />;
}

How it works. A single flag chooses which component renders, so users move from dashboard preview to editing and back within one screen.

Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.