Customizing the Designer
Our sample projects and report templates can help you learn the basics of working with our products.The designer's toolbar, file menu and the component palette are all configured through the options object.
In Vue.
How it works. Each option toggles one part of the designer, so users see only the tools you allow.
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.theme = Stimulsoft.Designer.StiDesignerTheme.Office2022LightGrayTeal;
options.appearance.fullScreenMode = true;
options.toolbar.showPreviewButton = false;
options.toolbar.showFileMenu = false;
options.components.showImage = false;
options.components.showShape = false;
options.components.showPanel = false;
</script>
<template>
<Designer :report="report" :options="options" />
</template>toolbar.showPreviewButton/toolbar.showFileMenu— hide toolbar and menu commands.components.showImage/showShape/showPanel… — remove items from the component palette.
How it works. Each option toggles one part of the designer, so users see only the tools you allow.