When you have Datadog App Builder apps embedded in your dashboards, you can take direct actions on your resources, and all of the relevant data and context is immediately available. Link your app with the dashboard’s time frame and template variables to dynamically set the scope of the app’s actions, which allows you to carry out actions in your environment at any needed scope.

Add apps to your dashboard

To add a previously published app to your dashboard:

1. Open the dashboard where you want to add the app.
2. Click Add Widgets to open the widget tray.
3. Select the Apps tab, then drag the App widget onto the dashboard.
4. In the App Editor modal, select an app and provide it with a title.

The Apps tab also includes a Created by Datadog section with ready-made apps for common tasks, such as managing AWS or Azure resources and PagerDuty or LaunchDarkly configurations. Drag one of these apps onto your dashboard to add a working app without building one yourself.

Sync your app with dashboard template and time frame variables

You can link your app to template variables anywhere that supports template expressions in your queries or app elements. You can also link your app to the time frame that is selected on your dashboard.

When you change the value of a template variable or time frame on the dashboard, the linked app elements update automatically. For example, when you select an instance_id value using the template variable dropdown or directly from a graph, the instance_id value is added to the app’s filter. This allows you to perform actions on that specific instance:

Template variable examples

To populate a select component with a list of all available template variables, add the following template expression to your select component’s Options field:

${global?.dashboard?.templateVariables?.map(tvar => tvar.name )}

To list all of the available values of a specific template variable, use the following template expression:

${global?.dashboard?.templateVariables?.find(v => v.name === '<TEMPLATE_VARIABLE_NAME>')?.availableValues}

To list all of the available values when using a select component, use the following template expression:

${global?.dashboard?.templateVariables?.find(v => v.name === '<TEMPLATE_VARIABLE_NAME>')?.availableValues.map(availableValue => {return {label: availableValue, value:availableValue}})}

To get the selected value of a template variable, use the following template expressions:

• For a single-select template variable:
  Copy

  ${global?.dashboard?.templateVariables?.find(v => v.name === '<TEMPLATE_VARIABLE_NAME>')?.value}

• For a multi-select template variable:
  Copy

  ${global?.dashboard?.templateVariables?.find(v => v.name === '<TEMPLATE_VARIABLE_NAME>')?.values}

Time frame examples

To get the time frame start value, use the following template expressions:

• For the numerical timestamp:
  Copy

  ${global?.dashboard?.timeframe?.start}

• For a formatted date and time:
  Copy

  ${new Date(global?.dashboard?.timeframe?.start).toLocaleString()}

To get the time frame end value, use the following template expressions:

• For the numerical timestamp:
  Copy

  ${global?.dashboard?.timeframe?.end}

• For a formatted date and time:
  Copy

  ${new Date(global?.dashboard?.timeframe?.end).toLocaleString()}

To add a button that sets the value of a date range picker component to the dashboard’s time frame, perform the following steps:

1. Add a date range picker component to your app and name it “dateRangePicker0”.
2. Add a button to your app.
3. Under Events, fill in the following values:
   • Event: click
   • Reaction: Set Component State
   • Component: dateRangePicker0
   • State Function: setValue
   • Value: ${global?.dashboard?.timeframe}
4. Save and publish your app.

Add apps to Catalog

Add a published app to the Self-Service Actions dashboard in Catalog to provide developers with a central place to provision infrastructure, scaffold services, remediate issues, and more.

To add to Self-Service Actions, first ensure your app is published and permissions are defined. Next, you can click Add to Self-Service Actions.

Once added, you can view and use your app in Catalog.

Further reading

Documentation, liens et articles supplémentaires utiles:

Action CatalogAPP

Do you have questions or feedback? Join the #app-builder channel on the Datadog Community Slack.