Integrating the Dashboard Designer into an Application
Unsere Beispiele der Projekte und Berichtsvorlagen helfen Ihnen, die Grundlagen der Arbeit mit unserer Software zu erlernen.This example shows how to integrate the dashboard designer into a Vue.js 3 application. First of all, load scripts:
Then, create the dashboard designer with specified options:
Next, create a new dashboard instance and load dashboard:
After that, render the designer to selected element:
Finally, show the designer:
Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen:
import { onMounted } from "vue";
import { Stimulsoft } from "stimulsoft-dashboards-js/Scripts/stimulsoft.blockly.editor";
import 'stimulsoft-dashboards-js/Css/stimulsoft.designer.office2013.whiteblue.css';
import 'stimulsoft-dashboards-js/Css/stimulsoft.viewer.office2013.whiteblue.css';Then, create the dashboard designer with specified options:
onMounted(() => {
console.log('Loading Designer view');
console.log('Set full screen mode for the designer');
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = false;
console.log('Create the dashboard designer with specified options');
var designer = new Stimulsoft.Designer.StiDesigner(options, 'StiDesigner', false);
...Next, create a new dashboard instance and load dashboard:
...
console.log('Create a new dashboard instance');
var report = Stimulsoft.Report.StiReport.createNewDashboard();
console.log('Load dashboard from url');
report.loadFile('dashboard/DashboardChristmas.mrt');
console.log('Edit dashboard template in the designer');
designer.report = report;
...After that, render the designer to selected element:
...
console.log('Rendering the designer to selected element');
designer.renderHtml('designer');
console.log('Loading completed successfully!');
});Finally, show the designer:
<div id="designer"></div>Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen: