diff --git a/docs/plugins/customization.md b/docs/plugins/customization.md new file mode 100644 index 0000000000..799cff3480 --- /dev/null +++ b/docs/plugins/customization.md @@ -0,0 +1,55 @@ +--- +id: customization +title: Customization +description: 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 + +```typescript jsx +const plugin = createPlugin({ + id: 'myPlugin', + metadata: { + mainHeaderText: 'Welcome to my plugin', + submitButton: () => , + }, +}); +``` + +And the rendering part of the exposed component can retrieve that metadata as: + +```typescript jsx +export function DefaultMyPluginWelcomePage(props: DefaultMyPluginWelcomeProps) { + const { mainHeaderText, submitButton } = this.props.metadata; + + return ( +
+

{mainHeaderText}

+
{submitButton}
+
+ ); +} +``` + +## 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: + +```typescript jsx +import { myPlugin } from '@backstage/my-plugin'; + +myPlugin.reconfigure({ + mainHeaderText: 'Custom header', + submitButton: () => , +}); +``` diff --git a/microsite/sidebars.json b/microsite/sidebars.json index f96747f0ca..2d55b40a2a 100644 --- a/microsite/sidebars.json +++ b/microsite/sidebars.json @@ -198,6 +198,7 @@ "plugins/plugin-development", "plugins/structure-of-a-plugin", "plugins/integrating-plugin-into-software-catalog", + "plugins/customization", "plugins/composability", "plugins/analytics", {