Cloud
Cloud-Dienstleistung für schnelle und effektive Analyse und Visualisierung von Daten für Ihr Business ohne eigene Applikationen zu erstellen oder zu programmieren.
Working with onDesign and onExit Events
Unsere Beispiele der Projekte und Berichtsvorlagen helfen Ihnen, die Grundlagen der Arbeit mit unserer Software zu erlernen.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.