View a markdown version of this page

Utilisation JavaScript pour écrire des expressions dans App Studio - AWS App Studio
Syntaxe de baseInterpolationConcaténationDate et heureBlocs de codeFonctions et variables globalesRéférencer ou mettre à jour les valeurs des composants de l'interface utilisateurUtilisation des données des tableauxAccès aux automatisations

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Utilisation JavaScript pour écrire des expressions dans App Studio

Dans AWS App Studio, vous pouvez utiliser JavaScript des expressions pour contrôler dynamiquement le comportement et l'apparence de vos applications. Single-line JavaScript les expressions sont écrites entre doubles accolades et peuvent être utilisées dans divers contextes tels que les automatisations, les composants de l'interface utilisateur et les requêtes de données. {{ }} Ces expressions sont évaluées au moment de l'exécution et peuvent être utilisées pour effectuer des calculs, manipuler des données et contrôler la logique de l'application.

App Studio fournit un support natif pour trois bibliothèques JavaScript open source : Luxon, UUID, Lodash, ainsi que des intégrations de SDK pour détecter les erreurs de JavaScript syntaxe et de vérification de type dans les configurations de votre application.

Important

App Studio ne prend pas en charge l'utilisation de JavaScript bibliothèques tierces ou personnalisées.

Syntaxe de base

JavaScript les expressions peuvent inclure des variables, des littéraux, des opérateurs et des appels de fonctions. Les expressions sont couramment utilisées pour effectuer des calculs ou évaluer des conditions.

Voir les exemples suivants :

  • {{ 2 + 3 }}sera évalué à 5.

  • {{ "Hello, " + "World!" }}sera évalué à « Hello, World ! ».

  • {{ Math.max(5, 10) }}sera évalué à 10.

  • {{ Math.random() * 10 }}renvoie un nombre aléatoire (avec des décimales) compris entre [0-10).

Interpolation

Vous pouvez également l'utiliser JavaScript pour interpoler des valeurs dynamiques dans du texte statique. Pour ce faire, placez l' JavaScript expression entre doubles accolades, comme dans l'exemple suivant :

Hello {{ currentUser.firstName }}, welcome to App Studio!

Dans cet exemple, currentUser.firstName il s'agit JavaScript d'une expression qui récupère le prénom de l'utilisateur actuel, qui est ensuite inséré dynamiquement dans le message d'accueil.

Concaténation

Vous pouvez concaténer des chaînes et des variables à l'aide de l'+opérateur in JavaScript, comme dans l'exemple suivant.

{{ currentRow.FirstName + " " + currentRow.LastName }}

Cette expression combine les valeurs de currentRow.FirstName et currentRow.LastName avec un espace entre les deux, ce qui donne le nom complet de la ligne actuelle. Par exemple, si currentRow.FirstName est John et currentRow.LastName estDoe, alors l'expression se résoudrait àJohn Doe.

Date et heure

JavaScript fournit diverses fonctions et objets permettant de travailler avec des dates et des heures. Par exemple :

  • {{ new Date().toLocaleDateString() }}: Renvoie la date actuelle dans un format localisé.

  • {{ DateTime.now().toISODate() }}: Renvoie la date actuelle au YYYY-MM-DD format, à utiliser dans le composant Date.

Comparaison de la date et de l'heure

