---
title: Events
description: >-
  Configure UI component event triggers and reactions, including state functions
  for dynamic app interactions and behaviors.
breadcrumbs: Docs > Actions > App Builder > Events
---

# Events

{% callout %}
# Important note for users on the following Datadog sites: app.ddog-gov.com

{% alert level="danger" %}
This product is not supported for your selected [Datadog site](https://docs.datadoghq.com/getting_started/site). ().
{% /alert %}

{% /callout %}

UI components can trigger reactions on an **Event**. Event triggers differ according to the component. For example, a button component can trigger a reaction on a click event, and a table component can trigger a reaction on a page change or table row click event. To see what event triggers are available for a given component, see [Components](https://docs.datadoghq.com/service_management/app_builder/components).

An event can set the state of a UI component, open or close a modal, trigger another query, or even run custom JavaScript.

For example, the [GitHub PR summarizer](https://app.datadoghq.com/app-builder/apps/edit?viewMode=edit&template=github-pr-summarizer) blueprint uses a **Summarize** button with an event that triggers on a click. The event uses the **Trigger Query** reaction which runs the `summarizePulls` query.

In addition to working with events manually, you can use Bits AI to set up event handlers, configure event-driven actions, and optimize event logic:

1. Click the **Build with AI** icon (**{% icon name="icon-bits-ai" /%}**).
1. Enter a custom prompt for an event, or try the prompt `How can you help me with events?`.

## Events and reactions{% #events-and-reactions %}

In App Builder, events and reactions work together to determine component behavior.

Components (such as button clicks or form submissions) and actions (such as execution finished) can both trigger events. Events differ depending on which component you use. For component-specific event details, see [Components](https://docs.datadoghq.com/service_management/app_builder/components).

Reactions specify what happens when an event is triggered. Any component that can trigger an event has the following available reactions:

- Close Modal
- Custom
- Download File
- Open Modal
- Open Side Panel
- Close Side Panel
- Open URL
- Set Component State
- Set State Variable Value
- Toast Notification
- Trigger Action

### Custom reactions{% #custom-reactions %}

Custom reactions allow for more advanced use cases or custom behavior beyond the built-in reactions. For example, you can execute actions conditionally based on other data in the app. The following example triggers different actions based on the current user's team:

```javascript
${() => {
    console.log("Trigger actions by team")
    const teams = global?.user?.teams ?? []
    if (teams.some(t => t?.name === "team1")) {
        makeRequest0?.fetch()
    } else if (teams.some(t => t?.name === "team2")) {
        makeRequest1?.fetch()
    } else {
        makeRequest2?.fetch()
    }
}}
```

## State functions{% #state-functions %}

App Builder provides functions for some types of app state changes. These functions are available with the **Set Component State** reaction for specific components and in post-query hooks.

{% dl %}

{% dt %}
setIsOpen
{% /dt %}

{% dd %}
Sets the status of a modal to open or closed based on the boolean value that you provide.**Example**: See the [Components](https://docs.datadoghq.com/service_management/app_builder/components) documentation page section for the **modal** component.
{% /dd %}

{% dt %}
setPageIndex
{% /dt %}

{% dd %}
Sets the `pageIndex` property of the table component to the page that you specify. Works with the server side pagination type.**Example**: See the [Components](https://docs.datadoghq.com/service_management/app_builder/components) documentation page section for the **table** component.
{% /dd %}

{% dt %}
setSelectedRow
{% /dt %}

{% dd %}
Sets the `selectedRow` property of the table component to the row that you specify.**Example**: See the [Components](https://docs.datadoghq.com/service_management/app_builder/components) documentation page section for the **table** component.
{% /dd %}

{% dt %}
setTabIndex
{% /dt %}

{% dd %}
Sets the `selectedTabIndex` property of the table component to the tab index that you specify.**Example**: See the [Components](https://docs.datadoghq.com/service_management/app_builder/components) documentation page section for the **tab** component.
{% /dd %}

{% dt %}
setValue
{% /dt %}

{% dd %}
Sets the value of an element to the value that you provide to the function.**Examples**: See the [Components](https://docs.datadoghq.com/service_management/app_builder/components) documentation page sections for the **form**, **number input**, **radio button**, **search**, **select**, **text area**, and **text input** components.
{% /dd %}

{% /dl %}

To see what state functions are available for a given component, see [Components](https://docs.datadoghq.com/service_management/app_builder/components).

## Further reading{% #further-reading %}

- [Build Apps](https://docs.datadoghq.com/service_management/app_builder/build/)
- [Components](https://docs.datadoghq.com/service_management/app_builder/components/)
- [Build Self-Serve Apps with App Builder for Third-Party Integrations](https://learn.datadoghq.com/courses/app-builder-integration)

Do you have questions or feedback? Join the **#app-builder** channel on the [Datadog Community Slack](https://chat.datadoghq.com/).