If you want to encapsulate logic within your app, you can use state variables.

Create a state variable

To add a state variable to your app, perform the following steps:

1. In your app, click {𝑥} to open the Variables tab.
2. Click Create Variable.
3. Optionally, click the variable name and rename it.
4. Define the initial value for your state variable.

Example app

To create an app that uses a button to change a callout value component’s style and value, follow these instructions.

Create the variables

1. In your app, click {𝑥} to open the Variables tab.
2. Click Create Variable.
3. Name the variable callout_value and set its Initial Value to Pass.
4. Click the + (plus) to create another variable.
5. Name this variable callout_color and set its Initial Value to green.

Create the components

1. Add a callout value component to your app. Give it the following values:
   • Value: ${callout_value.value}
   • Style: ${callout_color.value}
2. Add a button component to your app and set its label to Change status.
3. Under Events, add an event. Give it the following values:
   • Event: click
   • Reaction: custom
   • Callback:

     ${ () => {
         if(callout_color.value !== "green"){
             callout_color.setValue("green")
             callout_value.setValue("Pass")
         } else {
         callout_color.setValue("red")
         callout_value.setValue("Fail")
         }
     } }
     

4. Click Preview to preview your app.
   When you click the Change status button in your app, the color and text of the callout value element alternate between a green Pass and a red Fail.

Further reading

Additional helpful documentation, links, and articles:

Build AppsDOCUMENTATION JavaScript ExpressionsDOCUMENTATION

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