Customization (Experimental)

Overview

The Backstage core logic provides a possibility to make the component customizable in such a way that the application developer can redefine the labels, icons, elements or even completely replace the component. It's up to each plugin to decide what can be customized.

For a plugin developer

When you are creating your plugin, you have a possibility to use a metadata field and define there all customizable elements. For example

const plugin = createPlugin({
  id: 'my-plugin',
  __experimentalConfigure(
    options?: CatalogInputPluginOptions,
  ): CatalogPluginOptions {
    const defaultOptions = {
      createButtonTitle: 'Create',
    };
    return { ...defaultOptions, ...options };
  },
});

And the rendering part of the exposed component can retrieve that metadata as:

export type CatalogPluginOptions = {
  createButtonTitle: string;
};

export type CatalogInputPluginOptions = {
  createButtonTitle: string;
};

export const useCatalogPluginOptions = () =>
  usePluginOptions<CatalogPluginOptions>();

export function DefaultMyPluginWelcomePage() {
  const { createButtonTitle } = useCatalogPluginOptions();

  return (
    <div>
      <button>{createButtonTitle}</button>
    </div>
  );
}

For an application developer using the plugin

The way to reconfigure the default values provided by the plugin you can do it via reconfigure method, defined on the plugin. Example:

import { myPlugin } from '@backstage/my-plugin';

myPlugin.__experimentalReconfigure({
  createButtonTitle: 'New',
});