(Actions) Add App Builder input parameters

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

content/en/actions/app_builder/embedded_apps.md → content/en/actions/app_builder/embedded_apps/_index.md

@@ -4,6 +4,7 @@ description: Embed published apps in dashboards and sync them with template vari
 disable_toc: false
 aliases:
     - /service_management/app_builder/embedded_apps
+    - /actions/app_builder/embedded_apps/
 further_reading:
 - link: "https://app.datadoghq.com/actions/action-catalog/"
   tag: "App"

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 (<i class="icon-plus-2" style="position:relative; top:2px;font-size: 12px; max-width: 12px"></i>) 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 
+
+<div class="alert alert-info">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. 
+</div>
+
+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 (<i class="icon-kebab-wui" style="position:relative; top:2px;font-size: 12px; max-width: 12px"></i>), 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