IDashboardLayoutCustomizer

IDashboardLayoutCustomizer.customizeExportLayout()method

Register customization of the export layout that is used to render the dashboard.

customizeExportLayout(fun: ExportLayoutCustomizationFn): IDashboardLayoutCustomizer;

Parameters

Returns

IDashboardLayoutCustomizer

Remarks

At this point, you can register a function which will be called after dashboard component loads the dashboard and before it starts rendering the layout itself. The function will be called with two arguments:

• The actual dashboard layout - Customizer that allows the plugin to work with export definition

Your customization function may introspect the original layout and then register its customizations.

If the dashboard is not rendering export layout, then the registered function will not be called.

IDashboardLayoutCustomizer.customizeFluidLayout()method

Register customization of the fluid layout that is used to render the dashboard.

customizeFluidLayout(fun: FluidLayoutCustomizationFn): IDashboardLayoutCustomizer;

Parameters

Returns

IDashboardLayoutCustomizer

Remarks

At this point, you can register a function which will be called after dashboard component loads the dashboard and before it starts initializing the layout itself. The function will be called with two arguments:

• The actual dashboard layout - Customizer that allows the plugin to add new sections or section items

Your customization function may introspect the original layout and then register its customizations.

If the dashboard is not rendering fluid layout, then the registered function will not be called.

IDashboardLayoutCustomizer.withCustomDecorator()method

Register a factory for top bar decorator providers.

withCustomDecorator(providerFactory: (next: LayoutComponentProvider) => OptionalLayoutComponentProvider): IDashboardLayoutCustomizer;

Parameters

Returns

IDashboardLayoutCustomizer

Remarks

Decorators are a way to add customizations or embellishments on top of an existing component. Decorators are more complex to write because they need to work with the component they should decorate and add ‘something’ on top of that component.

This is best illustrated on an example:

Example

withCustomDecorator((next) => {
    return (filter) => {
        if (some_condition_to_prevent_decoration) {
            return undefined;
        }

        // Make sure you call this outside the component render function,
        // otherwise a new instance of the decorated component is created on each re-render.
        const Decorated = next(filter);

        function MyCustomDecorator(props) {
             return (
                 <div>
                     <p>My Custom Decoration</p>
                     <Decorated {...props} />
                 </div>
             )
        }

        return MyCustomDecorator;
    }
})

The above shows how to register a decorator that will use some condition to determine whether particular attribute filter is eligible for decoration.

Note: the factory function that you specify will be called immediately at the registration time. The provider that it returns will be called at render time.

IDashboardLayoutCustomizer.withCustomProvider()method

Register a provider for React components to render layout.

withCustomProvider(provider: OptionalLayoutComponentProvider): IDashboardLayoutCustomizer;

Parameters

Returns

IDashboardLayoutCustomizer

self, for call chaining sakes

Remarks

A provider takes the layout as input and is expected to return a React component that should be used to render that layout.

If the provider returns undefined then:

• if there are other providers registered, they will be called to see if they can provide a component to render the layout - if there are no other providers registered, the default, built-in component will be used.

You may register multiple providers. They will be evaluated in the order you register them.