Using Designer Events
Our sample projects and report templates can help you learn the basics of working with our products.The designer raises events for saving, creating, previewing and exiting — bind the ones you need as component events.
In Vue.
How it works. Each designer action is surfaced as an event, so your app can persist, seed or track the user's work.
In Vue.
<script setup lang="ts">
import { Designer, Stimulsoft } from 'stimulsoft-dashboards-js-vuejs/designer'
var report = new Stimulsoft.Report.StiReport();
report.loadFile("Dashboards/Dashboard.mrt");
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
function onSaveReport(args: Stimulsoft.Designer.SaveReportArgs) {
alert("onSaveReport event");
}
function onCreateReport(args: Stimulsoft.Designer.CreateReportArgs) {
var dataSet = new Stimulsoft.System.Data.DataSet("Demo");
dataSet.readJsonFile("Data/Demo.json");
args.report.regData("Demo", "Demo", dataSet);
args.report.dictionary.synchronize();
}
function onExit(args: Stimulsoft.Report.EventDataArgs) {
alert("onExit event");
}
</script>
<template>
<Designer :report="report" :options="options" @save-report="onSaveReport" @create-report="onCreateReport" @exit="onExit" />
</template>onCreateReport— register data for each new dashboard (viaargs.report.regData).onSaveReport/onExit— react when the user saves or leaves the designer.
How it works. Each designer action is surfaced as an event, so your app can persist, seed or track the user's work.