Using a Custom Data Adapter

Our sample projects and report templates can help you learn the basics of working with our products.
View on GitHub
Products ✖Dashboards.JS ✖Data ✖Customization ✖
For a data source the engine does not support natively, you can register a custom database that answers its data commands yourself.

In Angular.
import { Component } from "@angular/core";
import { Designer, Stimulsoft } from "stimulsoft-dashboards-js-angular/designer";

@Component({
    imports: [Designer],
    template: `<sti-designer [(report)]="report" [options]="options"></sti-designer>`
})
export class Example {
    report: Stimulsoft.Report.StiReport;
    options: Stimulsoft.Designer.StiDesignerOptions;

    constructor() {
        Stimulsoft.Report.Dictionary.StiCustomDatabase.registerCustomDatabase({
            serviceName: "MyDatabase",
            process: function (command, callback) {
                if (command.command === "TestConnection") callback({ success: true });
                if (command.command === "RetrieveSchema")  callback({ success: true, data: demoData, types: demoDataTypes });
                if (command.command === "RetrieveData")    callback({ success: true, data: demoData[command.queryString] });
            }
        });

        this.report = new Stimulsoft.Report.StiReport();
        this.report.loadFile("Dashboards/CustomAdapter.mrt");

        this.options = new Stimulsoft.Designer.StiDesignerOptions();
        this.options.appearance.fullScreenMode = true;
    }
}

How it works. The engine talks to your adapter through the same command protocol as built-in databases, so any JavaScript-queryable source becomes a dashboard data source.
View on GitHub Download
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.
I agree