backstage/docs/plugins/customization.md

id, title, description

id	title	description
customization	Customization	Documentation on adding a customization logic to the plugin

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',
  configure(options?: PluginInputOptions): PluginOptions {
    const defaultOptions = { createButtonTitle: 'Create' };
    if (!options) {
      return defaultOptions;
    }
    return { ...defaultOptions, ...options };
  },
});

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

export type CatalogPageOptionsProps = {
  createButtonTitle: string;
};

export function DefaultMyPluginWelcomePage() {
  const { createButtonTitle } = usePluginOptions<CatalogPageOptionsProps>();

  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.reconfigure({
  createButtonTitle: 'Maybe Create',
});