Si desea encapsular la lógica dentro de su aplicación, puede usar variables de estado.

Cree una variable de estado

Para agregar una variable de estado con Bits AI:

1. Haga clic en el icono Build with AI ().
2. Ingrese un aviso personalizado para una variable, o pruebe el aviso How can you help me with variables?.

Para agregar una variable de estado manualmente:

1. En su aplicación, haga clic en el icono Data ({ }) para abrir la pestaña Data.
2. Haga clic en el signo más (+), luego seleccione Variable.
3. Opcionalmente, haga clic en el nombre de la variable y cámbiele el nombre.
4. Defina el valor inicial para su variable de estado.

Aplicación de ejemplo

Para crear una aplicación que use un botón para cambiar el estilo y el valor de un componente de valor destacado, siga estas instrucciones.

Cree las variables

1. En su aplicación, haga clic en el icono Data ({ }) para abrir la pestaña Data.
2. Haga clic en el signo más (+), luego seleccione Variable.
3. Nombre la variable callout_value y establezca su Initial Value en Pass.
4. Haga clic en el signo más (+) para crear otra variable.
5. Asigne un nombre a esta variable callout_color y establezca su Initial Value en green.

Cree los componentes

1. Agregue un componente de valor destacado a su aplicación. Asígnele los siguientes valores:
   • Value: ${callout_value.value}
   • Style: ${callout_color.value}
2. Agregue un componente de botón a su aplicación y establezca su etiqueta en Change status.
3. En Events, agregue un evento. Asígnele los siguientes valores:
   • 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. Haga clic en Preview para obtener una vista previa de su aplicación.
   Cuando hace clic en el botón Change status de su aplicación, el color y el texto del elemento de valor destacado alternan entre un Pass verde y un Fail rojo.

Lecturas adicionales

Documentación, enlaces y artículos útiles adicionales:

Crear aplicacionesDOCUMENTACIÓN Expresiones de JavaScriptDOCUMENTACIÓN

¿Tiene preguntas o comentarios? Únase al canal #app-builder en el Datadog Community Slack.