Si vous souhaitez encapsuler la logique dans votre application, vous pouvez utiliser des variables d’état.

Créez une variable d’état

Pour ajouter une variable d’état avec Bits AI :

1. Cliquez sur l’icône Build with AI ().
2. Saisissez une invite personnalisée pour une variable, ou essayez l’invite How can you help me with variables?.

Pour ajouter une variable d’état manuellement :

1. Dans votre application, cliquez sur l’icône Data ({ }) pour ouvrir l’onglet Données.
2. Cliquez sur le signe plus (+), puis sélectionnez Variable.
3. Optionnellement, cliquez sur le nom de la variable et renommez-la.
4. Définissez la valeur initiale de votre variable d’état.

Exemple d’application

Pour créer une application qui utilise un bouton pour modifier le style et la valeur d’un composant de valeur de légende, suivez ces instructions.

Créez les variables

1. Dans votre application, cliquez sur l’icône Data ({ }) pour ouvrir l’onglet Données.
2. Cliquez sur le signe plus (+), puis sélectionnez Variable.
3. Nommez la variable callout_value et définissez sa Initial Value sur Pass.
4. Cliquez sur le signe plus (+) pour créer une autre variable.
5. Nommez cette variable callout_color et définissez sa Initial Value sur green.

Créez les composants

1. Ajoutez un composant de valeur de légende à votre application. Donnez-lui les valeurs suivantes :
   • Value : ${callout_value.value}
   • Style : ${callout_color.value}
2. Ajoutez un composant bouton à votre application et définissez son étiquette sur Change status.
3. Sous Events, ajoutez un événement. Donnez-lui les valeurs suivantes :
   • 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. Cliquez sur Preview pour prévisualiser votre application.
   Lorsque vous cliquez sur le bouton Change status dans votre application, la couleur et le texte du composant de valeur de légende alternent entre un Pass vert et un Fail rouge.

Pour aller plus loin

Documentation, liens et articles supplémentaires utiles:

Créer des applicationsDOCUMENTATION Expressions JavaScriptDOCUMENTATION

Avez-vous des questions ou des commentaires ? Rejoignez le canal #app-builder sur le Datadog Community Slack.