Utilisez des opérateurs tels que=, > <>=, ou <= pour comparer les valeurs de date ou d'heure. Par exemple :

  • {{ui.timeInput.value > "10:00 AM"}}: Vérifie si l'heure est postérieure à 10 heures.

  • {{ui.timeInput.value <= "5:00 PM"}}: Vérifie si l'heure est à 17 h ou avant.

  • {{ui.timeInput.value > DateTime.now().toISOTime()}}: Vérifie si l'heure est postérieure à l'heure actuelle.

  • {{ui.dateInput.value > DateTime.now().toISODate()}}: Vérifie si la date est antérieure à la date actuelle.

  • {{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}: Vérifie si la date est située à au moins 5 jours de la date actuelle.

Blocs de code

Outre les expressions, vous pouvez également écrire des blocs de JavaScript code multilignes. Contrairement aux expressions, les blocs de code ne nécessitent pas d'accolades. Au lieu de cela, vous pouvez écrire votre JavaScript code directement dans l'éditeur de blocs de code.

Note

Pendant que les expressions sont évaluées et que leurs valeurs sont affichées, des blocs de code sont exécutés et leur sortie (le cas échéant) est affichée.

Fonctions et variables globales

App Studio donne accès à certaines variables et fonctions globales qui peuvent être utilisées dans vos JavaScript expressions et blocs de code. Par exemple, currentUser il s'agit d'une variable globale qui représente l'utilisateur actuellement connecté, et vous pouvez accéder à des propriétés telles que la récupération du currentUser.role rôle de l'utilisateur.

Référencer ou mettre à jour les valeurs des composants de l'interface utilisateur

Vous pouvez utiliser des expressions dans les composants et les actions d'automatisation pour référencer et mettre à jour les valeurs des composants de l'interface utilisateur. En référençant et en mettant à jour les valeurs des composants par programmation, vous pouvez créer des interfaces utilisateur dynamiques et interactives qui répondent aux entrées utilisateur et aux modifications de données.

Référencer les valeurs des composants de l'interface utilisateur

Vous pouvez créer des applications interactives et pilotées par les données en mettant en œuvre un comportement dynamique en accédant aux valeurs des composants de l'interface utilisateur.

Vous pouvez accéder aux valeurs et aux propriétés des composants de l'interface utilisateur sur la même page en utilisant l'uiespace de noms dans les expressions. En faisant référence au nom d'un composant, vous pouvez récupérer sa valeur ou effectuer des opérations en fonction de son état.

Note

L'uiespace de noms n'affichera que les composants de la page en cours, car les composants sont limités à leurs pages respectives.

La syntaxe de base pour faire référence aux composants d'une application App Studio est la suivante : {{ui.componentName}}

La liste suivante contient des exemples d'utilisation de l'uiespace de noms pour accéder aux valeurs des composants de l'interface utilisateur :

  • {{ui.textInputName.value}}: représente la valeur d'un composant de saisie de texte nommétextInputName.

  • {{ui.formName.isValid}}: Vérifiez si tous les champs du formulaire nommé formName sont valides en fonction des critères de validation que vous avez fournis.

  • {{ui.tableName.currentRow.columnName}}: représente la valeur d'une colonne spécifique dans la ligne actuelle d'un composant de table nommétableName.

  • {{ui.tableName.selectedRowData.fieldName}}: représente la valeur du champ spécifié à partir de la ligne sélectionnée dans un composant de table nommétableName. Vous pouvez ensuite ajouter un nom de champ tel que ID ({{ui.tableName.selectedRowData.ID}}) pour faire référence à la valeur de ce champ à partir de la ligne sélectionnée.

La liste suivante contient des exemples plus spécifiques de référencement de valeurs de composants :

  • {{ui.inputText1.value.trim().length > 0}}: Vérifiez si la valeur du inputText1 composant, après avoir supprimé les espaces de début ou de fin, contient une chaîne non vide. Cela peut être utile pour valider les entrées de l'utilisateur ou d' enabling/disabling autres composants en fonction de la valeur du champ de saisie de texte.

  • {{ui.multiSelect1.value.join(", ")}}: pour un composant à sélection multiple nommémultiSelect1, cette expression convertit le tableau des valeurs d'options sélectionnées en une chaîne séparée par des virgules. Cela peut être utile pour afficher les options sélectionnées dans un format convivial ou pour transmettre les sélections à un autre composant ou à une automatisation.

  • {{ui.multiSelect1.value.includes("option1")}}: Cette expression vérifie si la valeur option1 est incluse dans le tableau des options sélectionnées pour le multiSelect1 composant. Elle renvoie true si elle option1 est sélectionnée, et false dans le cas contraire. Cela peut être utile pour le rendu conditionnel des composants ou pour prendre des mesures en fonction de sélections d'options spécifiques.

  • {{ui.s3Upload1.files.length > 0}}: pour un composant de téléchargement de fichiers Amazon S3 nommés3Upload1, cette expression vérifie si des fichiers ont été chargés en vérifiant la longueur du tableau de fichiers. Cela peut être utile pour enabling/disabling d'autres composants ou actions selon que les fichiers ont été chargés ou non.

  • {{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}: Cette expression filtre la liste des fichiers chargés dans le s3Upload1 composant pour n'inclure que les fichiers image PNG et renvoie le nombre de ces fichiers. Cela peut être utile pour valider ou afficher des informations sur les types de fichiers chargés.

Mise à jour des valeurs des composants d'interface

Pour mettre à jour ou manipuler la valeur d'un composant, utilisez le RunComponentAction dans un automatisme. Voici un exemple de syntaxe que vous pouvez utiliser pour mettre à jour la valeur d'un composant de saisie de texte nommé à myInput l'aide de l'RunComponentActionaction :

RunComponentAction(ui.myInput, "setValue", "New Value")

Dans cet exemple, l'RunComponentActionétape appelle l'setValueaction sur le myInput composant, en transmettant la nouvelle valeur,New Value.

Utilisation des données des tableaux

Vous pouvez accéder aux données et aux valeurs des tables pour effectuer des opérations. Vous pouvez utiliser les expressions suivantes pour accéder aux données des tables :

  • currentRow: Permet d'accéder aux données du tableau à partir de la ligne actuelle du tableau. Par exemple, définir le nom d'une action de table, envoyer une valeur de la ligne à un automatisme lancé à partir d'une action ou utiliser les valeurs des colonnes existantes d'un tableau pour créer une nouvelle colonne.

  • ui.tableName.selectedRowet ui.tableName.selectedRowData sont tous deux utilisés pour accéder aux données des tableaux à partir d'autres composants de la page. Par exemple, définir le nom d'un bouton en dehors du tableau en fonction de la ligne sélectionnée. Les valeurs renvoyées sont les mêmes, mais les différences entre selectedRow et selectedRowData sont les suivantes :

    • selectedRow: Cet espace de noms inclut le nom affiché dans l'en-tête de colonne de chaque champ. Vous devez l'utiliser selectedRow lorsque vous faites référence à une valeur provenant d'une colonne visible du tableau. Par exemple, si vous avez une colonne personnalisée ou calculée dans votre table qui n'existe pas en tant que champ dans l'entité.

    • selectedRowData: Cet espace de noms inclut les champs de l'entité utilisée comme source pour la table. Vous devez l'utiliser selectedRowData pour référencer une valeur de l'entité qui n'est pas visible dans le tableau, mais qui est utile pour d'autres composants ou automatisations de votre application.

La liste suivante contient des exemples d'accès aux données de table dans les expressions :

  • {{ui.tableName.selectedRow.columnNameWithNoSpace}}: Renvoie la valeur de la columnNameWithNoSpace colonne de la ligne sélectionnée dans le tableau.

  • {{ui.tableName.selectedRow.['Column Name With Space']}}: Renvoie la valeur de la Column Name With Space colonne de la ligne sélectionnée dans le tableau.

  • {{ui.tableName.selectedRowData.fieldName}}: Renvoie la valeur du champ d'fieldNameentité de la ligne sélectionnée dans le tableau.

  • {{ui.tableName.selectedRows[0].columnMappingName}}: faites référence au nom de colonne de la ligne sélectionnée à partir d'autres composants ou expressions de la même page.

  • {{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}: concaténez les valeurs de plusieurs colonnes pour créer une nouvelle colonne dans un tableau.

  • {{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}: Personnalisez la valeur d'affichage d'un champ dans une table en fonction de la valeur d'état enregistrée.

  • {{currentRow.colName}}, {{currentRow["First Name"]}}{{currentRow}}, ou {{ui.tableName.selectedRows[0]}} : Transmettez le contexte de la ligne référencée dans une action de ligne.

Accès aux automatisations

Vous pouvez utiliser des automatisations pour exécuter la logique et les opérations côté serveur dans App Studio. Dans les actions d'automatisation, vous pouvez utiliser des expressions pour traiter les données, générer des valeurs dynamiques et intégrer les résultats des actions précédentes.

Accès aux paramètres d'automatisation

Vous pouvez transmettre des valeurs dynamiques provenant de composants de l'interface utilisateur et d'autres automatisations à des automatisations, afin de les rendre réutilisables et flexibles. Cela se fait à l'aide de paramètres d'automatisation avec l'paramsespace de noms comme suit :

{{params.parameterName}}: faites référence à une valeur transmise à l'automatisation à partir d'un composant de l'interface utilisateur ou d'une autre source. Par exemple, {{params.ID}} ferait référence à un paramètre nomméID.

Manipulation des paramètres d'automatisation

Vous pouvez l'utiliser JavaScript pour manipuler les paramètres d'automatisation. Voir les exemples suivants :

  • {{params.firstName}} {{params.lastName}}: Concaténez les valeurs transmises en tant que paramètres.

  • {{params.numberParam1 + params.numberParam2}}: Ajoutez deux paramètres numériques.

  • {{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}: Vérifiez si un paramètre n'est pas nul ou non défini et s'il a une longueur différente de zéro. Si c'est vrai, utilisez la valeur fournie ; sinon, définissez une valeur par défaut.

  • {{params.rootCause || "No root cause provided"}}: Si le params.rootCause paramètre est faux (nul, non défini ou chaîne vide), utilisez la valeur par défaut fournie.

  • {{Math.min(params.numberOfProducts, 100)}}: Limitez la valeur d'un paramètre à une valeur maximale (dans ce cas,100).

  • {{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}: Si le params.startDate paramètre est"2023-06-15T10:30:00.000Z", cette expression sera évaluée à"2023-06-22T10:30:00.000Z", qui correspond à la date une semaine après la date de début.

Accès aux résultats d'automatisation d'une action précédente

Les automatisations permettent à l'application d'exécuter une logique et des opérations côté serveur, telles que l'interrogation de bases de données, l'interaction avec les API ou la réalisation de transformations de données. L'resultsespace de noms permet d'accéder aux sorties et aux données renvoyées par les actions précédentes au sein de la même automatisation. Notez les points suivants concernant l'accès aux résultats de l'automatisation :

  1. Vous ne pouvez accéder qu'aux résultats des étapes d'automatisation précédentes au sein de la même automatisation.

  2. Si vos actions sont nommées action1 et action2 dans cet ordre, vous action1 ne pouvez référencer aucun résultat et action2 vous pouvez uniquement y accéderresults.action1.

  3. Cela fonctionne également pour les actions côté client. Par exemple, si vous avez un bouton qui déclenche une automatisation à l'aide de l'InvokeAutomationaction. Vous pouvez ensuite avoir une étape de navigation avec une Run If condition telle que l'results.myInvokeAutomation1.fileType === "pdf"accès à une page à l'aide d'un visualiseur PDF si l'automatisation indique que le fichier est un PDF.

La liste suivante contient la syntaxe permettant d'accéder aux résultats d'automatisation d'une action précédente à l'aide de l'resultsespace de noms.

  • {{results.stepName.data}}: récupérez le tableau de données à partir d'une étape d'automatisation nomméestepName.

  • {{results.stepName.output}}: récupérez le résultat d'une étape d'automatisation nomméestepName.

La façon dont vous accédez aux résultats d'une étape d'automatisation dépend du type d'action et des données qu'elle renvoie. Les différentes actions peuvent renvoyer des propriétés ou des structures de données différentes. Voici quelques exemples courants :

  • Pour une action sur les données, vous pouvez accéder au tableau de données renvoyé à l'aide deresults.stepName.data.

  • Pour une action d'appel d'API, vous pouvez accéder au corps de la réponse en utilisantresults.stepName.body.

  • Pour une action Amazon S3, vous pouvez accéder au contenu du fichier à l'aide deresults.stepName.Body.transformToWebStream().

Consultez la documentation relative aux types d'actions spécifiques que vous utilisez pour comprendre la forme des données qu'ils renvoient et comment y accéder dans l'resultsespace de noms. La liste suivante contient quelques exemples

  • {{results.getDataStep.data.filter(row => row.status === "pending").length}}: en supposant qu'getDataStepil s'agit d'une action d'Invoke Data Actionautomatisation qui renvoie un tableau de lignes de données, cette expression filtre le tableau de données pour inclure uniquement les lignes auxquelles le champ d'état est égalpending, et renvoie la longueur (nombre) du tableau filtré. Cela peut être utile pour interroger ou traiter des données en fonction de conditions spécifiques.

  • {{params.email.split("@")[0]}}: si le params.email paramètre contient une adresse e-mail, cette expression divise la chaîne au niveau du symbole @ et renvoie la partie précédant le symbole @, extrayant ainsi la partie nom d'utilisateur de l'adresse e-mail.

  • {{new Date(params.timestamp * 1000)}}: Cette expression prend un paramètre d'horodatage Unix (params.timestamp) et le convertit en objet Date. JavaScript Il suppose que l'horodatage est en secondes, il le multiplie donc par 1000 pour le convertir en millisecondes, qui est le format attendu par le constructeur. Date Cela peut être utile pour travailler avec des valeurs de date et d'heure dans les automatisations.

  • {{results.stepName.Body}}: pour une action d'Amazon S3 GetObjectautomatisation nomméestepName, cette expression extrait le contenu du fichier, qui peut être utilisé par les composants de l'interface utilisateur tels que Image ou PDF Viewer pour afficher le fichier récupéré. Notez que cette expression doit être configurée dans la sortie Automation de l'automatisation à utiliser dans les composants.