Supply Custom Headers for JSON Database
Our sample projects and report templates can help you learn the basics of working with our products.This example shows how to supply custom headers for JSON Database. First, create the dashboard designer with specified options and load report:
Then, in
Finally, load dashboard from URL and render the designer:
In the screenshot below you can see the result of the sample code:
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() {
}
}In the screenshot below you can see the result of the sample code: