diff --git a/config/_default/menus/main.en.yaml b/config/_default/menus/main.en.yaml index 2f1faad2ad9..5f1029554fd 100644 --- a/config/_default/menus/main.en.yaml +++ b/config/_default/menus/main.en.yaml @@ -2968,6 +2968,11 @@ menu: parent: app_builder identifier: app_builder_embedded_apps weight: 9 + - name: Input Parameters + url: actions/app_builder/embedded_apps/input_parameters/ + parent: app_builder_embedded_apps + identifier: app_builder_input_parameters + weight: 901 - name: Save and Reuse Actions url: actions/app_builder/saved_actions/ parent: app_builder diff --git a/content/en/actions/app_builder/embedded_apps.md b/content/en/actions/app_builder/embedded_apps/_index.md similarity index 100% rename from content/en/actions/app_builder/embedded_apps.md rename to content/en/actions/app_builder/embedded_apps/_index.md diff --git a/content/en/actions/app_builder/embedded_apps/input_parameters.md b/content/en/actions/app_builder/embedded_apps/input_parameters.md new file mode 100644 index 00000000000..bffb445daaa --- /dev/null +++ b/content/en/actions/app_builder/embedded_apps/input_parameters.md @@ -0,0 +1,60 @@ +--- +title: Input Parameters +description: Input parameters allow you to embed the same app in multiple dashboards or notebooks using different configurations for each instance. +disable_toc: false +--- + +Input parameters allow you to embed the same app in multiple dashboards or notebooks using different configurations for each instance. + +## Example app + +A common use case for input parameters is to reuse and customize an app for different environments, like dev, staging, and production. In the screenshot below, one app is embedded twice in a dashboard. The app on the left shows monitors in the demo environment, while the app on the right shows the same information for monitors in the staging environment. You can play around with this app by cloning the blueprint [How to: Input Parameters][3]. + +{{< img src="/service_management/app_builder/embedded_apps/example-input-parameters-dashboard.png" alt="Two embedded apps with different input parameters selected" style="width:100%;" >}} + +## Create an input parameter + +1. In [App Builder][1], select an app and click **Edit**. +1. Click the **App Properties** icon ({{< img src="service_management/app_builder/embedded_apps/app_properties_icon.png" inline="true" width="12px" style="position:relative; bottom:1px;">}}). +1. Click the plus icon () to add an input parameter. +1. Click the new input parameter to configure its elements: + - Parameter Name + - Display Name (Optional) + - Data Type + - Allowed Values + - Default Value + - Description (Optional) +1. Click **Save**. + +### Example input parameter + +This example input parameter shows the same app in various staging environments: + +{{< img src="/service_management/app_builder/embedded_apps/example-input-parameters-configuration.png" alt="An example of configured input parameters inside an app" style="width:35%;" >}} + +## Use input parameters + +
Apps with input parameters work best in dashboards and notebooks. While you can add an app to Self-Service Actions, you can't select the input parameters you've configured. +
+ +To embed an app with input parameters: + +1. In [App Builder][1], select an app with a configured input parameter. +1. Click **Add to a dashboard**. +1. Select a dashboard, then click **Save and Open**. +1. In your dashboard, hover over the app and click the **Edit** icon ({{< img src="icons/pencil.png" inline="true" style="width:14px;">}}). +1. In the **Input Parameters** section, select an input parameter: +{{< img src="/service_management/app_builder/embedded_apps/example-input-params-configuring-in-dashboard.png" alt="An example of an app in editing mode with Input Parameters circled" style="width:80%;" >}} +1. Click **Save**. + +## Reuse an app + +After embedding an app in a dashboard or notebook, you can create a copy to reuse it with different contexts: +1. Select the embedded app. +1. Click the **Options** icon (), then click **Clone**. + - Alternatively, you can select the app and use copy and paste keyboard shortcuts. +1. Follow the steps [above][2] to select a different input parameter. + +[1]: https://app.datadoghq.com/app-builder/apps/list +[2]: /actions/app_builder/embedded_apps/input_parameters/#use-input-parameters +[3]: https://app.datadoghq.com/app-builder/apps/edit?template=how_to_input_parameters&viewMode=templatePreview \ No newline at end of file diff --git a/static/images/service_management/app_builder/embedded_apps/app_properties_icon.png b/static/images/service_management/app_builder/embedded_apps/app_properties_icon.png new file mode 100644 index 00000000000..a38c5f36d42 Binary files /dev/null and b/static/images/service_management/app_builder/embedded_apps/app_properties_icon.png differ diff --git a/static/images/service_management/app_builder/embedded_apps/example-input-parameters-configuration.png b/static/images/service_management/app_builder/embedded_apps/example-input-parameters-configuration.png new file mode 100644 index 00000000000..7cdd34cb3c9 Binary files /dev/null and b/static/images/service_management/app_builder/embedded_apps/example-input-parameters-configuration.png differ diff --git a/static/images/service_management/app_builder/embedded_apps/example-input-parameters-dashboard-2.png b/static/images/service_management/app_builder/embedded_apps/example-input-parameters-dashboard-2.png new file mode 100644 index 00000000000..cd423f806a0 Binary files /dev/null and b/static/images/service_management/app_builder/embedded_apps/example-input-parameters-dashboard-2.png differ diff --git a/static/images/service_management/app_builder/embedded_apps/example-input-parameters-dashboard.png b/static/images/service_management/app_builder/embedded_apps/example-input-parameters-dashboard.png new file mode 100644 index 00000000000..4b43c5fd351 Binary files /dev/null and b/static/images/service_management/app_builder/embedded_apps/example-input-parameters-dashboard.png differ diff --git a/static/images/service_management/app_builder/embedded_apps/example-input-params-configuring-in-dashboard.png b/static/images/service_management/app_builder/embedded_apps/example-input-params-configuring-in-dashboard.png new file mode 100644 index 00000000000..34be6dfe229 Binary files /dev/null and b/static/images/service_management/app_builder/embedded_apps/example-input-params-configuring-in-dashboard.png differ