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

export type MyPluginMetadataProps = {
  createButtonTitle: string;
};

export const myPluginMetadataRef = createMetadataRef<MyPluginMetadataProps>({
  id: 'MyPluginMetadataProvider',
});

export const myPluginMetadata = {
  MyPluginMetadataProvider: {
    // or [myPluginMetadataRef.id]
    createButtonTitle: 'Create Component',
  },
};

const plugin = createPlugin({
  id: 'myPlugin',
  metadata: [myPluginMetadata],
});

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

export function DefaultMyPluginWelcomePage(props: DefaultMyPluginWelcomeProps) {
  const { createButtonTitle } =
    useMetadata<DefaultMyPluginWelcomeProps>(myPluginMetadataRef);

  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({
  MyPluginMetadataProvider: {
    // or [myPluginMetadataRef.id]
    createButtonTitle: 'Make Component',
  },
});