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

Add a previously published app to your dashboard by dragging the App widget type out of the dashboard’s widget tray:

The App Editor modal appears, allowing you to select an app and provide it with a title:

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 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.

Further reading

Additional helpful documentation, links, and articles:

Actions CatalogAPP

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