Integrating the Dashboard Designer into an Application

Unsere Beispiele der Projekte und Berichtsvorlagen helfen Ihnen, die Grundlagen der Arbeit mit unserer Software zu erlernen.
Produkte ✖Dashboards.JS ✖Schnellstart ✖Designer ✖
Dieses Beispiel ist veraltet, checken Sie viele anderen aktualisierten Beispiele in dieser Kategorie aus.This example shows how to integrate the dashboard designer into an Angular application. First of all, load scripts: 
import { Stimulsoft } from 'stimulsoft-dashboards-js/Scripts/stimulsoft.blockly'

Then, create a component: 
@Component({
selector: 'app-root',
template: `<div>
				<h2>Stimulsoft Dashboards.JS Designer</h2>
				<div id="designer"></div>
			</div>`
})

...

After that, create AppComponent class with the dashboard designer integration: 
...

export class AppComponent {
	options: any;
	designer: any;

	ngOnInit() {
		console.log('Loading Designer view');

   		console.log('Set full screen mode for the designer');
    	this.options = new Stimulsoft.Designer.StiDesignerOptions();
    	this.options.appearance.fullScreenMode = false;

   		console.log('Create the dashboard designer with specified options');
    	this.designer = new Stimulsoft.Designer.StiDesigner(this.options, 'StiDesigner', false);

    	console.log('Edit dashboard template in the designer');
    	this.designer.report = Stimulsoft.Report.StiReport.createNewDashboard();

    	console.log('Load dashboard from url');
    	this.designer.report.loadFile('/dashboard/DashboardChristmas.mrt');

    	console.log('Rendering the designer to selected element');
    	this.designer.renderHtml('designer');

   		console.log('Loading completed successfully!');
	}

...

Finally, call constructor(): 
...

	constructor() {
	}
}

Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen:

Integrating the Dashboard Designer into an Application
Hallo! Brauchen Sie Hilfe?