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 the Data ({ }) icon to open the Data tab.
2. Click the plus (+), then select 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 the Data ({ }) icon to open the Data tab.
2. Click the plus (+), then select 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

お役に立つドキュメント、リンクや記事:

Build AppsDOCUMENTATION JavaScript ExpressionsDOCUMENTATION

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