Customizing the Viewer
Our sample projects and report templates can help you learn the basics of working with our products.Every part of the viewer — toolbar buttons, export formats, appearance — is toggled through the options object.
In Vue.
How it works. The options object has a flag for every UI element, so the viewer can be trimmed to exactly what your app needs.
In Vue.
<script setup lang="ts">
import { Viewer, Stimulsoft } from 'stimulsoft-dashboards-js-vuejs/viewer'
var report = new Stimulsoft.Report.StiReport();
report.loadFile("Dashboards/Dashboard.mrt");
var options = new Stimulsoft.Viewer.StiViewerOptions();
options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022LightGrayTeal;
options.appearance.fullScreenMode = true;
options.toolbar.showOpenButton = false;
options.exports.showExportToPdf = false;
</script>
<template>
<Viewer :report="report" :options="options" />
</template>toolbar.showOpenButton/exports.showExportToPdf— show or hide individual toolbar and export commands.appearance.theme/fullScreenMode— the overall look of the viewer.
How it works. The options object has a flag for every UI element, so the viewer can be trimmed to exactly what your app needs.