diff --git a/config/_default/menus/main.en.yaml b/config/_default/menus/main.en.yaml index 7c5968f3096..a421feb89d7 100644 --- a/config/_default/menus/main.en.yaml +++ b/config/_default/menus/main.en.yaml @@ -2948,6 +2948,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..214badbc04f --- /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 +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. While editing an app, click the expand icon () to open the components panel. +2. Click a component to select it. +3. In the components panel, click the menu icon (). +4. Click Create Module ({{< img src="service_management/app_builder/reusable-module-icon.svg" inline="true">}}). +5. [Configure your module][3]. + +### From a component's instance name tab +1. While editing an app, select a component on the app canvas. +2. Click the Create Module icon ({{< img src="service_management/app_builder/reusable-module-icon.svg" inline="true">}}) in the component instance name tab. +3. [Configure your module][3]. + +### From selected components +1. While editing an app, hold down the Shift key and click multiple components to select them. +2. In the side panel that appears on the right, click Create Module ({{< img src="service_management/app_builder/reusable-module-icon.svg" inline="true">}}). + +## Configure a 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. +2. Review the components and queries that are automatically included. The system includes all nested query dependencies. +3. Click Save Module. + +## Add a reusable module to an app +1. While editing an app, click the Add Component icon (). +2. In the Modules section, click a module or drag it onto the app canvas. + + +## Delete a module +1. While editing an app, click the Add Component icon (). +2. In the Modules section, click the edit icon ({{< img src="icons/pencil.png" inline="true" style="width:14px;">}}) for the module you want to delete. +3. 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/ +[3]: /actions/app_builder/components/reusable_modules/#configure-a-module 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-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/reusable-module-icon.svg b/static/images/service_management/app_builder/reusable-module-icon.svg new file mode 100644 index 00000000000..00369d2fd08 --- /dev/null +++ b/static/images/service_management/app_builder/reusable-module-icon.svg @@ -0,0 +1,3 @@ + + +