Supply Custom Headers for JSON Database
Our sample projects and report templates can help you learn the basics of working with our products.When a dashboard reads data from a protected JSON endpoint, authentication headers can be attached in the
In Angular.
How it works. The engine sends the headers with its JSON fetch, so the dashboard can read endpoints behind token protection.
In the screenshot below you can see the result of the sample code:
onBeginProcessData event.In Angular.
import { Component } from "@angular/core";
import { Viewer, Stimulsoft } from "stimulsoft-dashboards-js-angular/viewer";
@Component({
imports: [Viewer],
template: `<sti-viewer [report]="report" [options]="options"></sti-viewer>`
})
export class Example {
report: Stimulsoft.Report.StiReport;
options: Stimulsoft.Viewer.StiViewerOptions;
constructor() {
this.report = new Stimulsoft.Report.StiReport();
this.report.loadFile("Dashboards/OrdersUrl.mrt");
this.report.onBeginProcessData = function (args) {
if (args.database === "JSON" && args.command === "GetData") {
args.headers.push({ key: "X-Auth-Token", value: "*YOUR TOKEN*" });
}
};
this.options = new Stimulsoft.Viewer.StiViewerOptions();
this.options.appearance.fullScreenMode = true;
}
}onBeginProcessData— fires before the data request; checkargs.database/args.commandto target it.args.headers.push({ key, value })— add HTTP headers such as an auth token.
How it works. The engine sends the headers with its JSON fetch, so the dashboard can read endpoints behind token protection.
In the screenshot below you can see the result of the sample code: