This example shows how to supply custom headers for JSON Database. First, create the dashboard designer with specified options and load report:
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();

...

Then, in onBeginProcessData event handler add custom HTTP headers:
...

	// In `onBeginProcessData` event handler add custom HTTP headers
	this.designer.report.onBeginProcessData = (args: any) => {
		if (
			args.database === "JSON" && 
			args.command === "GetData" && 
			args.pathData && args.pathData.endsWith("/ProtectedDemo.json")
		) {
			// Add custom header to pass through backend server protection
			args.headers.push({key: "X-Auth-Token", value: "*YOUR TOKEN*"});
		}
	};
	
...

Finally, load dashboard from URL and render the designer:
...

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

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

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

	constructor() {
	}
}

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

Supply Custom Headers for JSON Database

By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.