Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions config/_default/menus/main.en.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -2958,6 +2958,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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
title: Input Parameters
description: Input parameters reduces maintenance overhead by managing one app that can use the same logic in different contexts.
disable_toc: false
---

Input parameters allow you to embed the same app in multiple dashboards or notebooks using different configurations for each instance.

## Example dashboard

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.

{{< 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 was configured to show 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(s).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. In [App Builder][1], select an app with a configured input parameter(s).
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 & 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading