(Actions) Add App Builder input parameters (#33214)

* Add page for input parameters

* Add first draft

* Change screenshot size

* Revise instructions; add screenshot; cut Further reading section

* Change screenshot; update alt text

* Update content/en/actions/app_builder/embedded_apps/input_parameters.md

Co-authored-by: Ursula Chen <[email protected]>

* Split duplication instructions into separate section

* Add a link to input parameters blueprint

* Update blueprint text

* Update content/en/actions/app_builder/embedded_apps/input_parameters.md

Co-authored-by: Ursula Chen <[email protected]>

* Update content/en/actions/app_builder/embedded_apps/input_parameters.md

Co-authored-by: Heston Hoffman <[email protected]>

* Update content/en/actions/app_builder/embedded_apps/input_parameters.md

Co-authored-by: Heston Hoffman <[email protected]>

* Update content/en/actions/app_builder/embedded_apps/input_parameters.md

Co-authored-by: Heston Hoffman <[email protected]>

* Update content/en/actions/app_builder/embedded_apps/_index.md

Co-authored-by: Heston Hoffman <[email protected]>

---------

Co-authored-by: Ursula Chen <[email protected]>
Co-authored-by: Heston Hoffman <[email protected]>

Author: 3 people

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

…/en/actions/app_builder/embedded_apps.md …ions/app_builder/embedded_apps/_index.mdcontent/en/actions/app_builder/embedded_apps.md renamed to content/en/actions/app_builder/embedded_apps/_index.md content/en/actions/app_builder/embedded_apps.md renamed to content/en/actions/app_builder/embedded_apps/_index.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