UI Modification Providers

All frontend interfaces provided by FineBI 6.0 are exposed in the form of providers. UI modification providers are used to inject custom UI elements into the dashboard, dataset, and other interfaces.

bi.provider.conf.list.report.item

Inject custom items into the dashboard tab dropdown under a theme (effective in the dashboard edit view).

Example: Insert an option after the 3rd item in the current dropdown

BI.config('bi.provider.conf.list.report.item', (provider) => {
    provider.addReportOperatorItem([{
        text: "Injected Item",
        cls: 'inject-font',
        handler: function () {
            const refresh = this.attr("refresh"); // Get the method to refresh the dashboard
            const { id } = this.attr("reportInfo"); // Get dashboard-related information
            // do something
            refresh(); // Call refresh as needed
        },
    }], 3)
})

bi.provider.conf.list.widget.item

Inject custom items into the component tab dropdown under a theme (effective in the dashboard edit view).

Example: Insert an option after the 3rd item in the current dropdown

BI.config('bi.provider.conf.list.widget.item', (provider) => {
    provider.addWidgetOperatorItem([{
        text: "Injected Item",
        cls: 'inject-font',
        handler: function () {
            const refresh = this.attr("refresh"); // Get the method to refresh the component
            const { id } = this.attr("widgetInfo"); // Get component-related information
            // do something
            refresh(); // Call refresh as needed
        },
    }], 3)
})

bi.provider.conf.toolbars_analysis

Add buttons to the top-right button group of the self-service dataset editor (effective in the self-service dataset edit view).

BI.config('bi.provider.conf.toolbars_analysis', (provider) => {
    provider.addTooItems([{
        type: "bi.button",
        text: "Injected Button",
        handler: () => { BI.Msg.alert('1') }
    }]);
})

bi.provider.conf.toolbars.analysis_preview

Inject additional UI elements at the preview button area of the self-service dataset table preview.

BI.config('bi.provider.conf.toolbars.analysis_preview', (provider) => {
    provider.addTooItems([{
        type: "bi.button",
        text: "Injected Button",
        handler: () => { BI.Msg.alert('1') }
    }]);
})

bi.provider.conf.toolbars

Add new items and their popup layers to the top-right area of the public data interface [Association View / Multi-path Settings / Update Task Management / Global Update].

BI.config('bi.provider.conf.toolbars', (provider) => {
    provider.inject([
        {
            type: 'bi.button',
            value: 10, // Must differ from the values of existing buttons
            openLayerType: 'bi.xxx.layer', // Popup layer shown on click
        },
    ]);
})

bi.provider.conf.pack.table.toolbars

Inject or filter table toolbar configuration.

BI.config('bi.provider.conf.toolbars', (provider) => {
    provider.inject([{
        type: 'edit_custom_table',
        content: ""
    }], [key1]);
    provider.filter("my-key");
})

bi.provider.detail.widget.down_list_item

Add custom items to the detail table toolbar list (effective in both dashboard edit and preview views).

BI.config('bi.provider.detail.widget.down_list_item', (provider) => {
    provider.insertBefore({
        type: 'bi.icon_button',
        cls: 'icon-font',
        handler: function() {
            console.log('1');
        }
    });
})

bi.provider.design.widget_dashboard_toolbar.more_item

Add custom items to the "More" area of the toolbar above the dashboard (effective in the dashboard edit view).

BI.config("bi.provider.design.widget_dashboard_toolbar.more_item", (provider) => {
    provider.push([{
        value: De.xtype,
        cls: "data-sentinel-font",
        text: BI.i18nText("Data-Sentinel_Create_Sentinel"),
        title: BI.i18nText("Data-Sentinel_Create_Sentinel"),
        operator: function() {
            // do something
        }
    }])
});

bi.provider.dashboard_toolbar

Add custom items to the toolbar area above the dashboard (edit view).

BI.config('bi.provider.dashboard_toolbar', (provider) => {
    provider.addToolItems({
        type: 'bi.icon_button',
        cls: 'icon-font',
        handler: function() {
            console.log('1');
        }
    });
})

bi.provider.show.dashboard_toolbar

Add custom items to the toolbar area above the dashboard (preview view).

BI.config('bi.provider.show.dashboard_toolbar', (provider) => {
    provider.addToolItems({
        type: 'bi.icon_button',
        cls: 'icon-font',
        handler: function() {
            console.log('1');
        }
    });
})

bi.provider.design.widget_dashboard_toolbar

Add custom items to the toolbar above the component detail settings panel.

BI.config('bi.provider.design.widget_dashboard_toolbar', (provider) => {
    provider.addToolItems({
        type: 'bi.icon_button',
        cls: 'icon-font',
        handler: function() {
            console.log('1');
        }
    });
})

bi.provider.design.widget.detail

Add a list collapse button.

BI.config('bi.provider.design.widget.detail', function (provider) {
    provider.injectCollapseWidget(function (obj) {
        return {
            el: {
                type: 'bi.absolute',
                css: {
                    'z-index': 1,
                },
                items: [
                    {
                        el: {
                            type: BI.Layout.xtype,
                            cls: 'bi-plugin-push-button-background',
                            width: 90,
                            height: 25,
                        },
                        top: 32,
                        left: -32,
                        bottom: 0,
                        right: 0,
                    },
                    {
                        el: {
                            type: "bi.icon_change_button",
                            iconCls: 'next-page-h-font',
                            listeners: [{
                                eventName: 'EVENT_CHANGE',
                                action: function () {
                                    this.setIcon(this.isSelected() ? 'pre-page-h-font' : 'next-page-h-font');
                                    if (this.isSelected()) {
                                        obj.expand();
                                    } else {
                                        obj.collapse();
                                    }
                                }
                            }],
                            mounted: function () {
                                obj.collapse();
                            }
                        },
                        top: 0,
                        right: 5,
                        bottom: 0,
                        left: 0,
                    },
                ],
            },
            top: 0,
            right: -25,
            width: 25,
            height: 90,
        }
    });
});