Vous pouvez utiliser des expressions JavaScript (JS) n’importe où dans App Builder pour créer des interactions personnalisées entre les différentes parties de votre application. Lorsque vous commencez une expression, App Builder propose des suggestions de saisie semi-automatique basées sur les requêtes et les composants existants dans votre application. Cliquez sur une suggestion de saisie semi-automatique pour l’utiliser dans votre expression, ou utilisez les touches fléchées de votre clavier et effectuez une sélection avec la touche Entrée.

Certains champs, comme transformation post-requête, affichent un éditeur de code par défaut et acceptent du JS brut. Dans tous les autres champs, entourez vos expressions JS de ${}. Par exemple, pour interpoler les valeurs de deux composants de saisie de texte nommés textInput0 et textInput1 dans la propriété Content d’un composant texte (et ajouter un point d’exclamation), utilisez l’expression ${textInput0.value} ${textInput1.value}!.

App Builder accepte la syntaxe JavaScript standard, avec les mises en garde suivantes :

• Le résultat de l’expression doit correspondre au résultat attendu par la propriété du composant ou de la requête. Par exemple, la propriété Is Visible du composant texte attend un booléen. Pour savoir quel type de données une propriété de composant attend, consultez Afficher les propriétés du composant.
• Votre code dispose d’un accès en lecture seule à l’état de l’application, mais App Builder exécute le code dans un environnement isolé sans accès au Document Object Model (DOM) ou aux API du navigateur.

Vous pouvez également utiliser Bits AI pour travailler avec des expressions JS :

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

Afficher les propriétés du composant

Avant de créer une expression, il est utile de connaître les propriétés disponibles ainsi que les valeurs par défaut ou actuelles du composant avec lequel vous souhaitez interagir.

Vous pouvez afficher les propriétés et les valeurs disponibles pour un composant de la manière suivante :

• App State : Fournit les propriétés et les valeurs de tous les composants et requêtes de votre application, ainsi que des variables globales telles que les variables d’état ou les variables de modèle de dashboard.
• Inspect Data : Fournit les propriétés et les valeurs d’un composant ou d’une requête spécifique dans votre application.
• L’onglet Admin Console : Data du Admin Console fournit les propriétés et les valeurs de tous les composants et requêtes de votre application.

État de l’application

Pour accéder à App State :

1. Cliquez sur App Properties dans le panneau latéral gauche.
2. Faites défiler jusqu’à la section App State.

Inspect Data

Pour accéder à Inspect Data :

1. Cliquez sur la requête ou le composant que vous souhaitez inspecter.
2. Faites défiler jusqu’à la section Inspect Data.

Admin Console

Pour accéder à l’Admin Console :

1. Cliquez sur l’icône en forme de roue dentée (Settings) et sélectionnez Admin Console.
2. Cliquez sur Data.

Interactions de composants personnalisés

La plupart des composants d’interface utilisateur offrent des options intégrées, telles que des bascules et l’alignement du texte, qui couvrent l’utilisation de base de l’application. Pour ajouter une interaction personnalisée à un composant, cliquez sur le symbole de l’éditeur de code (</>) et saisissez une expression JS.

Visibilité conditionnelle

Vous pouvez rendre la visibilité d’un composant dépendante d’autres composants.

Par exemple, si vous souhaitez qu’un composant texte ne soit visible que lorsque deux composants de saisie de texte nommés textInput0 et textInput1 contiennent des valeurs, utilisez l’expression ${textInput0.value && textInput1.value} dans la propriété Is Visible.

Désactiver un composant de manière conditionnelle

Tout comme pour la visibilité, vous pouvez désactiver un composant à moins que certaines conditions ne soient remplies par d’autres aspects de votre application, tels que d’autres composants ou le contexte de l’application.

Désactiver un composant en fonction de la visibilité

Si votre application possède un bouton qui utilise le contenu d’un composant texte pour envoyer un message, vous pouvez désactiver le bouton à moins que le composant texte ne soit visible :

1. Cliquez sur le composant bouton sur votre canevas.
2. Cliquez sur le symbole de l’éditeur de code (</>) à côté de la propriété Is Disabled.
3. Ajoutez l’expression ${!text0.isVisible}.

Le composant texte est invisible et le bouton est désactivé à moins que les deux champs de saisie de texte ne soient remplis.

Désactiver un composant en fonction du contexte de l’application

Vous pouvez également désactiver un composant en fonction du contexte de l’application, comme l’équipe à laquelle appartient l’utilisateur.

Par exemple, vous pouvez activer un composant uniquement pour les utilisateurs qui font partie de l’équipe Gestion de produits :

1. Cliquez sur le composant bouton sur votre canevas.
2. Cliquez sur le symbole de l’éditeur de code (</>) à côté de la propriété Is Disabled.
3. Ajoutez l’expression ${global.user.teams[0].name == 'Product Management'}.

Désactiver un composant pendant le chargement

Un autre cas d’utilisation courant consiste à désactiver un composant pendant qu’une requête est en cours de chargement. Dans le plan de gestion EC2, le composant de sélection instanceType est désactivé pendant que la requête listInstances est en cours de chargement. Pour ce faire, la propriété Is Disabled utilise l’expression ${listInstances.isLoading}.

Interactions de requête personnalisées

Tout comme pour les composants, vous pouvez utiliser des expressions JS pour modifier vos requêtes en fonction de l’interaction de l’utilisateur.

Filtrer les résultats de requête selon les entrées utilisateur

Le modèle de plannings d’astreinte PagerDuty filtre le résultat de la requête listSchedules en fonction des entrées de l’utilisateur. L’utilisateur sélectionne une équipe et un utilisateur à partir des composants de sélection team et user.

Dans la requête listSchedules, la transformation post-requête suivante filtre les résultats en fonction des valeurs de team et user :

return outputs.body.schedules.map( s => {
    return {
        ...s,
        users: s.users.map(u => u.summary),
        teams: s.teams.map(u => u.summary)
    }
}).filter(s => {

        const matchesName = !name.value.length ? true : s.name.toLowerCase().includes(name.value.toLowerCase());
        const matchesTeam = team.value === 'Any Team' ? true : s.teams.includes(team.value);
        const matchesUser = user.value === 'Any User' ? true : s.users.includes(user.value);

        return matchesName && matchesUser && matchesTeam ;
    }) || []

Définir le Run Settings de la requête sur Auto permet à la requête de s’exécuter chaque fois qu’un utilisateur modifie une valeur dans les composants team ou user.

Pour aller plus loin

Documentation, liens et articles supplémentaires utiles:

Créer des applicationsDOCUMENTATION ComposantsDOCUMENTATION