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 Vue.
How it works. A single flag chooses which component renders, so users move from dashboard preview to editing and back within one screen.
In Vue.
<script setup lang="ts">
import { ref } from "vue";
import { Viewer, Stimulsoft } from "stimulsoft-dashboards-js-vuejs/viewer";
import { Designer } from "stimulsoft-dashboards-js-vuejs/designer";
const isViewer = ref(true);
var report = new Stimulsoft.Report.StiReport();
report.loadFile("Dashboards/Dashboard.mrt");
function onDesignReport(a) { isViewer.value = false; }
function onOpenedReport(a) { report = a.report; }
async function onExitDesigner() { await report.renderAsync2(); isViewer.value = true; }
function onAssignedReport(a) { report = a.report; }
</script>
<template>
<Viewer v-if="isViewer" :report="report" @design-report="onDesignReport" @opened-report="onOpenedReport" />
<Designer v-else :report="report" @exit="onExitDesigner" @assigned-report="onAssignedReport" />
</template>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.