diff --git a/config/_default/menus/main.en.yaml b/config/_default/menus/main.en.yaml index 81201a6f115..faa0a24d985 100644 --- a/config/_default/menus/main.en.yaml +++ b/config/_default/menus/main.en.yaml @@ -2913,6 +2913,11 @@ menu: parent: app_builder_components identifier: app_builder_tables weight: 703 + - name: Reusable Modules + url: actions/app_builder/components/reusable_modules/ + parent: app_builder_components + identifier: app_builder_reusable_modules + weight: 704 - name: JavaScript Expressions url: actions/app_builder/expressions/ parent: app_builder diff --git a/content/en/actions/app_builder/components/reusable_modules.md b/content/en/actions/app_builder/components/reusable_modules.md new file mode 100644 index 00000000000..9c253b42c22 --- /dev/null +++ b/content/en/actions/app_builder/components/reusable_modules.md @@ -0,0 +1,69 @@ +--- +title: Reusable Modules +description: Save and reuse groups of components and queries across multiple App Builder applications as modular templates. +disable_toc: false +aliases: +- /service_management/app_builder/reusable_modules/ +- /service_management/app_builder/components/reusable_modules +further_reading: +- link: "/service_management/app_builder/components/" + tag: "Documentation" + text: "Components" +- link: "/service_management/app_builder/build/" + tag: "Documentation" + text: "Build Apps" +- link: "/service_management/app_builder/queries/" + tag: "Documentation" + text: "Queries" +--- + +Use the _Reusable Modules_ feature to save groups of components and queries as templates for reuse across your App Builder applications. Modules automatically include all dependencies to ensure your components function correctly. + +
Default modules are read-only. To modify a default module, duplicate it first.
+ +## Create a reusable module + +There are three ways to create a reusable module: + +### From the Components panel +1. Click **Create Module** from the component panel menu. + {{< img src="service_management/app_builder/app-builder-reusable-module-component-panel.png" alt="Create Module button in the Reusable Modules section of the Components panel" style="width:65%;">}} + +### From a component's instance name tab +1. Select a component on the app canvas. +1. Click the **Create Module** icon from the component instance name. + {{< img src="service_management/app_builder/app-builder-reusable-module-name-tab.png" alt="Create Module option in the component instance name tab" style="width:65%;">}} + +### From selected components +1. On the app canvas, select multiple components you want to include in your module. +1. In the side panel that appears, click **Create Module**. + {{< img src="service_management/app_builder/app-builder-reusable-modules-sidepanel.png" alt="Create Module option in the side panel after selecting multiple components" style="width:65%;">}} + +## Configure your module + +When creating your module, the module editor allows you to preview the components and queries, add a name and description, and review dependencies before saving. + +{{< img src="service_management/app_builder/app-builder-reusable-module-preview.png" alt="Module editor showing preview of components and queries with name and description fields" style="width:100%;">}} + +1. Enter a name and description for your module. +1. Review the components and queries that are automatically included. The system includes all nested query dependencies. +1. Click **Save Module**. + +## Use a reusable module in your app +1. Go to the **Reusable Modules** section. +1. Drag the module to the canvas or click to add it. The components and queries are copied into your app. + + +## Delete a module +1. Go to the **Reusable Modules** section. +1. Click the edit icon next to the module you want to delete. +1. In the module editor, click **Delete Module**. + +## Further reading + +{{< partial name="whats-next/whats-next.html" >}} + +
Do you have questions or feedback? Join the **#app-builder** channel on the [Datadog Community Slack][2]. + +[1]: https://app.datadoghq.com/app-builder/apps/list +[2]: https://chat.datadoghq.com/ diff --git a/static/images/service_management/app_builder/app-builder-reusable-module-component-panel.png b/static/images/service_management/app_builder/app-builder-reusable-module-component-panel.png new file mode 100644 index 00000000000..e4eabd2edbb Binary files /dev/null and b/static/images/service_management/app_builder/app-builder-reusable-module-component-panel.png differ diff --git a/static/images/service_management/app_builder/app-builder-reusable-module-name-tab.png b/static/images/service_management/app_builder/app-builder-reusable-module-name-tab.png new file mode 100644 index 00000000000..fac878ca74b Binary files /dev/null and b/static/images/service_management/app_builder/app-builder-reusable-module-name-tab.png differ diff --git a/static/images/service_management/app_builder/app-builder-reusable-module-preview.png b/static/images/service_management/app_builder/app-builder-reusable-module-preview.png new file mode 100644 index 00000000000..eeb47d7fc32 Binary files /dev/null and b/static/images/service_management/app_builder/app-builder-reusable-module-preview.png differ diff --git a/static/images/service_management/app_builder/app-builder-reusable-modules-sidepanel.png b/static/images/service_management/app_builder/app-builder-reusable-modules-sidepanel.png new file mode 100644 index 00000000000..53c04c80ed0 Binary files /dev/null and b/static/images/service_management/app_builder/app-builder-reusable-modules-sidepanel.png differ