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.
# Documentation du constructeur
Les rubriques suivantes contiennent des informations destinées à aider les utilisateurs d'App Studio qui créent, modifient et publient des applications.
**Topics**
+ [Tutoriels](tutorials.md)
+ [Création de votre application App Studio à l'aide de l'IA générative](generative-ai.md)
+ [Création, modification et suppression d'applications](applications-create-edit-delete.md)
+ [Prévisualisation, publication et partage d'applications](applications-preview-publish-share.md)
+ [Pages et composants : créez l'interface utilisateur de votre application](pages-components-ux.md)
+ [Automatisations et actions : définissez la logique métier de votre application](automations.md)
+ [Entités et actions sur les données : configurez le modèle de données de votre application](data.md)
+ [Paramètres de page et d'automatisation](paramters.md)
+ [Utilisation JavaScript pour écrire des expressions dans App Studio](expressions.md)
+ [Dépendances des données et considérations temporelles](data-dependencies-timing-considerations.md)
+ [Création d'une application avec plusieurs utilisateurs](builder-collaboration.md)
+ [Afficher ou mettre à jour les paramètres de sécurité du contenu de votre application](app-content-security-settings-csp.md)
# Tutoriels
**Topics**
+ [Créez une application de synthèse de texte basée sur l'IA avec Amazon Bedrock](tutorial-conversational-bedrock.md)
+ [Interaction avec Amazon Simple Storage Service à l'aide de composants et d'automatisations](automations-s3.md)
+ [Invocation de fonctions Lambda dans une application App Studio](tutorial-lambda.md)
# Créez une application de synthèse de texte basée sur l'IA avec Amazon Bedrock
Dans ce didacticiel, vous allez créer une application dans App Studio qui utilise Amazon Bedrock pour fournir des résumés concis des textes saisis par les utilisateurs finaux. L'application contient une interface utilisateur simple dans laquelle les utilisateurs peuvent saisir le texte qu'ils souhaitent résumer. Il peut s'agir de notes de réunion, de contenus d'articles, de résultats de recherche ou de toute autre information textuelle. Une fois que les utilisateurs ont saisi le texte, ils peuvent appuyer sur un bouton pour l'envoyer à Amazon Bedrock, qui le traitera à l'aide du modèle Claude 3 Sonnet et renverra une version résumée.
**Contents**
+ [Conditions préalables](#tutorial-conversational-bedrock-prerequisites)
+ [Étape 1 : créer et configurer un rôle IAM et un connecteur App Studio](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Étape 2 : Création d'une application](#tutorial-conversational-bedrock-steps-create-application)
+ [Étape 3 : Création et configuration d'une automatisation](#tutorial-conversational-bedrock-steps-create-automation)
+ [Étape 4 : Création de pages et de composants](#tutorial-conversational-bedrock-steps-user-interface)
+ [Renommer la page par défaut](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [Ajouter des composants à la page](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [Configuration des composants de la page](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Étape 5 : Publier l'application dans l'environnement **de test**](#tutorial-conversational-bedrock-steps-publish)
+ [(Facultatif) Nettoyer](#tutorial-conversational-bedrock-steps-cleanup)
## Conditions préalables
Avant de commencer, passez en revue et remplissez les conditions préalables suivantes :
+ Accès à AWS App Studio. Notez que vous devez avoir le rôle d'administrateur pour créer un connecteur dans ce didacticiel.
+ Facultatif : passez en revue [AWS Concepts d'App Studio](concepts.md) et familiarisez-vous avec les concepts importants d'App Studio. [Tutoriel : Commencez à créer à partir d'une application vide](getting-started-tutorial-empty.md)
## Étape 1 : créer et configurer un rôle IAM et un connecteur App Studio
Pour permettre à App Studio d'accéder aux modèles Amazon Bedrock, vous devez :
1. Activez les modèles Amazon Bedrock que vous souhaitez utiliser dans votre application. Pour ce didacticiel, vous utiliserez **Claude 3 Sonnet**. Assurez-vous donc d'activer ce modèle.
1. Créez un rôle IAM avec les autorisations appropriées sur Amazon Bedrock.
1. Créez un connecteur App Studio avec le rôle IAM qui sera utilisé dans votre application.
Accédez à [Connectez-vous à Amazon Bedrock](connectors-bedrock.md) des instructions détaillées, puis revenez à ce didacticiel après avoir suivi les étapes et créé le connecteur.
## Étape 2 : Création d'une application
Utilisez la procédure suivante pour créer une application vide dans App Studio que vous intégrerez à l'application de synthèse de texte.
1. Connectez-vous à App Studio.
1. Accédez au Builder Hub et choisissez **\$1 Create app**.
1. Choisissez **Commencer à zéro**.
1. Dans le champ **Nom de l'application**, saisissez un nom pour votre application, tel que**Text Summarizer**.
1. Si vous êtes invité à sélectionner des sources de données ou un connecteur, choisissez **Skip** dans le cadre de ce didacticiel.
1. Choisissez **Suivant** pour continuer.
1. (Facultatif) : Regardez le didacticiel vidéo pour un aperçu rapide de la création d'applications dans App Studio.
1. Choisissez **Modifier l'application**, qui vous permettra d'accéder au studio d'applications.
## Étape 3 : Création et configuration d'une automatisation
Vous définissez la logique et le comportement d'une application App Studio dans les *automatisations.* Les automatisations se composent d'étapes individuelles appelées *actions*, de *paramètres* utilisés pour transmettre des données à l'action à partir d'autres ressources et d'une *sortie* pouvant être utilisée par d'autres automatisations ou composants. Au cours de cette étape, vous allez créer une automatisation qui gère l'interaction avec Amazon Bedrock avec les éléments suivants :
+ Entrées : paramètre permettant de transmettre le texte saisi par l'utilisateur à l'automatisation.
+ Actions : une action **GenAI Prompt** qui envoie le texte saisi à Amazon Bedrock et renvoie le résumé du texte de sortie.
+ Sorties : une sortie d'automatisation qui comprend le résumé traité par Amazon Bedrock, qui peut être utilisé dans votre application.
**Pour créer et configurer une automatisation qui envoie une invite à Amazon Bedrock, traite et renvoie un résumé**
1. Choisissez l'onglet **Automatisations** en haut du canevas.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le panneau de droite, sélectionnez **Propriétés**.
1. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez **InvokeBedrock** et appuyez sur **Entrée**.
1. Ajoutez un paramètre à l'automatisation qui sera utilisé pour transmettre l'invite de texte saisie par l'utilisateur à l'automatisation à utiliser dans la demande adressée à Amazon Bedrock en effectuant les étapes suivantes :
1. Dans le canevas, dans la zone de paramètres, choisissez **\$1 Ajouter**.
1. Pour **Name (Nom)**, entrez **input**.
1. Dans **Description**, entrez une description, telle que**Text to be sent to Amazon Bedrock**.
1. Dans **Type**, sélectionnez **Chaîne**.
1. Choisissez **Ajouter** pour créer le paramètre.
1. Ajoutez une action **GenAI Prompt** en effectuant les étapes suivantes :
1. Dans le panneau de droite, sélectionnez **Actions**.
1. Choisissez **GenAI Prompt** pour ajouter une action.
1. Configurez l'action en effectuant les étapes suivantes :
1. Choisissez l'action dans le canevas pour ouvrir le menu **Propriétés** de droite.
1. Renommez l'action **PromptBedrock** en choisissant l'icône en forme de crayon, en saisissant le nom et en appuyant sur Entrée.
1. Dans **Connector**, sélectionnez le connecteur créé dans[Étape 1 : créer et configurer un rôle IAM et un connecteur App Studio](#tutorial-conversational-bedrock-steps-create-role-connector).
1. Dans **Model**, choisissez le modèle Amazon Bedrock que vous souhaitez utiliser pour traiter l'invite. Dans ce tutoriel, vous allez choisir **Claude 3.5 Sonnet.**
1. Dans **Invite utilisateur**, entrez`{{params.input}}`. Cela représente le `input` paramètre que vous avez créé précédemment et contiendra le texte saisi par les utilisateurs de votre application.
1. Dans **Invite du système**, entrez les instructions du système que vous souhaitez envoyer à Amazon Bedrock. Pour ce didacticiel, entrez les informations suivantes :
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. Choisissez **Paramètres de demande** pour le développer et mettez à jour les champs suivants :
+ Dans **Température**, entrez`0`. La température détermine le caractère aléatoire ou créatif de la sortie sur une échelle de 0 à 10. Plus le chiffre est élevé, plus la réponse est créative.
+ Dans **Max Tokens**, entrez `4096` pour limiter la longueur de la réponse.
1. Le résultat de cette automatisation sera le texte résumé, mais par défaut, les automatisations ne créent pas de sorties. Configurez l'automatisation pour créer une sortie d'automatisation en effectuant les étapes suivantes :
1. Dans le menu de navigation de gauche, choisissez l'**InvokeBedrock**automatisation.
1. Dans le menu **Propriétés** de droite, dans **Sortie**, choisissez **\$1 Ajouter**.
1. Dans **Sortie**, entrez**\$1\$1results.PromptBedrock.text\$1\$1**. Cette expression renvoie le contenu de l'`processResults`action.
## Étape 4 : Création de pages et de composants
Dans App Studio, chaque page représente un écran de l'interface utilisateur (UI) de votre application avec lequel vos utilisateurs interagiront. Dans ces pages, vous pouvez ajouter divers composants tels que des tableaux, des formulaires, des boutons, etc. pour créer la mise en page et les fonctionnalités souhaitées.
### Renommer la page par défaut
L'application de synthèse de texte de ce didacticiel ne contiendra qu'une seule page. Les applications nouvellement créées sont fournies avec une page par défaut, vous allez donc la renommer au lieu d'en ajouter une.
**Pour renommer la page par défaut**
1. Dans le menu de navigation de la barre supérieure, sélectionnez **Pages**.
1. Dans le panneau de gauche, choisissez **Page1** et choisissez le panneau **Propriétés** dans le panneau de droite.
1. Choisissez l'icône en forme de crayon**TextSummarizationTool**, entrez et appuyez sur **Entrée**.
1. Dans **Libellé de navigation**, entrez**TextSummarizationTool**.
### Ajouter des composants à la page
Pour ce didacticiel, l'application de synthèse de texte comporte une page contenant les éléments suivants :
+ Composant de **saisie de texte** que les utilisateurs finaux utilisent pour saisir une invite à résumer.
+ Un composant **Button** utilisé pour envoyer l'invite à Amazon Bedrock.
+ Un composant de **zone de texte** qui affiche le résumé d'Amazon Bedrock.
Ajoutez un composant de **saisie de texte** à la page que les utilisateurs utiliseront pour saisir une invite de texte à résumer.
**Pour ajouter un composant de saisie de texte**
1. Dans le panneau **Composants** de droite, localisez le composant de **saisie de texte** et faites-le glisser sur le canevas.
1. Choisissez le texte saisi dans le canevas pour le sélectionner.
1. Dans le panneau **Propriétés** de droite, mettez à jour les paramètres suivants :
1. Cliquez sur l'icône en forme de crayon pour renommer le texte saisi. **inputPrompt**
1. Dans **Label**, entrez**Prompt**.
1. Dans **Placeholder**, entrez**Enter text to be summarized**.
Ajoutez maintenant un composant **Button** que les utilisateurs choisiront pour envoyer l'invite à Amazon Bedrock.
**Pour ajouter un composant de bouton**
1. Dans le panneau **Composants** de droite, localisez le composant **Bouton** et faites-le glisser sur le canevas.
1. Cliquez sur le bouton dans le canevas pour le sélectionner.
1. Dans le panneau **Propriétés** de droite, mettez à jour les paramètres suivants :
1. Choisissez l'icône en forme de crayon pour renommer le bouton. **sendButton**
1. Dans **Libellé du bouton**, entrez**Send**.
Ajoutez maintenant un composant de **zone de texte** qui affichera le résumé renvoyé par Amazon Bedrock.
**Pour ajouter un composant de zone de texte**
1. Dans le panneau **Composants** de droite, localisez le composant **Zone de texte** et faites-le glisser sur le canevas.
1. Choisissez la zone de texte dans le canevas pour la sélectionner.
1. Dans le panneau **Propriétés** de droite, mettez à jour les paramètres suivants :
1. Choisissez l'icône en forme de crayon pour renommer le bouton. **textSummary**
1. Dans **Label**, entrez**Summary**.
### Configuration des composants de la page
Maintenant que l'application contient une page contenant des composants, l'étape suivante consiste à configurer les composants pour qu'ils adoptent le comportement approprié. Pour configurer un composant, tel qu'un bouton, afin qu'il prenne des mesures lorsqu'il interagit avec celui-ci, vous devez y ajouter un *déclencheur*. Pour l'application décrite dans ce didacticiel, vous allez ajouter deux déclencheurs au `sendButton` bouton pour effectuer les opérations suivantes :
+ Le premier déclencheur envoie le texte du `textPrompt` composant à Amazon Bedrock pour analyse.
+ Le deuxième déclencheur affiche le résumé renvoyé par Amazon Bedrock dans le `textSummary` composant.
**Pour ajouter un déclencheur qui envoie l'invite à Amazon Bedrock**
1. Cliquez sur le bouton dans le canevas pour le sélectionner.
1. Dans le panneau **Propriétés** de droite, dans la section **Déclencheurs**, choisissez **\$1 Ajouter**.
1. Choisissez **Invoke Automation**.
1. Choisissez le déclencheur **InvokeAutomation1** qui a été créé pour le configurer.
1. Dans **Nom de l'action**, entrez**invokeBedrockAutomation**.
1. Dans **Invoke Automation**, sélectionnez l'**InvokeBedrock**automatisation créée précédemment.
1. Dans la zone des paramètres, dans le paramètre **d'entrée** créé précédemment, entrez**\$1\$1ui.inputPrompt.value\$1\$1**, qui transmet le contenu du composant de saisie de `inputPrompt` texte.
1. Cliquez sur la flèche gauche en haut du panneau pour revenir au menu des propriétés du composant.
Maintenant que vous avez configuré un déclencheur qui invoque l'automatisation pour envoyer une demande à Amazon Bedrock lorsque vous cliquez sur le bouton, l'étape suivante consiste à configurer un deuxième déclencheur qui affiche les résultats dans le composant. `textSummary`
**Pour ajouter un déclencheur qui affiche les résultats d'Amazon Bedrock dans le composant de zone de texte**
1. Dans le panneau **Propriétés** situé à droite du bouton, dans la section **Déclencheurs**, choisissez **\$1 Ajouter**.
1. Choisissez **Exécuter l'action du composant**.
1. Choisissez le déclencheur **Runcomponentaction1** créé pour le configurer.
1. Dans **Nom de l'action**, entrez**setTextSummary**.
1. Dans **Composant**, sélectionnez le composant **TextSummary**.
1. Dans **Action**, sélectionnez **Définir la valeur**.
1. Dans **Définir la valeur sur**, entrez**\$1\$1results.invokeBedrockAutomation\$1\$1**.
## Étape 5 : Publier l'application dans l'environnement **de test**
Lorsque vous créez une application, il est généralement recommandé de la prévisualiser pour voir à quoi elle ressemble et de tester ses fonctionnalités dans un premier temps. Toutefois, étant donné que les applications n'interagissent pas avec les services externes dans l'environnement de prévisualisation, vous allez plutôt publier l'application dans l'environnement de test afin de pouvoir tester l'envoi de demandes et la réception de réponses d'Amazon Bedrock.
**Pour publier votre application dans l'environnement de test**
1. Dans le coin supérieur droit du générateur d'applications, choisissez **Publier**.
1. Ajoutez une description de version pour l'environnement de test.
1. Vérifiez et cochez la case concernant le SLA.
1. Sélectionnez **Démarrer**. La publication peut prendre jusqu'à 15 minutes.
1. (Facultatif) Lorsque vous êtes prêt, vous pouvez autoriser d'autres personnes à y accéder en choisissant **Partager** et en suivant les instructions. Pour plus d'informations sur le partage d'applications App Studio, consultez[Partage d'applications publiées](application-share.md).
Après avoir testé votre application, choisissez à nouveau **Publier** pour promouvoir l'application dans l'environnement de production. Notez que les applications de l'environnement de production ne sont pas accessibles aux utilisateurs finaux tant qu'elles ne sont pas partagées. Pour plus d'informations sur les différents environnements d'applications, consultez[Environnements d'applications](applications-publish.md#application-environments).
## (Facultatif) Nettoyer
Vous avez maintenant terminé avec succès le didacticiel et créé une application de synthèse de texte dans App Studio avec Amazon Bedrock. Vous pouvez continuer à utiliser votre application ou nettoyer les ressources créées dans ce didacticiel. La liste suivante contient la liste des ressources à nettoyer :
+ Le connecteur Amazon Bedrock créé dans App Studio. Pour de plus amples informations, veuillez consulter [Affichage, modification et suppression de connecteurs](viewing-deleting-connectors.md).
+ L'application de synthèse de texte dans App Studio. Pour de plus amples informations, veuillez consulter [Suppression d’une application](applications-delete.md).
+ Rôle IAM créé dans la console IAM. Pour plus d'informations, consultez la section [Supprimer des rôles ou des profils d'instance](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html) dans le *Guide de Gestion des identités et des accès AWS l'utilisateur*.
+ Si vous avez demandé l'accès aux modèles pour utiliser Claude 3 Sonnet et que vous souhaitez rétablir l'accès, consultez la section [Gérer l'accès aux modèles de fondation Amazon Bedrock dans le guide de l'utilisateur](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) d'*Amazon Bedrock*.
# Interaction avec Amazon Simple Storage Service à l'aide de composants et d'automatisations
Vous pouvez appeler diverses opérations Amazon S3 à partir d'une application App Studio. Par exemple, vous pouvez créer un simple panneau d'administration pour gérer vos utilisateurs et vos commandes et afficher vos médias depuis Amazon S3. Bien que vous puissiez invoquer n'importe quelle opération Amazon S3 à l'aide de l' AWS action **Invoke**, il existe quatre actions Amazon S3 dédiées que vous pouvez ajouter aux automatisations de votre application pour effectuer des opérations courantes sur les buckets et les objets Amazon S3. Les quatre actions et leurs opérations sont les suivantes :
+ **Put Object** : utilise l'`Amazon S3 PutObject`opération pour ajouter un objet dans un compartiment Amazon S3.
+ **Obtenir l'objet** : utilise l'`Amazon S3 GetObject`opération pour récupérer un objet depuis un compartiment Amazon S3.
+ **Lister les objets** : utilise l'`Amazon S3 ListObjects`opération pour répertorier les objets d'un compartiment Amazon S3.
+ **Supprimer l'objet** : utilise l'`Amazon S3 DeleteObject`opération pour supprimer un objet d'un compartiment Amazon S3.
Outre les actions, il existe un composant de **téléchargement S3** que vous pouvez ajouter aux pages des applications. Les utilisateurs peuvent utiliser ce composant pour choisir un fichier à télécharger, et le composant appelle `Amazon S3 PutObject` pour télécharger le fichier dans le compartiment et le dossier configurés. Ce didacticiel utilisera ce composant à la place de l'action autonome d'automatisation **Put Object**. (L'action autonome doit être utilisée dans des scénarios plus complexes impliquant une logique ou des actions supplémentaires à effectuer avant ou après le téléchargement.)
## Conditions préalables
Ce guide part du principe que vous avez rempli les conditions préalables suivantes :
1. Création et configuration d'un compartiment Amazon S3, d'un rôle et d'une politique IAM, ainsi que d'un connecteur Amazon S3 afin d'intégrer avec succès Amazon S3 à App Studio. Pour créer un connecteur, vous devez avoir le rôle d'administrateur. Pour de plus amples informations, veuillez consulter [Connectez-vous à Amazon Simple Storage Service (Amazon S3)](connectors-s3.md).
## Création d'une application vide
Créez une application vide à utiliser tout au long de ce guide en effectuant les étapes suivantes.
**Pour créer une application vide**
1. Dans le volet de navigation, sélectionnez **Mes applications**.
1. Choisissez **\$1 Créer une application**.
1. Dans la boîte de dialogue **Créer une application**, donnez un nom à votre application, choisissez **Démarrer à partir de zéro**, puis cliquez sur **Suivant**.
1. Dans la boîte de dialogue **Connect to existing data**, choisissez **Skip** pour créer l'application.
1. Choisissez **Modifier l'application** pour accéder au canevas de votre nouvelle application, où vous pouvez utiliser des composants, des automatismes et des données pour configurer l'apparence et le fonctionnement de votre application.
## Création de pages
Créez trois pages dans votre application pour recueillir ou afficher des informations.
**Pour créer des pages**
1. Si nécessaire, choisissez l'onglet **Pages** en haut du canevas.
1. Dans la barre de navigation de gauche, une seule page a été créée avec votre application. Choisissez **\$1 Ajouter** deux fois pour créer deux pages supplémentaires. Le volet de navigation doit afficher trois pages au total.
1. Mettez à jour le nom de la page **Page1** en effectuant les étapes suivantes :
1. Cliquez sur l'icône représentant des points de suspension, puis **sur Propriétés de la page**.
1. Dans le menu **Propriétés** de droite, choisissez l'icône en forme de crayon pour modifier le nom.
1. Entrez **FileList** et appuyez sur **Entrée**.
1. Répétez les étapes précédentes pour mettre à jour les deuxième et troisième pages comme suit :
+ Renommez **Page2** en. **UploadFile**
+ Renommez **Page3** en. **FailUpload**
À présent, votre application doit comporter trois pages nommées et **FileList**UploadFile**FailUpload******, qui sont affichées dans le panneau **Pages** de gauche.
Ensuite, vous allez créer et configurer les automatisations qui interagissent avec Amazon S3.
## Création et configuration d'automatisations
Créez les automatisations de votre application qui interagissent avec Amazon S3. Utilisez les procédures suivantes pour créer les automatisations suivantes :
+ Une automatisation **GetFiles** qui répertorie les objets de votre compartiment Amazon S3, qui seront utilisés pour remplir un composant de table.
+ Une automatisation **DeleteFile** qui supprime un objet de votre compartiment Amazon S3, qui sera utilisé pour ajouter un bouton de suppression à un composant de table.
+ Une automatisation **ViewFile** qui extrait un objet de votre compartiment Amazon S3 et l'affiche, qui sera utilisée pour afficher plus de détails sur un seul objet sélectionné dans un composant de table.
### Créez une `getFiles` automatisation
Créez une automatisation qui listera les fichiers dans un compartiment Amazon S3 spécifié.
1. Choisissez l'onglet **Automatisations** en haut du canevas.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le panneau de droite, sélectionnez **Propriétés**.
1. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez **getFiles** et appuyez sur **Entrée**.
1. Ajoutez une action **Répertorier les objets** en effectuant les étapes suivantes :
1. Dans le panneau de droite, sélectionnez **Actions**.
1. Choisissez **Lister les objets** pour ajouter une action. L'action doit être nommée`ListObjects1`.
1. Configurez l'action en effectuant les étapes suivantes :
1. Choisissez l'action dans le canevas pour ouvrir le menu **Propriétés** de droite.
1. Pour **Connector**, choisissez le connecteur Amazon S3 que vous avez créé à partir des prérequis.
1. Dans **Configuration**, entrez le texte suivant, en le *bucket\$1name* remplaçant par le bucket que vous avez créé dans les conditions préalables :
```
{
"Bucket": "bucket_name",
"Prefix": ""
}
```
**Note**
Vous pouvez utiliser le `Prefix` champ pour limiter la réponse aux objets qui commencent par la chaîne spécifiée.
1. Le résultat de cette automatisation sera utilisé pour remplir un composant de table avec des objets provenant de votre compartiment Amazon S3. Cependant, par défaut, les automatisations ne créent pas de sorties. Configurez l'automatisation pour créer une sortie d'automatisation en effectuant les étapes suivantes :
1. Dans la barre de navigation de gauche, choisissez l'automatisation **GetFiles**.
1. Dans le menu **Propriétés** de droite, dans **Sortie automatique**, choisissez **\$1 Ajouter une sortie**.
1. Pour **Sortie**, entrez**\$1\$1results.ListObjects1.Contents\$1\$1**. Cette expression renvoie le contenu de l'action et peut désormais être utilisée pour remplir un composant de table.
### Créez une `deleteFile` automatisation
Créez une automatisation qui supprime un objet d'un compartiment Amazon S3 spécifié.
1. Dans le panneau **Automatisations** de gauche, choisissez **\$1** Ajouter.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le panneau de droite, sélectionnez **Propriétés**.
1. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez **deleteFile** et appuyez sur **Entrée**.
1. Ajoutez un paramètre d'automatisation, utilisé pour transmettre des données à une automatisation, en effectuant les étapes suivantes :
1. Dans le menu **Propriétés** de droite, dans **Paramètres d'automatisation**, choisissez **\$1 Ajouter**.
1. Cliquez sur l'icône en forme de crayon pour modifier le paramètre d'automatisation. Mettez à jour le nom du paramètre **fileName** et appuyez sur **Entrée**.
1. Ajoutez une action **Supprimer l'objet** en effectuant les étapes suivantes :
1. Dans le panneau de droite, sélectionnez **Actions**.
1. Choisissez **Supprimer l'objet** pour ajouter une action. L'action doit être nommée`DeleteObject1`.
1. Configurez l'action en effectuant les étapes suivantes :
1. Choisissez l'action dans le canevas pour ouvrir le menu **Propriétés** de droite.
1. Pour **Connector**, choisissez le connecteur Amazon S3 que vous avez créé à partir des prérequis.
1. Dans **Configuration**, entrez le texte suivant, en le *bucket\$1name* remplaçant par le bucket que vous avez créé dans les conditions préalables :
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
### Créez une `viewFile` automatisation
Créez une automatisation qui récupère un seul objet d'un compartiment Amazon S3 spécifié. Plus tard, vous configurerez cette automatisation avec un composant d'affichage de fichiers pour afficher l'objet.
1. Dans le panneau **Automatisations** de gauche, choisissez **\$1** Ajouter.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le panneau de droite, sélectionnez **Propriétés**.
1. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez **viewFile** et appuyez sur **Entrée**.
1. Ajoutez un paramètre d'automatisation, utilisé pour transmettre des données à une automatisation, en effectuant les étapes suivantes :
1. Dans le menu **Propriétés** de droite, dans **Paramètres d'automatisation**, choisissez **\$1 Ajouter**.
1. Cliquez sur l'icône en forme de crayon pour modifier le paramètre d'automatisation. Mettez à jour le nom du paramètre **fileName** et appuyez sur **Entrée**.
1. Ajoutez une action **Obtenir un objet** en effectuant les étapes suivantes :
1. Dans le panneau de droite, sélectionnez **Actions**.
1. Choisissez **Obtenir un objet** pour ajouter une action. L'action doit être nommée`GetObject1`.
1. Configurez l'action en effectuant les étapes suivantes :
1. Choisissez l'action dans le canevas pour ouvrir le menu **Propriétés** de droite.
1. Pour **Connector**, choisissez le connecteur Amazon S3 que vous avez créé à partir des prérequis.
1. Dans **Configuration**, entrez le texte suivant, en le *bucket\$1name* remplaçant par le bucket que vous avez créé dans les conditions préalables :
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
1. Par défaut, les automatisations ne créent pas de sorties. Configurez l'automatisation pour créer une sortie d'automatisation en effectuant les étapes suivantes :
1. Dans la barre de navigation de gauche, choisissez l'automatisation **ViewFile**.
1. Dans le menu **Propriétés** de droite, dans **Sortie automatique**, choisissez **\$1 Ajouter une sortie**.
1. Pour **Sortie**, entrez**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**. Cette expression renvoie le contenu de l'action.
**Note**
Vous pouvez lire la réponse de `S3 GetObject` l'une des manières suivantes :
`transformToWebStream`: Renvoie un flux qui doit être consommé pour récupérer les données. Si elle est utilisée comme sortie automatique, l'automatisation gère cela et la sortie peut être utilisée comme source de données d'un composant de visionneuse d'images ou de PDF. Il peut également être utilisé comme entrée pour une autre opération, telle que`S3 PutObject`.
`transformToString`: renvoie les données brutes de l'automatisation et doit être utilisé dans une JavaScript action si vos fichiers contiennent du texte, tel que des données JSON. Doit être attendu, par exemple : `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: Renvoie un tableau d'entiers non signés de 8 bits. Cette réponse sert de tableau d'octets, qui permet le stockage et la manipulation de données binaires. Doit être attendu, par exemple : `await results.GetObject1.Body.transformToByteArray();`
Vous allez ensuite ajouter des composants aux pages que vous avez créées précédemment et les configurer avec vos automatisations afin que les utilisateurs puissent utiliser votre application pour afficher et supprimer des fichiers.
## Ajouter et configurer des composants de page
Maintenant que vous avez créé les automatisations qui définissent la logique métier et les fonctionnalités de votre application, vous allez créer des composants et les connecter tous les deux.
### Ajouter des composants à la **FileList**page
La **FileList**page que vous avez créée précédemment sera utilisée pour afficher la liste des fichiers du compartiment Amazon S3 configuré ainsi que des informations supplémentaires sur les fichiers sélectionnés dans la liste. Pour ce faire, vous devez effectuer les opérations suivantes :
1. Créez un composant de table pour afficher la liste des fichiers. Vous allez configurer les lignes de la table pour qu'elles soient remplies avec le résultat de l'automatisation **GetFiles** que vous avez créée précédemment.
1. Créez un composant de visionnage de PDF pour afficher un seul PDF. Vous allez configurer le composant pour afficher un fichier sélectionné dans le tableau, à l'aide de l'automatisation **ViewFile** que vous avez créée précédemment pour récupérer le fichier depuis votre bucket.
**Pour ajouter des composants à la **FileList**page**
1. Choisissez l'onglet **Pages** en haut du canevas.
1. Dans le panneau **Pages** de gauche, sélectionnez la **FileList**page.
1. Sur la page **Composants** de droite, recherchez le composant **Table** et faites-le glisser vers le centre du canevas.
1. Choisissez le composant de tableau que vous venez d'ajouter à la page.
1. **Dans le menu **Propriétés** de droite, choisissez le menu déroulant **Source** et sélectionnez Automatisation.**
1. Choisissez le menu déroulant **Automation** et sélectionnez l'automatisation **GetFiles**. Le tableau utilisera le résultat de l'automatisation **GetFiles** comme contenu.
1. Ajoutez une colonne à remplir avec le nom du fichier.
1. Dans le menu **Propriétés** de droite, à côté de **Colonnes**, choisissez **\$1 Ajouter**.
1. Cliquez sur l'icône en forme de flèche à droite de la **colonne 1** qui vient d'être ajoutée.
1. Pour **Libellé de colonne**, renommez la colonne en**Filename**.
1. Pour le champ **Valeur**, saisissez **\$1\$1currentRow.Key\$1\$1**.
1. Cliquez sur l'icône en forme de flèche en haut du panneau pour revenir au panneau principal **des propriétés**.
1. Ajoutez une action de tableau pour supprimer le fichier d'une ligne.
1. Dans le menu **Propriétés** de droite, à côté de **Actions**, choisissez **\$1 Ajouter**.
1. Dans **Actions**, renommez **Button** en. **Delete**
1. Cliquez sur l'icône en forme de flèche située à droite de l'action **Supprimer** qui vient d'être renommée.
1. Dans **Au clic**, choisissez **\$1 Ajouter une action**, puis choisissez **Invoke automation**.
1. Choisissez l'action qui a été ajoutée pour la configurer.
1. Pour **Nom de l’action**, saisissez **DeleteRecord**.
1. Dans **Invoke automation**, sélectionnez**deleteFile**.
1. Dans la zone de texte des paramètres, entrez**\$1\$1currentRow.Key\$1\$1**.
1. Pour le champ **Valeur**, saisissez **\$1\$1currentRow.Key\$1\$1**.
1. Dans le panneau de droite, choisissez **Composants** pour afficher le menu des composants. Deux options s'offrent à vous pour afficher les fichiers :
+ Une **visionneuse d'images** pour afficher les fichiers avec une `.jpg` extension `.png``.jpeg`, ou.
+ Un composant de **visionnage de PDF** permettant de visualiser des fichiers PDF.
Dans ce didacticiel, vous allez ajouter et configurer le composant de **visualisation de PDF**.
1. Ajoutez le composant de **visionnage de PDF**.
1. Sur la page **Composants** de droite, recherchez le composant du **lecteur PDF** et faites-le glisser vers le canevas, sous le composant du tableau.
1. Choisissez le composant de **visionnage de PDF** qui vient d'être ajouté.
1. **Dans le menu **Propriétés** de droite, choisissez le menu déroulant **Source** et sélectionnez Automatisation.**
1. Choisissez le menu déroulant **Automation** et sélectionnez l'automatisation **ViewFile**. Le tableau utilisera la sortie de l'automatisation **ViewFile** comme contenu.
1. Dans la zone de texte des paramètres, entrez**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
1. Dans le panneau de droite, il y a également un champ **Nom de fichier**. La valeur de ce champ est utilisée comme en-tête pour le composant de visualisation de PDF. Entrez le même texte qu'à l'étape précédente : **\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**
### Ajouter des composants à la **UploadFile**page
La **UploadFile**page contiendra un sélecteur de fichier qui pourra être utilisé pour sélectionner et charger un fichier dans le compartiment Amazon S3 configuré. Vous allez ajouter le composant de **téléchargement S3** à la page, que les utilisateurs pourront utiliser pour sélectionner et télécharger un fichier.
1. Dans le panneau **Pages** de gauche, sélectionnez la **UploadFile**page.
1. Sur la page **Composants** de droite, recherchez le composant de **téléchargement S3** et faites-le glisser vers le centre du canevas.
1. Choisissez le composant de téléchargement S3 que vous venez d'ajouter à la page.
1. Dans le menu **Propriétés** de droite, configurez le composant :
1. Dans la liste déroulante **Connector**, sélectionnez le connecteur Amazon S3 créé dans les conditions requises.
1. Pour **Bucket**, entrez le nom de votre compartiment Amazon S3.
1. Dans le **champ Nom du fichier**, entrez**\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**.
1. Pour **Taille maximale du fichier**, entrez **5** dans la zone de texte et assurez-vous qu'elle **MB** est sélectionnée dans le menu déroulant.
1. Dans la section **Déclencheurs**, ajoutez des actions qui s'exécutent après un téléchargement réussi ou non en effectuant les étapes suivantes :
Pour ajouter une action qui s'exécute une fois les chargements réussis, procédez comme suit :
1. Dans **En cas de succès**, choisissez **\$1 Ajouter une action**, puis sélectionnez **Naviguer**.
1. Choisissez l'action qui a été ajoutée pour la configurer.
1. Pour le **type de navigation**, choisissez **Page**.
1. Pour **Naviguer vers**, choisissez**FileList**.
1. Cliquez sur l'icône en forme de flèche en haut du panneau pour revenir au panneau principal **des propriétés**.
Pour ajouter une action qui s'exécute après un téléchargement infructueux, procédez comme suit :
1. Dans **En cas d'échec**, choisissez **\$1 Ajouter une action**, puis sélectionnez **Naviguer**.
1. Choisissez l'action qui a été ajoutée pour la configurer.
1. Pour le **type de navigation**, choisissez **Page**.
1. Pour **Naviguer vers**, choisissez**FailUpload**.
1. Cliquez sur l'icône en forme de flèche en haut du panneau pour revenir au panneau principal **des propriétés**.
### Ajouter des composants à la **FailUpload**page
La **FailUpload**page est une page simple contenant une zone de texte qui informe les utilisateurs que leur téléchargement a échoué.
1. Dans le panneau **Pages** de gauche, sélectionnez la **FailUpload**page.
1. Sur la page **Composants** de droite, recherchez le composant **Texte** et faites-le glisser vers le centre du canevas.
1. Choisissez le composant de texte que vous venez d'ajouter à la page.
1. Dans le menu **Propriétés** de droite, dans **Valeur**, entrez**Failed to upload, try again**.
## Mettez à jour les paramètres de sécurité de votre application
Chaque application d'App Studio possède des paramètres de sécurité du contenu que vous pouvez utiliser pour restreindre les médias ou les ressources externes, ou les domaines vers lesquels vous pouvez télécharger des objets dans Amazon S3. Le paramètre par défaut est de bloquer tous les domaines. Pour charger des objets vers Amazon S3 depuis votre application, vous devez mettre à jour le paramètre afin d'autoriser les domaines vers lesquels vous souhaitez télécharger des objets.
**Pour autoriser les domaines à télécharger des objets sur Amazon S3**
1. Choisissez l'onglet **Paramètres de l'application**.
1. Choisissez l'onglet **Paramètres de sécurité du contenu**.
1. Pour **Connect source**, choisissez **Autoriser toutes les connexions**.
1. Choisissez **Enregistrer**.
## Prochaines étapes : prévisualiser et publier l'application à des fins de test
L'application est maintenant prête à être testée. Pour plus d'informations sur la prévisualisation et la publication d'applications, consultez[Prévisualisation, publication et partage d'applications](applications-preview-publish-share.md).
# Invocation de fonctions Lambda dans une application App Studio
Ce didacticiel explique comment connecter App Studio à Lambda et appeler des fonctions Lambda depuis vos applications.
## Conditions préalables
Ce guide part du principe que vous avez rempli les conditions préalables suivantes :
1. Création d'une application App Studio. Si vous n'en avez pas, vous pouvez créer une application vide à utiliser dans le didacticiel. Pour de plus amples informations, veuillez consulter [Création d’une application](applications-create.md).
**Note**
Bien que vous n'ayez pas besoin d'une fonction Lambda pour suivre ce didacticiel et apprendre à la configurer, il peut être utile d'en avoir une pour vous assurer que vous avez correctement configuré l'application. [Ce didacticiel ne contient aucune information sur la création de fonctions Lambda. Pour plus d'informations, consultez le manuel du AWS Lambda développeur.](https://docs.aws.amazon.com/lambda/latest/dg/)
## Création d'un connecteur Lambda
Pour utiliser les fonctions Lambda dans votre application App Studio, vous devez utiliser un connecteur pour connecter App Studio à Lambda afin de permettre l'accès à vos fonctions. Vous devez être administrateur pour créer des connecteurs dans App Studio. Pour plus d'informations sur la création de connecteurs Lambda, notamment sur les étapes de création d'un connecteur Lambda, consultez. [Connect à AWS Lambda](connectors-lambda.md)
## Création et configuration d'une automatisation
Les automatisations sont utilisées pour définir la logique de votre application et sont composées d'actions. Pour appeler une fonction Lambda dans votre application, vous devez d'abord ajouter et configurer une action Invoke *Lambda* à une automatisation. Procédez comme suit pour créer une automatisation et y ajouter l'action *Invoke Lambda*.
1. Lorsque vous modifiez votre application, choisissez l'onglet **Automatisations**.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le menu **Actions** de droite, choisissez **Invoke Lambda** pour ajouter l'étape à votre automatisation.
1. Choisissez la nouvelle étape Lambda dans le canevas pour afficher et configurer ses propriétés.
1. Dans le menu **Propriétés** de droite, configurez l'étape en effectuant les étapes suivantes :
1. Dans **Connector**, sélectionnez le connecteur créé pour connecter App Studio à vos fonctions Lambda.
1. Dans **Nom de la fonction**, entrez le nom de votre fonction Lambda.
1. Dans **Événement de fonction**, entrez l'événement à transmettre à la fonction Lambda. Certains exemples de cas d'utilisation courants sont fournis dans la liste suivante :
+ Transmission de la valeur d'un paramètre d'automatisation, tel qu'un nom de fichier ou une autre chaîne : `varName: params.paramName`
+ Transmission du résultat d'une action précédente : `varName: results.actionName1.data[0].fieldName`
+ Si vous ajoutez une action *Invoke Lambda* dans une action *Loop*, vous pouvez envoyer des champs à partir de chaque élément itéré de la même manière que des paramètres : `varName: currentItem.fieldName`
1. Le champ **de sortie** simulée peut être utilisé pour fournir une sortie fictive afin de tester l'application lors de la prévisualisation, lorsque les connecteurs ne sont pas actifs.
## Configuration d'un élément d'interface utilisateur pour exécuter l'automatisation
Maintenant que vous disposez d'une automatisation configurée avec une action pour appeler votre fonction Lambda, vous pouvez configurer un élément d'interface utilisateur pour exécuter l'automatisation. Dans ce didacticiel, vous allez créer un bouton qui exécute l'automatisation lorsque vous cliquez dessus.
**Astuce**
Vous pouvez également exécuter des automatisations à partir d'autres automatismes à l'aide de l'action d'*automatisation Invoke*.
**Pour exécuter votre automatisation à partir d'un bouton**
1. Lorsque vous modifiez votre application, choisissez l'onglet **Pages**.
1. Dans le menu de droite, choisissez le composant **Bouton** pour ajouter un bouton à la page.
1. Cliquez sur le nouveau bouton pour le configurer.
1. Dans le menu **Propriétés** de droite, dans **Déclencheurs**, choisissez **\$1 Ajouter**, puis choisissez **Invoke automation**.
1. Choisissez le nouveau déclencheur d'appel automatique pour le configurer.
1. Dans **Invoke automation**, sélectionnez l'automatisation qui appelle votre fonction Lambda et configurez les paramètres que vous souhaitez envoyer à l'automatisation.
Désormais, tout utilisateur qui choisit ce bouton dans votre application entraînera l'exécution de l'automatisation configurée.
## Prochaines étapes : prévisualiser et publier l'application à des fins de test
Votre application est maintenant prête à être testée. Lorsque vous prévisualisez votre application dans l'environnement de développement, les connecteurs ne sont pas actifs. Vous ne pouvez donc pas tester l'automatisation lors de la prévisualisation, car elle utilise un connecteur pour se connecter. AWS Lambda Pour tester les fonctionnalités de votre application qui dépendent des connecteurs, vous devez publier l'application dans l'environnement de test. Pour plus d'informations sur la prévisualisation et la publication d'applications, consultez[Prévisualisation, publication et partage d'applications](applications-preview-publish-share.md).
# Création de votre application App Studio à l'aide de l'IA générative
AWS App Studio fournit des fonctionnalités intégrées d'IA générative pour accélérer le développement et rationaliser les tâches courantes. Vous pouvez tirer parti de l'IA générative pour générer et modifier des applications, des modèles de données, des échantillons de données et même obtenir une aide contextuelle lors de la création d'applications.
## Génération de votre application
Pour un démarrage accéléré, vous pouvez générer des applications complètes à l'aide d'instructions en langage naturel alimentées par l'IA. Cette fonctionnalité vous permet de décrire les fonctionnalités d'application souhaitées, et l'IA créera automatiquement les modèles de données, les interfaces utilisateur, les flux de travail et les connecteurs. Pour plus d'informations sur la génération d'une application à l'aide de l'IA, consultez[Création d’une application](applications-create.md).
## Création ou modification de votre application
Lorsque vous modifiez votre application, vous pouvez utiliser le chat pour décrire les modifications que vous souhaitez apporter et votre application est automatiquement mise à jour. Vous pouvez choisir parmi les exemples d'invite existants ou saisir votre propre invite. Le chat peut être utilisé pour ajouter, modifier et supprimer des composants pris en charge, ainsi que pour créer et configurer des automatisations et des actions. Suivez la procédure ci-dessous pour utiliser l'IA pour modifier ou créer votre application.
**Pour modifier votre application avec l'IA**
1. Si nécessaire, modifiez votre application pour accéder au studio d'applications.
1. (Facultatif) Sélectionnez la page ou le composant que vous souhaitez modifier avec l'IA.
1. Choisissez **Construire avec l'IA** dans le coin inférieur gauche pour ouvrir le chat.
1. Entrez les modifications que vous souhaitez apporter ou choisissez-les parmi les exemples d'instructions.
1. Passez en revue les modifications à apporter. Si vous souhaitez que les modifications soient apportées, choisissez **Confirmer**. Sinon, entrez une autre invite.
1. Consultez le résumé des modifications.
## Génération de vos modèles de données
Vous pouvez générer automatiquement une entité avec des champs, des types de données et des actions de données en fonction du nom d'entité fourni. Pour plus d'informations sur la création d'entités, y compris la création d'entités à l'aide de GenAi, consultez[Création d'une entité dans une application App Studio](data-entities-create.md).
Vous pouvez également mettre à jour une entité existante des manières suivantes :
+ Ajoutez des champs supplémentaires à une entité. Pour de plus amples informations, veuillez consulter [Ajouter, modifier ou supprimer des champs d'entité](data-entities-edit-fields.md).
+ Ajoutez des actions de données à une entité. Pour de plus amples informations, veuillez consulter [Création d'actions relatives aux données](data-entities-edit-data-actions.md#data-entities-data-action-add).
## Génération d'échantillons de données
Vous pouvez générer des exemples de données pour vos entités en fonction des champs de l'entité. Cela est utile pour tester votre application avant de connecter des sources de données externes ou de tester votre application dans l'environnement de développement, qui ne communique pas avec les sources de données externes. Pour de plus amples informations, veuillez consulter [Ajouter ou supprimer des échantillons de données](data-entities-edit-sample-data.md).
Une fois que vous avez publié votre application dans Testing ou Production, vos sources de données en direct et vos connecteurs sont utilisés dans ces environnements.
## Configuration des actions pour les AWS services
Lors de l'intégration à AWS des services tels qu'Amazon Simple Email Service, vous pouvez utiliser l'IA pour générer un exemple de configuration avec des champs préremplis en fonction du service sélectionné. Pour l'essayer, dans le menu **Propriétés** d'une action d'automatisation **Invoke AWS**, développez le champ **Configuration** en choisissant la flèche double face. Choisissez ensuite **Générer un exemple de configuration**.
## Réponses moqueuses
Vous pouvez générer des réponses simulées pour des actions AWS de service. Cela est utile pour tester votre application dans l'environnement de développement, qui ne communique pas avec des sources de données externes.
## Demander de l'aide à l'IA lors de la construction
Dans le studio d'application, vous trouverez un bouton « **Demander de l'aide à l'IA** » sur les ressources ou propriétés prises en charge. Utilisez-le pour obtenir des suggestions contextuelles, de la documentation et des conseils relatifs à la vue actuelle ou au composant sélectionné. Posez des questions générales sur App Studio, les meilleures pratiques en matière de création d'applications ou le cas d'utilisation spécifique de votre application pour recevoir des informations et des recommandations personnalisées.
# Création, modification et suppression d'applications
**Contents**
+ [Création d’une application](applications-create.md)
+ [Importation d'applications](applications-import.md)
+ [Applications importables fournies par App Studio](applications-import.md#app-catalog)
+ [Duplication d'applications](applications-duplicate.md)
+ [Modification ou création d'une application](applications-edit.md)
+ [Modifier une version d'application publiée précédemment](applications-edit-previously-published-version.md)
+ [Modification du nom d'une application](applications-rename.md)
+ [Suppression d’une application](applications-delete.md)
# Création d’une application
Pour créer une application dans App Studio, procédez comme suit.
**Pour créer une application**
1. Dans le volet de navigation, choisissez **Mes applications** dans la section **Créer** pour accéder à la liste de vos applications.
1. Choisissez **\$1 Créer une application**.
1. Dans la boîte de dialogue **Créer une application**, nommez votre application et choisissez l'une des méthodes de création d'applications suivantes :
+ **Générer une application avec l'IA** : choisissez cette option pour décrire votre application en langage naturel, et demandez à l'IA de générer l'application et ses ressources pour vous.
+ Partir **de zéro** : choisissez cette option pour commencer à créer à partir d'une application vide.
1. Choisissez **Suivant**.
1. Si vous avez choisi **Générer une application avec l'IA** :
1. **Dans la boîte de dialogue **Se connecter aux données existantes**, ajoutez des sources de données existantes à votre application en sélectionnant le **connecteur** qui permet à App Studio d'accéder aux sources de données, puis en sélectionnant les **tables et en choisissant** Next.** L'ajout de sources de données ici permet à l'IA de générer une application optimisée pour vous. Vous pouvez ignorer cette étape et ajouter des sources de données ultérieurement en choisissant **Ignorer**.
1. Après un bref délai (quelques minutes), vous êtes redirigé vers la page **Générer votre application à l'aide de l'IA**, où vous pouvez décrire l'application que vous souhaitez créer.
1. Vous pouvez commencer à décrire votre application dans le chat, ou vous pouvez choisir et personnaliser un exemple d'invite fourni.
1. Une fois votre demande analysée, passez en revue les exigences et la vue d'ensemble de l'application. Utilisez le chat pour demander des modifications, ou choisissez **Recommencer pour recommencer** à partir d'une invite vide.
1. Lorsque vous êtes prêt, choisissez **Generate app**.
1. Une fois générée, prévisualisez votre application dans un autre onglet en choisissant **Aperçu de l'application**. Lorsque vous êtes prêt à commencer à modifier, vous pouvez choisir **Modifier l'application**. Parcourez les pages, les automatisations et les données de votre application pour vous familiariser avec celle-ci. Passez en revue les erreurs ou les avertissements dans le panneau de débogage inférieur. Pour en savoir plus sur la génération d'une application à l'aide de l'IA, consultez[Tutoriel : Générer une application à l'aide de l'IA](getting-started-tutorial-ai.md). Pour obtenir des informations générales sur le fonctionnement de la création dans App Studio, consultez[Comment fonctionne AWS App Studio](how-it-works.md).
1. Si vous avez choisi **Commencer à zéro** :
1. **Dans la boîte de dialogue **Se connecter aux données existantes**, ajoutez des sources de données existantes à votre application en sélectionnant le **connecteur** qui permet à App Studio d'accéder aux sources de données, puis en sélectionnant les **tables et en choisissant** Next.** Vous pouvez ignorer cette étape et ajouter des sources de données ultérieurement en choisissant **Ignorer**.
1. Une fois votre application créée, choisissez **Modifier l'application** pour commencer à la modifier. Pour en savoir plus sur la création à partir d'une application vide, consultez[Tutoriel : Commencez à créer à partir d'une application vide](getting-started-tutorial-empty.md). Pour obtenir des informations générales sur le fonctionnement de la création dans App Studio, consultez[Comment fonctionne AWS App Studio](how-it-works.md).
# Importation d'applications
Vous pouvez importer une copie d'une application exportée dans votre instance App Studio. Vous pouvez importer des applications exportées depuis d'autres instances d'App Studio ou des applications issues d'un catalogue fourni par App Studio. L'importation d'une application depuis le catalogue d'applications App Studio peut vous aider à démarrer avec une application dotée de fonctionnalités similaires, ou vous aider à en apprendre davantage sur la création d'applications dans App Studio en explorant l'application importée.
Lorsque vous importez une application dans votre instance, une copie de l'application d'origine est créée dans votre instance. Une fois la nouvelle application créée, vous êtes dirigé vers l'environnement de développement de l'application, où vous pouvez la prévisualiser et parcourir les fonctionnalités de l'application.
**Avertissement**
Lorsque vous importez une application, vous importez toute la logique de l'application, ce qui peut entraîner un comportement indésirable ou inattendu. Par exemple, certaines requêtes destructives peuvent supprimer des données des bases de données que vous connectez à l'application. Nous vous recommandons de passer en revue minutieusement l'application et sa configuration, et de la tester sur des actifs non liés à la production avant d'y connecter les données de production.
**Pour importer une application**
1. Dans le volet de navigation, choisissez **Mes applications** dans la section **Créer** pour accéder à la liste de vos applications.
1. Cliquez sur la flèche déroulante située à côté de **\$1 Create app**.
1. Choisissez **Importer l'application**.
1. Dans la boîte de dialogue **Importer une application**, dans **Code d'**importation, entrez le code d'importation de l'application que vous souhaitez importer. Pour obtenir la liste des applications fournies par App Studio qui peuvent être importées, y compris les descriptions des applications et les codes d'importation, consultez[Applications importables fournies par App Studio](#app-catalog).
1. Choisissez **Importer** pour importer l'application et accédez à l'environnement de développement de l'application importée pour l'afficher ou la modifier. Pour plus d'informations sur la création d'applications dans App Studio, voir [Comment fonctionne AWS App Studio](how-it-works.md)
## Applications importables fournies par App Studio
App Studio fournit des applications qui peuvent être importées dans votre instance pour vous aider à en savoir plus sur la création d'applications. Pour voir comment les fonctionnalités spécifiques des applications sont mises en œuvre dans App Studio, vous pouvez prévisualiser les applications, puis parcourir leur configuration dans l'environnement de développement.
Le tableau suivant contient la liste des applications, leurs codes d'importation et une brève description des applications. Chaque application inclut une `README` page contenant des informations sur l'application que vous pouvez consulter après l'avoir importée.
| Nom de l'application | Description | Code d'importation |
| --- | --- | --- |
| **Sondage sur les demandes de cadeaux** | Une application interne de demande de cadeaux conçue pour permettre aux employés de commander des produits de marque de l'entreprise. Les employés peuvent sélectionner des articles, spécifier des tailles et soumettre leur demande via un simple formulaire. Cette application gère toutes les données via le stockage intégré, éliminant ainsi le besoin de connexions externes. | Sondage Request Survey/EC4F5FAF-E2F8-42EE-AB8D-6723D8CA21B2 |
| **Suivi des sprints** | Une application de gestion des sprints que les équipes peuvent utiliser pour organiser et suivre le travail de développement de logiciels. Les utilisateurs peuvent créer des sprints, ajouter des tâches, attribuer des tâches et suivre les progrès grâce à des affichages dédiés aux sprints, au suivi et aux tâches. Cette application gère toutes les données via le stockage intégré, éliminant ainsi le besoin de connexions externes. | Suivi du sprint/8F31E160-771F-48D7-87B0-374E285E2FBC |
| **Amazon Review Sentiment Tracker** | Cette application est un outil d'analyse des commentaires des clients qui génère des scores de sentiment à partir des avis sur les produits afin d'aider les entreprises à comprendre la satisfaction des clients. L'application inclut des exemples d'utilitaires de génération de données pour des tests rapides et nécessite un connecteur Amazon Bedrock pour obtenir des informations basées sur l'IA, tout en conservant toutes les autres données dans le système de stockage intégré. | Amazon Review Sentiment Tracker/60F0DAE4-F8E2-4C20-9583-FA456F5EBFAB |
| **Traitement des factures et des reçus** | Cette application de traitement des reçus permet de gagner du temps et de réduire les erreurs en automatisant la saisie manuelle des données et en rationalisant les flux de travail d'approbation des documents. La solution nécessite les connecteurs Amazon Textract, Amazon S3 et Amazon SES. Il utilise un Amazon Textract pour analyser et extraire les données des reçus stockés dans Amazon S3, puis traite les informations extraites et les envoie par e-mail aux approbateurs à l'aide d'Amazon SES. | Traitement des factures et des reçus/98BDE3AE-E454-4B18-A1E6-6F23E8B2A4F1 |
| **Inspection et audit d'inventaire** | Une application pour gérer les inspections d'entrepôts et le suivi des équipements. Les utilisateurs peuvent effectuer des évaluations de pass/fail l'équipement par emplacement de la pièce, surveiller les niveaux d'inventaire et consulter l'historique des inspections. L'application fournit un système centralisé permettant de suivre à la fois les inspections des installations et l'état des équipements. Cette application gère toutes les données via le stockage intégré, éliminant ainsi le besoin de connexions externes. | Inspection et audit d'inventaire/CF570A06-1C5E-4DD7-9EA8-5C04723D687F |
| **Suivi de l'adoption des produits** | Une application complète de gestion du développement de produits qui centralise les commentaires des clients, les demandes de fonctionnalités et les notes de réunion des clients. Les équipes peuvent suivre les interactions avec les clients, organiser les exigences et générer des rapports basés sur l'IA pour la planification des feuilles de route trimestrielles. L'application inclut des exemples d'utilitaires de données et s'appuie sur Amazon Bedrock pour obtenir des informations sur l'IA et Amazon Aurora PostgreSQL pour la gestion des données. | Suivi de l'adoption du produit/9B3A4437-BB50-467F-AE9E-D108776B7CA1 |
| **Intégration rapide** | Une application de démonstration qui permet aux utilisateurs de consulter les analyses tout en travaillant avec les données sous-jacentes. L'application contient deux méthodes pour intégrer les tableaux de bord Amazon Quick dans App Studio : une approche basée sur l'API pour les utilisateurs enregistrés et anonymes (nécessitant un connecteur rapide) et une intégration iFrame pour les tableaux de bord publics. | Intégration Quicksight /0CDC15FC-CA8B-41B7-869E-ED13C9072BC8 |
| **Évier de cuisine** | Une application de référence présentant des conseils de développement avancés et les meilleures pratiques d'App Studio. Comprend des exemples pratiques de gestion des états, de gestion des données CSV, d'intégration des API de navigateur et de modèles d'interface utilisateur que les créateurs peuvent étudier et implémenter dans leurs propres applications. Aucun des exemples ne nécessite de connexion externe. | Évier de cuisine App Studio/1CFE6B2F-544C-4611-B82C-80EADC76A0C8 |
# Duplication d'applications
Les propriétaires et copropriétaires d'applications peuvent dupliquer leurs applications pour créer une copie exacte de l'application. La duplication d'applications est utile si vous souhaitez conserver l'état actuel à des fins de test ou utiliser l'application dupliquée comme point de départ pour créer une nouvelle application.
**Pour dupliquer une application**
1. Dans le volet de navigation, sélectionnez **Mes applications** dans la section **Créer**. Vous serez redirigé vers une page affichant la liste des applications auxquelles vous avez accès.
1. Choisissez le menu déroulant dans la colonne **Actions** de l'application que vous souhaitez dupliquer.
1. Choisissez **Duplicate (Dupliquer)**. Si l'option **Dupliquer** n'est pas disponible, vous n'êtes probablement ni propriétaire ni copropriétaire de l'application.
1. Indiquez éventuellement le nom de l'application dupliquée. Le nom par défaut est *Current\$1App\$1Name COPY*.
1. Choisissez **Duplicate (Dupliquer)**.
# Modification ou création d'une application
Pour modifier une application dans App Studio, procédez comme suit.
**Pour modifier (créer) une application**
1. Dans le volet de navigation, sélectionnez **Mes applications** dans la section **Créer**. Vous serez redirigé vers une page affichant la liste des applications auxquelles vous avez accès.
1. Dans la colonne **Actions** de l'application que vous souhaitez modifier, choisissez **Modifier**. Cela vous mènera à l'environnement de développement, où vous pourrez utiliser des composants, des automatisations et des données pour configurer l'apparence et le fonctionnement de votre application. Pour plus d'informations sur la création d'applications, consultez[Commencer à utiliser AWS App Studio](getting-started.md).
# Modifier une version d'application publiée précédemment
Suivez la procédure ci-dessous pour modifier une version publiée précédemment de votre application App Studio. Après avoir choisi de modifier la version publiée précédemment, vous pouvez modifier l'application dans l'environnement de développement ou la publier dans Testing puis Production.
**Avertissement**
La version publiée précédemment remplace la version en cours de l'application dans l'environnement de développement. Toutes les modifications non publiées apportées à votre application seront perdues.
La modification d'une version publiée précédemment est utile si vous publiez accidentellement des modifications indésirables ou des modifications qui perturbent l'application pour vos utilisateurs, et si vous souhaitez créer ou modifier davantage à partir de la version précédente de l'application.
**Note**
Si vous détectez des problèmes liés à une application publiée et que vous devez publier immédiatement une version qui fonctionnait déjà, ou si vous souhaitez publier une version précédente tout en conservant les dernières mises à jour de l'application dans l'environnement de développement, vous devez plutôt annuler l'application. Pour de plus amples informations, veuillez consulter [Revenir à une version publiée précédemment](application-rollback-version.md).
**Pour modifier une version d'application publiée précédemment**
1. Si nécessaire, accédez au studio d'application de votre application.
1. Cliquez sur la flèche déroulante à côté du bouton **Publier**, puis sélectionnez **Centre de publication**.
1. Choisissez **Historique des versions** pour voir la liste des versions précédemment publiées de l'application.
1. Recherchez la version que vous souhaitez modifier, puis choisissez **Modifier**.
1. Passez en revue les informations, puis choisissez **Revert**.
1. La version que vous avez choisi de modifier est désormais la version actuelle dans l'environnement de développement. Vous pouvez y apporter des modifications ou le publier tel quel dans l'environnement de test en choisissant **Publier**. Une fois publié dans Testing, vous pouvez le publier à nouveau dans l'environnement de production si vous le souhaitez.
# Modification du nom d'une application
Pour renommer une application dans App Studio, procédez comme suit. Vous pouvez renommer une application depuis la liste des applications ou depuis l'environnement de développement lors de la création de l'application.
**Pour renommer une application**
1. Dans le volet de navigation, sélectionnez **Mes applications** dans la section **Créer**. Vous serez redirigé vers une page affichant la liste des applications auxquelles vous avez accès.
1. Vous pouvez renommer une application depuis cette liste ou depuis l'environnement de développement lors de la modification.
+ Pour renommer à partir de cette liste, procédez comme suit :
1. **Choisissez le menu déroulant dans la colonne **Actions** de l'application que vous souhaitez renommer, puis choisissez Renommer.**
1. Donnez un nouveau nom à votre application, puis choisissez **Renommer**.
+ Pour renommer depuis l'environnement de développement, procédez comme suit :
1. Dans la colonne **Actions** de l'application que vous souhaitez modifier, choisissez **Modifier**.
1. Dans l'environnement de développement, choisissez le nom de l'application et mettez-le à jour, puis appuyez sur Entrée ou quittez le champ de texte pour enregistrer vos modifications.
# Suppression d’une application
Pour supprimer une application dans App Studio, procédez comme suit.
**Pour supprimer une application**
1. Dans le volet de navigation, sélectionnez **Mes applications** dans la section **Créer**. Vous serez redirigé vers une page affichant la liste des applications auxquelles vous avez accès.
1. Choisissez le menu déroulant dans la colonne **Actions** de l'application que vous souhaitez supprimer.
1. Sélectionnez **Delete (Supprimer)**.
1. Dans la boîte de dialogue **Supprimer l'application**, examinez attentivement les informations relatives à la suppression d'applications. Si vous souhaitez supprimer l'application, choisissez **Supprimer**.
# Prévisualisation, publication et partage d'applications
**Topics**
+ [Prévisualisation des applications](applications-preview.md)
+ [Applications de publication](applications-publish.md)
+ [Partage d'applications publiées](application-share.md)
+ [Revenir à une version publiée précédemment](application-rollback-version.md)
+ [Exportation d'applications](applications-export.md)
# Prévisualisation des applications
Vous pouvez prévisualiser les applications dans App Studio pour voir comment elles apparaîtront aux yeux des utilisateurs et tester ses fonctionnalités en l'utilisant et en consultant les journaux dans un panneau de débogage.
L'environnement de prévisualisation de l'application ne prend pas en charge l'affichage de données en direct ni la connexion avec des ressources externes via des connecteurs, tels que des sources de données. Pour tester les fonctionnalités dans l'environnement de prévisualisation, vous pouvez utiliser une sortie simulée dans les automatisations et des exemples de données dans les entités. Pour afficher votre application avec des données en temps réel, vous devez publier votre application. Pour de plus amples informations, veuillez consulter [Applications de publication](applications-publish.md).
L'environnement de prévisualisation ou de développement ne met pas à jour l'application publiée dans les autres environnements. Si une application n'a pas été publiée, les utilisateurs ne pourront pas y accéder tant qu'elle n'aura pas été publiée et partagée. Si une application a déjà été publiée et partagée, les utilisateurs pourront toujours accéder à la version publiée, et non à la version utilisée dans un environnement de prévisualisation.
**Pour prévisualiser votre application**
1. Si nécessaire, accédez au studio d'application de l'application que vous souhaitez prévisualiser :
1. Dans le volet de navigation, sélectionnez **Mes applications** dans la section **Créer**.
1. Choisissez **Modifier** pour l'application.
1. Choisissez **Aperçu** pour ouvrir l'environnement de prévisualisation de l'application.
1. (Facultatif) Développez le panneau de débogage en choisissant son en-tête en bas de l'écran. Vous pouvez filtrer le panneau par type de message en choisissant le type de message dans la section **Filtrer les journaux**. Vous pouvez effacer les journaux du panneau en choisissant **Effacer la console**.
1. Dans l'environnement de prévisualisation, vous pouvez tester votre application en parcourant ses pages, en utilisant ses composants et en choisissant ses boutons pour démarrer les automatisations qui transfèrent des données. Étant donné que l'environnement de prévisualisation ne prend pas en charge les données en direct ni les connexions à des sources externes, vous pouvez consulter des exemples de données transférées dans le panneau de débogage.
# Applications de publication
Lorsque vous avez terminé de créer et de configurer votre application, l'étape suivante consiste à la publier pour tester les transferts de données ou à la partager avec les utilisateurs finaux. Pour comprendre les applications de publication dans App Studio, il est important de connaître les environnements disponibles. App Studio propose trois environnements distincts, décrits dans la liste suivante :
1. **Développement** : où vous créez et prévisualisez votre application. Il n'est pas nécessaire de publier dans l'environnement de développement, car la dernière version de votre application y est automatiquement hébergée. Aucune donnée en temps réel, aucun service ou ressource tiers n'est disponible dans cet environnement.
1. **Tests** : où vous pouvez effectuer des tests complets de votre application. Dans l'environnement de test, vous pouvez vous connecter à d'autres services, leur envoyer des données et en recevoir.
1. **Production** : environnement opérationnel en temps réel pour la consommation par l'utilisateur final.
Toute la création de votre application s'effectue dans l'environnement **de développement**. **Publiez ensuite dans l'environnement de test pour tester le transfert de données entre d'autres services, et les tests d'acceptation utilisateur (UAT) en fournissant une URL d'accès aux utilisateurs finaux.** Publiez ensuite votre application dans l'environnement **de production** pour effectuer les derniers tests avant de la partager avec les utilisateurs. Pour plus d'informations sur les environnements d'applications, consultez[Environnements d'applications](#application-environments).
Lorsque vous publiez une application, elle n'est pas disponible pour les utilisateurs tant qu'elle n'est pas partagée. Cela vous donne la possibilité d'utiliser et de tester l'application dans les environnements de test et de production avant que les utilisateurs ne puissent y accéder. Lorsque vous publiez une application dans Production qui a déjà été publiée et partagée, la version disponible pour les utilisateurs est mise à jour.
## Applications de publication
Utilisez la procédure suivante pour publier une application App Studio dans l'environnement de test ou de production.
**Pour publier une application dans un environnement de test ou de production**
1. Dans le volet de navigation, sélectionnez **Mes applications** dans la section **Créer**. Vous serez redirigé vers une page affichant la liste des applications auxquelles vous avez accès.
1. Choisissez **Modifier** pour l'application que vous souhaitez publier.
1. Choisissez **Publier** dans le coin supérieur droit.
1. Dans la boîte de dialogue **Publier vos mises à jour** :
1. Consultez les informations relatives à la publication d'une application.
1. (Facultatif) Dans **Description de la version**, incluez une description de cette version de l'application.
1. Cochez la case pour accuser réception des informations relatives à l'environnement.
1. Sélectionnez **Démarrer**. La mise à jour de l'application dans l'environnement réel peut prendre jusqu'à 15 minutes.
1. Pour plus d'informations sur l'affichage des applications dans les environnements de test ou de production, consultez[Afficher les applications publiées](#application-viewing-published).
**Note**
L'utilisation de l'application dans l'environnement de test ou de production entraînera un transfert de données en direct, tel que la création d'enregistrements dans des tables de sources de données connectées par des connecteurs.
Les applications publiées qui n'ont jamais été partagées ne seront pas accessibles aux utilisateurs ou aux autres créateurs. Pour mettre une application à la disposition des utilisateurs, vous devez la partager après sa publication. Pour de plus amples informations, veuillez consulter [Partage d'applications publiées](application-share.md).
## Afficher les applications publiées
Vous pouvez consulter les applications publiées dans les environnements de test et de production pour tester l'application avant de la partager avec les utilisateurs finaux ou d'autres créateurs.
**Pour consulter les applications publiées dans l'environnement de test ou de production**
1. Si nécessaire, accédez au studio d'application de l'application que vous souhaitez prévisualiser :
1. Dans le volet de navigation, sélectionnez **Mes applications** dans la section **Créer**.
1. Choisissez **Modifier** pour l'application.
1. Cliquez sur la flèche déroulante située à côté de **Publier** dans le coin supérieur droit, puis sélectionnez Centre de **publication**.
1. Depuis le centre de publication, vous pouvez consulter les environnements dans lesquels votre application est publiée. Si votre application est publiée dans les environnements de test ou de production, vous pouvez l'afficher à l'aide du lien **URL** de chaque environnement.
**Note**
L'utilisation de l'application dans l'environnement de test ou de production entraînera un transfert de données en direct, tel que la création d'enregistrements dans des tables de sources de données connectées par des connecteurs.
## Environnements d'applications
AWS App Studio fournit des fonctionnalités de gestion du cycle de vie des applications (ALM) dans trois environnements distincts : développement, test et production. Cela vous permet de mettre en œuvre plus facilement les meilleures pratiques, telles que le maintien d'environnements distincts, le contrôle des versions, le partage et la surveillance tout au long du cycle de vie des applications.
### Environnement de développement
L'environnement de **développement** est un sandbox isolé dans lequel vous pouvez créer des applications sans vous connecter à des sources de données ou à des services en direct à l'aide du studio d'applications et d'exemples de données. Dans l'environnement de développement, vous pouvez prévisualiser votre application pour la visualiser et la tester sans compromettre les données de production.
Bien que votre application ne se connecte pas aux autres services de l'environnement de développement, vous pouvez configurer différentes ressources dans votre application pour imiter les connecteurs de données et les automatisations en temps réel.
Un panneau de débogage pliable inclut des erreurs et des avertissements au bas du studio d'applications dans l'environnement de développement pour vous aider à inspecter et à déboguer l'application au fur et à mesure de sa création. Pour plus d'informations sur le dépannage et le débogage des applications, consultez[Résolution des problèmes et débogage d'App Studio](troubleshooting-and-debugging.md).
### Environnement de test
Une fois le développement initial de votre application terminé, l'étape suivante consiste à publier dans l'environnement de **test**. Dans l'environnement de test, votre application peut se connecter à d'autres services, leur envoyer des données et en recevoir. Vous pouvez donc utiliser cet environnement pour effectuer des tests complets, notamment des tests d'acceptation utilisateur (UAT) en fournissant une URL d'accès aux utilisateurs finaux.
**Note**
Votre publication initiale dans l'environnement de test peut prendre jusqu'à 15 minutes.
La version de votre application publiée dans l'environnement de test sera supprimée après 3 heures d'inactivité de l'utilisateur final. Cependant, toutes les versions sont conservées et peuvent être restaurées à partir de l'onglet **Historique des versions**.
Les principales fonctionnalités de l'environnement de test sont les suivantes :
+ Tests d'intégration avec des sources de données en direct et APIs
+ Tests d'acceptation des utilisateurs (UAT) facilités par un accès contrôlé
+ Environnement permettant de recueillir des commentaires et de résoudre les problèmes
+ Possibilité d'inspecter et de déboguer les activités côté client et côté serveur à l'aide de consoles de navigateur et d'outils de développement.
Pour plus d'informations sur le dépannage et le débogage des applications, consultez[Résolution des problèmes et débogage d'App Studio](troubleshooting-and-debugging.md).
### Environnement de production
Après avoir testé et résolu tous les problèmes, vous pouvez promouvoir la version de votre application de l'environnement de test vers l'environnement de production pour une utilisation opérationnelle en direct. Bien que l'environnement de production soit l'environnement opérationnel réel destiné aux utilisateurs finaux, vous pouvez tester la version publiée avant de la partager avec les utilisateurs.
Votre version publiée dans l'environnement de production sera supprimée après 14 jours d'inactivité de l'utilisateur final. Cependant, toutes les versions sont conservées et peuvent être restaurées à partir de l'onglet **Historique des versions**.
Les principales caractéristiques de l'environnement de production sont les suivantes :
+ Environnement opérationnel en temps réel pour la consommation des utilisateurs finaux
+ Contrôle d'accès granulaire basé sur les rôles
+ Fonctionnalités de contrôle des versions et de restauration
+ Possibilité d'inspecter et de déboguer les activités côté client uniquement
+ Utilise des connecteurs en direct, des données, des automatisations et APIs
## Gestion des versions et des versions
App Studio fournit des fonctionnalités de contrôle des versions et de gestion des versions par le biais de son système de gestion des versions dans le **centre de publication**.
Principales fonctionnalités de gestion des versions :
+ La publication dans l'environnement de test génère de nouveaux numéros de version (1.0, 2.0, 3.0...).
+ Le numéro de version ne change pas lors de la promotion de l'environnement de test vers l'environnement de production.
+ Vous pouvez revenir à n'importe quelle version précédente à partir de **l'historique des versions**.
+ Les applications publiées dans l'environnement de test sont suspendues après 3 heures d'inactivité. Les versions sont conservées et peuvent être restaurées à partir de **l'historique des versions**.
+ Les applications publiées dans l'environnement de production sont supprimées après 14 jours d'inactivité. Les versions sont conservées et peuvent être restaurées à partir de **l'historique des versions**.
Ce modèle de gestion des versions permet une itération rapide tout en préservant la traçabilité, les fonctionnalités de restauration et les performances optimales tout au long du cycle de développement et de test des applications.
## Maintenance et exploitation
App Studio peut avoir besoin de republier automatiquement votre application pour effectuer certaines tâches de maintenance, certaines activités opérationnelles et pour intégrer de nouvelles bibliothèques de logiciels. Aucune action n'est requise de votre part, en tant que créateur, mais les utilisateurs finaux devront peut-être se reconnecter à l'application. Dans certaines situations, nous pouvons avoir besoin que vous republiiez votre application pour intégrer de nouvelles fonctionnalités et bibliothèques que nous ne pouvons pas ajouter automatiquement nous-mêmes. Vous devrez corriger les erreurs et consulter les avertissements avant de publier à nouveau.
# Partage d'applications publiées
Lorsque vous publiez une application qui n'a pas encore été publiée, elle n'est pas disponible pour les utilisateurs tant qu'elle n'est pas partagée. Une fois qu'une application publiée a été partagée, elle sera disponible pour les utilisateurs et n'aura pas besoin d'être partagée à nouveau si une autre version est publiée.
**Note**
Cette section traite du partage d'applications publiées avec des utilisateurs finaux ou des testeurs. Pour plus d'informations sur la manière d'inviter d'autres utilisateurs à créer une application, consultez[Création d'une application avec plusieurs utilisateurs](builder-collaboration.md).
**Pour partager une application publiée**
1. Accédez à la boîte de dialogue **Partager** depuis la liste des applications ou depuis le studio d'applications de votre application en suivant les instructions suivantes :
+ Pour accéder à la boîte de dialogue **Partager** depuis la liste des applications : dans le volet de navigation, choisissez **Mes applications** dans la section **Créer**. Choisissez le menu déroulant dans la colonne **Actions** de l'application que vous souhaitez partager, puis sélectionnez **Partager**.
+ Pour accéder à la boîte de dialogue **Partager** depuis le studio d'application : dans le studio d'application de votre application, choisissez **Partager** dans l'en-tête supérieur.
1. Dans la boîte de dialogue **Partager**, choisissez l'onglet correspondant à l'environnement que vous souhaitez partager. Si vous ne voyez pas les onglets **Test** ou **Production**, il est possible que votre application ne soit pas publiée dans l'environnement correspondant. Pour plus d'informations sur la publication, consultez [Applications de publication](applications-publish.md).
1. Dans l'onglet approprié, sélectionnez des groupes dans le menu déroulant pour partager l'environnement avec eux.
1. (Facultatif) Attribuez un rôle au niveau de l'application au groupe pour tester ou configurer la visibilité conditionnelle des pages. Pour de plus amples informations, veuillez consulter [Configuration de la visibilité des pages basée sur les rôles](app-level-roles.md).
1. Choisissez **Partager**.
1. (Facultatif) Copiez le lien et partagez-le avec les utilisateurs. Seuls les utilisateurs avec lesquels l'application et l'environnement ont été partagés peuvent accéder à l'application dans l'environnement correspondant.
# Revenir à une version publiée précédemment
Utilisez la procédure suivante pour rétablir une version publiée précédemment dans l'environnement de production de votre application App Studio. Les utilisateurs finaux de votre application seront concernés et verront la version annulée de votre application une fois celle-ci déployée. Lorsque vous annulez une application, cela rétablit également la version du code du composant par rapport à la date de publication précédente et affecte l'ensemble de la pile de déploiement de l'application (code utilisateur, état de configuration du composant). Cela signifie que toutes les mises à jour apportées par App Studio au code des composants, telles que les modifications de champs ou autres modifications de configuration, seront annulées afin de garantir que la version annulée de l'application fonctionne comme elle le faisait lors de sa publication initiale.
La version en cours de votre application dans l'environnement de développement n'est pas affectée lorsque vous annulez la version publiée.
L'annulation de la version publiée d'une application est utile si vous détectez des problèmes liés à une application publiée et devez publier immédiatement une version qui fonctionnait auparavant, ou si vous souhaitez publier une version précédente et conserver les dernières mises à jour de l'application dans l'environnement de développement.
**Note**
Si vous souhaitez rétablir l'environnement de développement d'une application à une version publiée précédemment, vous devez rétablir l'application. Pour de plus amples informations, veuillez consulter [Modifier une version d'application publiée précédemment](applications-edit-previously-published-version.md).
**Pour rétablir la version de l'environnement de production à une version d'application publiée précédemment**
1. Si nécessaire, accédez à l'environnement de développement de votre application en le modifiant. Pour de plus amples informations, veuillez consulter [Modification ou création d'une application](applications-edit.md).
1. Cliquez sur la flèche déroulante des versions en haut de la vignette Environnement de **production** pour voir les versions disponibles à annuler. La liste déroulante contient les versions publiées au cours des 30 derniers jours. Si cette liste déroulante est désactivée, cela peut être dû au fait qu'une publication d'application est déjà en cours et qu'une seule publication peut avoir lieu à la fois.
1. Choisissez la version à laquelle vous souhaitez revenir.
1. Entrez le motif de l'annulation, puis choisissez **Restaurer**. La publication rétroactive commencera et, une fois terminée, l'environnement de production de votre application sera mis à jour vers la version choisie.
**Note**
Vous pouvez également revenir à une version d'application publiée précédemment après l'avoir annulée.
# Exportation d'applications
Vous pouvez exporter un instantané de votre application pour le partager avec d'autres instances d'App Studio. Lorsque vous exportez une application, un instantané est créé à partir de l'environnement de développement de l'application et un code d'importation est généré. Le code d'importation peut ensuite être utilisé pour importer l'application dans d'autres instances d'App Studio, où elle peut être visualisée et créée.
Les applications exportées peuvent être importées dans des instances Région AWS prises en charge par App Studio.
**Pour exporter une application**
1. Dans le volet de navigation, choisissez **Mes applications** dans la section **Créer** pour accéder à la liste de vos applications.
1. Choisissez le menu déroulant dans la colonne **Actions** de l'application que vous souhaitez exporter.
1. Cliquez sur **Exporter**.
1. La procédure de génération et de partage d'un code d'importation varie selon qu'un code d'importation a déjà été créé ou non pour l'application.
+ Si aucun code d'importation n'a été créé :
1. Dans **Autorisations d'importation d'applications**, spécifiez quelles instances peuvent importer l'application exportée. Vous pouvez accorder des autorisations d'importation à toutes les instances ou ajouter des instances App Studio spécifiques en saisissant leur instance IDs. Séparez les instances multiples IDs par une virgule.
Pour trouver l'ID de votre instance, accédez aux paramètres du compte de votre instance en choisissant **Paramètres du compte** dans la console App Studio.
1. Choisissez **Générer le code d'importation**.
1. Copiez et partagez le code d'importation généré.
+ Si un code d'importation a déjà été créé :
1. Pour partager l'application actuellement exportée, copiez et partagez le code d'importation existant. Pour créer une nouvelle application exportée avec les dernières modifications apportées à votre application, choisissez **Générer un nouveau code**. Vous pouvez également mettre à jour les autorisations d'importation si nécessaire.
# Pages et composants : créez l'interface utilisateur de votre application
**Topics**
+ [Gestion des pages](pages.md)
+ [Gestion des composants](adding-editing-deleting-components.md)
+ [Configuration de la visibilité des pages basée sur les rôles](app-level-roles.md)
+ [Classer et organiser les pages dans la navigation de l'application](pages-order.md)
+ [Changez les couleurs de votre application à l'aide de thèmes d'applications](app-theme.md)
+ [Référence des composants](components-reference.md)
# Gestion des pages
Utilisez les procédures suivantes pour créer, modifier ou supprimer des pages dans votre AWS application App Studio.
Les **pages** sont des conteneurs pour [les composants](concepts.md#concepts-component) qui constituent l'interface utilisateur d'une application dans App Studio. Chaque page représente un écran de l'interface utilisateur (UI) de votre application avec laquelle vos utilisateurs interagiront. Les pages sont créées et éditées dans l'onglet **Pages** du studio d'application.
# Création d'une page
Utilisez la procédure suivante pour créer une page dans une application dans App Studio. Pour plus d'informations sur la duplication d'une page existante, consultez. [Dupliquer une page](pages-duplicate.md)
**Pour créer une page**
1. Si nécessaire, accédez à l'environnement de développement de votre application en le modifiant.
1. Accédez à l'onglet **Pages**.
1. Dans le menu **Pages** de gauche, choisissez **\$1 Ajouter**.
# Dupliquer une page
Utilisez la procédure suivante pour dupliquer une page dans une application dans App Studio.
**Pour dupliquer une page**
1. Si nécessaire, accédez à l'environnement de développement de votre application en le modifiant.
1. Accédez à l'onglet **Pages**.
1. **Dans le menu **Pages** de gauche, choisissez le menu représentant des points de suspension à côté du nom de la page que vous souhaitez dupliquer, puis sélectionnez Dupliquer.** La page dupliquée est ajoutée directement après la page d'origine.
# Affichage et modification des propriétés de page
Utilisez la procédure suivante pour modifier une page dans une application dans App Studio. Vous pouvez modifier des propriétés telles que le nom de la page, ses paramètres et sa mise en page.
**Pour afficher ou modifier les propriétés d'une page**
1. Si nécessaire, accédez à l'environnement de développement de votre application en le modifiant.
1. Accédez à l'onglet **Pages**.
1. Dans le menu **Pages** de gauche, choisissez le menu représentant des points de suspension à côté du nom de la page que vous souhaitez modifier, puis choisissez Propriétés de **la page**. Cela ouvre le menu **Propriétés** sur le côté droit.
1. Pour modifier le nom de page :
**Note**
****Caractères de nom de page valides : **A-Z**, **a-z**, **0-9, \$1**, \$1****
1. Cliquez sur l'icône en forme de crayon à côté du nom en haut du menu **Propriétés**.
1. Entrez le nouveau nom de votre page et appuyez sur Entrée.
1. Pour créer, modifier ou supprimer des paramètres de page :
1. Pour créer un paramètre de page, choisissez **\$1 Ajouter nouveau** dans la section **Paramètres de page**.
1. Pour modifier la valeur **clé** ou **description** d'un paramètre de page, choisissez le champ de saisie de la propriété que vous souhaitez modifier et entrez une nouvelle valeur. Vos modifications sont enregistrées au fur et à mesure que vous les modifiez.
1. Pour supprimer un paramètre de page, cliquez sur l'icône de corbeille du paramètre de page que vous souhaitez supprimer.
1. Pour ajouter, modifier ou supprimer le logo ou la bannière d'une page :
1. Pour ajouter un logo ou une bannière de page, activez l'option correspondante dans la section **Style**. Configurez la source de l'image et fournissez éventuellement un texte alternatif.
1. Pour modifier le logo ou la bannière d'une page, mettez à jour les champs de la section **Style**.
1. Pour supprimer le logo ou la bannière d'une page, désactivez l'option correspondante dans la section **Style**.
1. Pour modifier la mise en page d'une page :
1. Mettez à jour les champs de la section **Mise en page**.
# Supprimer une page
Suivez la procédure ci-dessous pour supprimer une page d'une application dans App Studio.
**Pour supprimer une page**
1. Si nécessaire, accédez à l'environnement de développement de votre application en le modifiant.
1. Accédez à l'onglet **Pages**.
1. **Dans le menu **Pages** de gauche, choisissez le menu représentant des points de suspension à côté du nom de la page que vous souhaitez supprimer, puis sélectionnez Supprimer.**
# Gestion des composants
Utilisez les procédures suivantes pour ajouter, modifier et supprimer des composants dans ou depuis les pages du studio d'application App Studio afin de créer l'interface utilisateur souhaitée pour votre application.
# Ajouter des composants à une page
Utilisez la procédure suivante pour ajouter un composant à une page dans App Studio. Pour plus d'informations sur la duplication d'un composant existant, consultez. [Duplication de composants](duplicating-components.md)
1. Si nécessaire, accédez à l'environnement de développement de votre application en le modifiant.
1. Accédez à l'onglet **Pages**.
1. Le panneau des composants se trouve dans le menu de droite, qui contient les composants disponibles.
1. Glissez et déposez le composant souhaité du panneau sur le canevas. Vous pouvez également double-cliquer sur le composant dans le panneau pour l'ajouter automatiquement au centre de la page en cours.
1. Maintenant que vous avez ajouté un composant, utilisez le panneau **Propriétés** de droite pour ajuster ses paramètres, tels que la source de données, la mise en page et le comportement. Pour obtenir des informations détaillées sur la configuration de chaque type de composant, consultez[Référence des composants](components-reference.md).
# Duplication de composants
Pour dupliquer un composant dans une application App Studio, procédez comme suit. Les composants dupliqués contiennent toutes les automatisations ou entités liées au composant d'origine.
1. Si nécessaire, accédez à l'environnement de développement de votre application en le modifiant.
1. Accédez à l'onglet **Pages**.
1. Il existe deux méthodes pour dupliquer un composant :
+ Dans le menu **Pages** de gauche, développez la page contenant le composant que vous souhaitez dupliquer. Choisissez le menu représentant des points de suspension à côté du nom du composant que vous souhaitez dupliquer, puis sélectionnez **Dupliquer**.
+ Choisissez le composant que vous souhaitez dupliquer, puis cliquez sur l'icône de duplication.
Le composant dupliqué est ajouté directement après le composant d'origine.
**Astuce**
Vous pouvez annuler la duplication d'un composant, ainsi que de nombreuses autres actions dans l'environnement de développement, à l'aide des raccourcis clavier CTRL\$1Z ou CMD\$1Z.
# Affichage et modification des propriétés des composants
1. Si nécessaire, accédez à l'environnement de développement de votre application en le modifiant.
1. Accédez à l'onglet **Pages**.
1. Dans le menu **Pages** de gauche, développez la page contenant le composant et choisissez le composant à afficher ou à modifier. Vous pouvez également choisir la page, puis le composant dans le canevas.
1. Le panneau **Propriétés** de droite affiche les paramètres configurables pour le composant sélectionné.
1. Explorez les différentes propriétés et options disponibles, et mettez-les à jour si nécessaire pour configurer l'apparence et le comportement du composant. Par exemple, vous souhaiterez peut-être modifier la source de données, configurer la mise en page ou activer des fonctionnalités supplémentaires.
Pour obtenir des informations détaillées sur la configuration de chaque type de composant, consultez[Référence des composants](components-reference.md).
# Supprimer des composants
1. Si nécessaire, accédez à l'environnement de développement de votre application en le modifiant.
1. Accédez à l'onglet **Pages**.
1. Dans le menu **Pages** de gauche, choisissez le composant à supprimer pour le sélectionner.
1. Dans le menu **Propriétés** de droite, choisissez l'icône de la corbeille.
1. Dans la boîte de dialogue de confirmation, choisissez **Delete** (Supprimer).
# Configuration de la visibilité des pages basée sur les rôles
Vous pouvez créer des rôles dans une application App Studio et configurer la visibilité des pages en fonction de ces rôles. Par exemple, vous pouvez créer des rôles en fonction des besoins des utilisateurs ou des niveaux d'accès, tels qu'administrateur, responsable ou utilisateur, pour les applications qui fournissent des fonctionnalités telles que l'approbation de projets ou le traitement des demandes et rendent certaines pages visibles pour des rôles spécifiques. Dans cet exemple, les administrateurs peuvent avoir un accès complet, les responsables peuvent avoir accès aux tableaux de bord des rapports et les utilisateurs peuvent avoir accès aux pages de tâches contenant des formulaires de saisie.
Utilisez la procédure suivante pour configurer la visibilité des pages basée sur les rôles dans votre application App Studio.
1. Si nécessaire, accédez au studio d'application de votre application. Dans le menu de navigation de gauche, choisissez **Mes applications**, recherchez votre application et choisissez **Modifier**.
1. Créez des rôles au niveau de l'application dans le studio d'applications.
1. Choisissez l'onglet **Paramètres de l'application** en haut du studio d'applications.
1. Choisissez **\$1 Ajouter un rôle**
1. Dans **Nom du rôle**, saisissez un nom pour identifier votre rôle. Nous vous recommandons d'utiliser un nom décrivant le niveau d'accès ou les tâches du groupe, car vous utiliserez ce nom pour configurer la visibilité de la page.
1. Dans **Description**, ajoutez éventuellement une description du rôle dans Description.
1. Répétez ces étapes pour créer autant de rôles que nécessaire.
1. Configurez la visibilité de vos pages
1. Choisissez l'onglet **Pages** en haut du studio d'application.
1. Dans le menu **Pages** de gauche, choisissez la page pour laquelle vous souhaitez configurer la visibilité basée sur les rôles.
1. Dans le menu de droite, choisissez l'onglet **Propriétés**.
1. Dans **Visibilité**, désactivez l'option **Ouvrir à tous les utilisateurs finaux**.
1. Gardez **le rôle** sélectionné pour choisir parmi la liste des rôles que vous avez créés à l'étape précédente. Choisissez **Personnalisé** pour écrire une JavaScript expression pour des configurations de visibilité plus complexes.
1. Lorsque **le rôle** est sélectionné, cochez les cases des rôles d'application pour lesquels la page sera visible.
1. Lorsque **Personnalisé** est sélectionné, entrez une JavaScript expression qui prend la valeur vraie ou fausse. Utilisez l'exemple suivant pour vérifier si l'utilisateur actuel a le rôle de *responsable* :`{{currentUser.roles.includes('manager')}}`.
1. Maintenant que votre visibilité est configurée, vous pouvez tester la visibilité de la page en prévisualisant votre application.
1. Choisissez **Aperçu** pour ouvrir un aperçu de votre application.
1. En haut à droite de l'aperçu, choisissez le menu Aperçu **sous forme de prévisualisation** et cochez les cases correspondant aux rôles que vous souhaitez tester. Les pages visibles doivent refléter les rôles sélectionnés.
1. À présent, attribuez des groupes aux rôles d'application pour une application publiée. Les attributions de groupes et de rôles doivent être configurées séparément pour chaque environnement. Pour plus d'informations sur les environnements d'applications, consultez[Environnements d'applications](applications-publish.md#application-environments).
**Note**
Votre application doit être publiée dans les environnements de test ou de production pour attribuer des groupes App Studio aux rôles que vous avez créés et configurés. Si nécessaire, publiez votre application pour attribuer des groupes aux rôles. Pour plus d'informations sur la publication, consultez [Applications de publication](applications-publish.md).
1. Dans le coin supérieur droit du studio d'application, choisissez **Partager**.
1. Choisissez l'onglet correspondant à l'environnement dans lequel vous souhaitez configurer la visibilité de la page.
1. Choisissez la zone de saisie **Rechercher des groupes** et choisissez le groupe avec lequel vous souhaitez partager la version de l'application. Vous pouvez saisir du texte pour rechercher des groupes.
1. Dans le menu déroulant, choisissez les rôles à attribuer au groupe. Vous pouvez choisir **Aucun rôle** pour partager la version de l'application et ne pas attribuer de rôle au groupe. Seules les pages visibles par tous les utilisateurs seront visibles par les groupes n'ayant aucun rôle.
1. Choisissez **Partager**. Répétez ces étapes pour ajouter autant de groupes que nécessaire.
# Classer et organiser les pages dans la navigation de l'application
Cette rubrique contient des informations sur la réorganisation et l'organisation des pages dans les applications App Studio. Les pages de l'application sont visibles dans deux zones du produit : dans le menu **Pages** de gauche lorsque vous modifiez l'application dans le studio d'application, et dans la navigation de gauche d'un aperçu de l'application publiée.
## Ordre des pages dans le menu **Pages** de gauche lors de la modification d'une application
Lorsque vous modifiez une application dans le studio d'application, les pages sont classées par date de création dans le menu **Pages** de gauche. Vous ne pouvez pas réorganiser les pages de ce menu.
## Classer, afficher ou masquer des pages dans la navigation d'une application publiée ou en version préliminaire
Vous pouvez modifier les paramètres suivants de la navigation de gauche d'un aperçu ou d'une application publiée :
+ La visibilité de l'ensemble de la navigation
+ La visibilité de pages spécifiques dans la navigation
+ L'ordre des pages dans la navigation
**Pour modifier la navigation de gauche d'un aperçu ou d'une application publiée**
1. Si nécessaire, accédez au studio d'application de votre application pour la modifier.
1. Dans le menu **Pages** de gauche, sélectionnez **En-tête et navigation**.
1. Dans le menu **En-tête et navigation situé** sur le côté droit, affichez ou modifiez les éléments suivants :
1. Pour masquer ou afficher la navigation dans l'application, utilisez le bouton de **navigation de l'application**.
1. Pour masquer des pages dans la navigation de l'application, faites-les glisser vers la section **Pages non liées**. ****
1. Pour réorganiser les pages dans la navigation de l'application, faites-les glisser dans l'ordre souhaité dans la section **Pages liées**.
# Changez les couleurs de votre application à l'aide de thèmes d'applications
Suivez la procédure ci-dessous pour mettre à jour les couleurs de votre application en configurant un thème d'application.
1. Si nécessaire, accédez au studio d'application de votre application pour la modifier.
1. Dans le studio d'application, accédez à l'onglet **Pages**.
1. Dans le menu de navigation de gauche, choisissez le **thème de l'application** pour ouvrir les paramètres du thème de l'application de droite.
1. Dans le **thème de base**, choisissez **le mode clair** ou **le mode sombre**.
1. Pour ajouter des couleurs personnalisées à votre application, activez le bouton **Personnaliser** et mettez à jour les paramètres suivants :
1. Dans **Couleur principale**, choisissez la couleur à appliquer à certains composants et à la navigation de votre application. Vous pouvez choisir une couleur à l'aide du sélecteur de couleurs, du code RGB, HSL ou HEX.
**Note**
App Studio s'assurera automatiquement que vos couleurs sont accessibles. Par exemple, si vous choisissez une couleur de lumière en mode lumière, elle sera mise à jour pour être plus accessible.
1. Dans **Couleur de l'en-tête**, choisissez la couleur à appliquer à l'en-tête de votre application. Vous pouvez choisir une couleur à l'aide du sélecteur de couleurs, du code RGB, HSL ou HEX.
1. Choisissez **les thèmes par défaut** à afficher et choisissez parmi les thèmes prédéfinis, ou choisissez **Randomize** pour générer une couleur principale et une couleur d'en-tête aléatoires.
1. Choisissez **Enregistrer les modifications** pour mettre à jour le thème de votre application.
# Référence des composants
Cette rubrique détaille chacun des composants d'App Studio, leurs propriétés et inclut des exemples de configuration.
## Propriétés communes des composants
Cette section décrit les propriétés et fonctionnalités générales partagées entre plusieurs composants du studio d'application. Les détails de mise en œuvre et les cas d'utilisation spécifiques pour chaque type de propriété peuvent varier en fonction du composant, mais le concept général de ces propriétés reste le même dans App Studio.
### Nom
Un nom par défaut est généré pour chaque composant ; toutefois, vous pouvez le modifier pour attribuer un nom unique à chaque composant. Vous utiliserez ce nom pour faire référence au composant et à ses données provenant d'autres composants ou expressions au sein de la même page. Limitation : n'incluez pas d'espaces dans le nom du composant ; il ne peut contenir que des lettres, des chiffres, des traits de soulignement et des signes de dollar. Exemples : `userNameInput`, `ordersTable`, `metricCard1`.
### Valeur principale, valeur secondaire et valeur
De nombreux composants du studio d'application fournissent des champs permettant de spécifier des valeurs ou des expressions qui déterminent le contenu ou les données affichées dans le composant. Ces champs sont souvent étiquetés comme `Primary value``Secondary value`, ou simplement`Value`, en fonction du type et de l'objectif du composant.
Le `Primary value` champ est généralement utilisé pour définir la valeur principale, le point de données ou le contenu qui doit être affiché bien en évidence dans le composant.
Le `Secondary value` champ, lorsqu'il est disponible, est utilisé pour afficher une valeur ou des informations supplémentaires ou complémentaires à côté de la valeur principale.
Le `Value` champ permet de spécifier la valeur ou l'expression qui doit être affichée dans le composant.
Ces champs prennent en charge à la fois la saisie de texte statique et les expressions dynamiques. À l'aide d'expressions, vous pouvez référencer des données provenant d'autres composants, sources de données ou variables au sein de votre application, ce qui permet un affichage de contenu dynamique et piloté par les données.
#### Syntaxe des expressions
La syntaxe de saisie d'expressions dans ces champs suit un modèle cohérent :
```
{{expression}}
```
Où se *expression* trouve une expression valide qui correspond à la valeur ou aux données souhaitées que vous souhaitez afficher.
##### Exemple : texte statique
+ Valeur principale : vous pouvez saisir directement un nombre ou une valeur statique, tel que `"123"` ou`"$1,999.99"`.
+ Valeur secondaire : vous pouvez saisir une étiquette de texte statique, telle que `"Goal"` ou`"Projected Revenue"`.
+ Valeur : vous pouvez saisir une chaîne statique, telle que `"since last month"` ou`"Total Quantity"`.
##### Exemples : Expressions
+ `Hello, {{currentUser.firstName}}`: affiche un message d'accueil avec le prénom de l'utilisateur actuellement connecté.
+ `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`: affiche de manière conditionnelle un titre de tableau de bord différent en fonction du rôle de l'utilisateur.
+ `{{ui.componentName.data?.[0]?.fieldName}}`: Récupère la valeur du `fieldName` champ à partir du premier élément des données du composant portant l'ID`componentName`.
+ `{{ui.componentName.value * 100}}`: effectue un calcul sur la valeur du composant portant l'ID`componentName`.
+ `{{ui.componentName.value + ' items'}}`: concatène la valeur du composant avec l'ID `componentName` et la chaîne. `' items'`
+ `{{ui.ordersTable.data?.[0]?.orderNumber}}`: récupère le numéro de commande à partir de la première ligne de données du `ordersTable` composant.
+ `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`: Calcule le chiffre d'affaires prévu en augmentant de 15 % le chiffre d'affaires total issu de la première ligne de données du `salesMetrics` composant.
+ `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`: concatène le prénom et le nom de famille à partir des données du composant. `customerProfile`
+ `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`: Formate la date de commande du `orderDetails` composant en une chaîne de date plus lisible.
+ `{{ui.productList.data?.length}}`: affiche le nombre total de produits inclus dans les données connectées au `productList` composant.
+ `{{ui.discountPercentage.value * ui.orderTotal.value}}`: Calcule le montant de la réduction en fonction du pourcentage de réduction et du total de la commande.
+ `{{ui.cartItemCount.value + ' items in cart'}}`: affiche le nombre d'articles dans le panier, ainsi que l'étiquette`items in cart`.
En utilisant ces champs d'expression, vous pouvez créer du contenu dynamique et piloté par les données au sein de votre application, ce qui vous permet d'afficher des informations adaptées au contexte de l'utilisateur ou à l'état de votre application. Cela permet des expériences utilisateur plus personnalisées et interactives.
### Étiquette
La propriété **Label** vous permet de définir une légende ou un titre pour le composant. Cette étiquette est généralement affichée à côté ou au-dessus du composant, afin d'aider les utilisateurs à comprendre son objectif.
Vous pouvez utiliser à la fois du texte statique et des expressions pour définir l'étiquette.
#### Exemple : texte statique
Si vous entrez le texte « Prénom » dans le champ Étiquette, le composant affichera « Prénom » comme étiquette.
#### Exemple : Expressions
##### Exemple : magasin de détail
L'exemple suivant personnalise l'étiquette pour chaque utilisateur, donnant ainsi à l'interface un aspect plus adapté à chaque utilisateur :
```
{{currentUser.firstName}} {{currentUser.lastName}}'s Account
```
##### Exemple : gestion de projet SaaS
L'exemple suivant extrait les données du projet sélectionné pour fournir des étiquettes spécifiques au contexte, afin d'aider les utilisateurs à rester orientés dans l'application :
```
Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
```
##### Exemple : Clinique de santé
L'exemple suivant fait référence au profil de l'utilisateur actuel et aux informations du médecin, offrant ainsi une expérience plus personnalisée aux patients.
```
Dr. {{ui.doctorProfileTable.data.firstName}}
{{ui.doctorProfileTable.data.lastName}}
```
### Placeholder
La propriété Placeholder vous permet de spécifier le texte d'indication ou d'orientation qui s'affiche dans le composant lorsqu'il est vide. Cela peut aider les utilisateurs à comprendre le format de saisie attendu ou fournir un contexte supplémentaire.
Vous pouvez utiliser à la fois du texte statique et des expressions pour définir l'espace réservé.
#### Exemple : texte statique
Si vous entrez le texte `Enter your name` dans le champ **Espace réservé**, le composant s'affiche `Enter your name` sous forme de texte réservé.
#### Exemple : Expressions
##### Exemple : Services financiers
`Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account`Ces exemples extraient les données du compte sélectionné pour afficher des instructions pertinentes, rendant ainsi l'interface intuitive pour les clients du secteur bancaire.
##### Exemple : commerce électronique
`Enter the coupon code for {{ui.cartTable.data.currency}} total`L'espace réservé ici est mis à jour de manière dynamique en fonction du contenu du panier de l'utilisateur, offrant ainsi une expérience de paiement fluide.
##### Exemple : Clinique de santé
`Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms`En utilisant une expression faisant référence à l'âge du patient, l'application peut créer un espace réservé plus personnalisé et plus utile.
### Source
La propriété **Source** vous permet de sélectionner la source de données d'un composant. Lors de la sélection, vous pouvez choisir parmi les types de sources de données suivants :`entity`,`expression`, ou`automation`.
#### Entité
La sélection d'**une entité** comme source de données vous permet de connecter le composant à une entité de données ou à un modèle existant dans votre application. Cela est utile lorsque vous disposez d'une structure de données ou d'un schéma bien défini que vous souhaitez exploiter dans l'ensemble de votre application.
Quand utiliser la source de données de l'entité :
+ Lorsque vous disposez d'un modèle de données ou d'une entité contenant les informations que vous souhaitez afficher dans le composant (par exemple, une entité « Produits » avec des champs tels que « Nom », « Description », « Prix »).
+ Lorsque vous devez extraire dynamiquement des données d'une base de données, d'une API ou d'une autre source de données externe et les présenter dans le composant.
+ Lorsque vous souhaitez tirer parti des relations et des associations définies dans le modèle de données de votre application.
##### Sélection d'une requête sur une entité
Parfois, vous souhaiterez peut-être connecter un composant à une requête spécifique qui extrait les données d'une entité, plutôt que de l'entité entière. Dans la source de données Entity, vous avez la possibilité de choisir parmi les requêtes existantes ou d'en créer une nouvelle.
En sélectionnant une requête, vous pouvez :
+ Filtrez les données affichées dans le composant en fonction de critères spécifiques.
+ Passez des paramètres à la requête pour filtrer ou trier les données de manière dynamique.
+ Tirez parti des jointures complexes, des agrégations ou d'autres techniques de manipulation de données définies dans la requête.
Par exemple, si votre application contient une `Customers` entité avec des champs tels que `Name``Email`, et`PhoneNumber`. Vous pouvez connecter un composant de table à cette entité et choisir une action de `ActiveCustomers` données prédéfinie qui filtre les clients en fonction de leur statut. Cela vous permet d'afficher uniquement les clients actifs dans le tableau, plutôt que l'intégralité de la base de données clients.
##### Ajouter des paramètres à une source de données d'entité
Lorsque vous utilisez une entité comme source de données, vous pouvez également ajouter des paramètres au composant. Ces paramètres peuvent être utilisés pour filtrer, trier ou transformer les données affichées dans le composant.
Par exemple, si vous avez une `Products` entité avec des champs tels que `Name``Description`,`Price`, et`Category`. Vous pouvez ajouter un paramètre nommé `category` à un composant de table qui affiche la liste des produits. Lorsque les utilisateurs sélectionnent une catégorie dans une liste déroulante, le tableau est automatiquement mis à jour pour afficher uniquement les produits appartenant à la catégorie sélectionnée, en utilisant l'`{{params.category}}`expression dans l'action de données.
#### Expression
Sélectionnez **Expression** comme source de données pour saisir des expressions ou des calculs personnalisés afin de générer les données du composant de manière dynamique. Cela est utile lorsque vous devez effectuer des transformations, combiner des données provenant de plusieurs sources ou générer des données basées sur une logique métier spécifique.
Quand utiliser la source de données **Expression** :
+ Lorsque vous devez calculer ou dériver des données qui ne sont pas directement disponibles dans votre modèle de données (par exemple, le calcul de la valeur totale de la commande en fonction de la quantité et du prix).
+ Lorsque vous souhaitez combiner des données provenant de plusieurs entités ou sources de données pour créer une vue composite (par exemple, afficher l'historique des commandes d'un client ainsi que ses coordonnées).
+ Lorsque vous devez générer des données en fonction de règles ou de conditions spécifiques (par exemple, afficher une liste de « produits recommandés » basée sur l'historique de navigation de l'utilisateur).
Par exemple, si un *Metrics* composant doit afficher le chiffre d'affaires total du mois en cours, vous pouvez utiliser une expression telle que la suivante pour calculer et afficher le chiffre d'affaires mensuel :
```
{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}
```
##### Automatisation
Sélectionnez **Automation** comme source de données pour connecter le composant à une automatisation ou à un flux de travail existant dans votre application. Cela est utile lorsque les données ou les fonctionnalités du composant sont générées ou mises à jour dans le cadre d'un processus ou d'un flux de travail spécifique.
Quand utiliser la source de données **Automation** :
+ Lorsque les données affichées dans le composant sont le résultat d'une automatisation ou d'un flux de travail spécifique (par exemple, un tableau « Approbations en attente » mis à jour dans le cadre d'un processus d'approbation).
+ Lorsque vous souhaitez déclencher des actions ou des mises à jour du composant en fonction d'événements ou de conditions dans le cadre d'une automatisation (par exemple, mettre à jour une métrique avec les derniers chiffres de vente d'un SKU).
+ Lorsque vous devez intégrer le composant à d'autres services ou systèmes de votre application par le biais d'une automatisation (par exemple, en récupérant des données depuis une API tierce et en les affichant dans un tableau).
Par exemple, si vous disposez d'un composant Stepflow qui guide les utilisateurs tout au long du processus de candidature. Le composant Stepflow peut être connecté à une automatisation qui gère la soumission des candidatures, les vérifications des antécédents et la génération d'offres. Au fur et à mesure que l'automatisation progresse au cours de ces étapes, le composant Stepflow peut être mis à jour de manière dynamique pour refléter l'état actuel de l'application.
En sélectionnant avec soin la source de données appropriée pour chaque composant, vous pouvez vous assurer que l'interface utilisateur de votre application est alimentée par les données et la logique appropriées, offrant ainsi une expérience fluide et engageante à vos utilisateurs.
### Visible si
Utilisez la propriété **Visible if** pour afficher ou masquer des composants ou des éléments en fonction de conditions ou de valeurs de données spécifiques. Cela est utile lorsque vous souhaitez contrôler dynamiquement la visibilité de certaines parties de l'interface utilisateur de votre application.
La propriété **Visible if** utilise la syntaxe suivante :
```
{{expression ? true : false}}
```
or
```
{{expression}}
```
Où se *expression* trouve une expression booléenne dont la valeur est égale à ou. `true` `false`
Si l'expression est évaluée à`true`, le composant sera visible. Si l'expression est évaluée à`false`, le composant sera masqué. L'expression peut faire référence à des valeurs provenant d'autres composants, sources de données ou variables au sein de votre application.
#### Exemples d'expressions visibles
##### Exemple : affichage ou masquage d'un champ de saisie de mot de passe en fonction d'une saisie par e-mail
Imaginez que vous avez un formulaire de connexion avec un champ de saisie d'e-mail et un champ de saisie de mot de passe. Vous souhaitez afficher le champ de saisie du mot de passe uniquement si l'utilisateur a saisi une adresse e-mail. Vous pouvez utiliser l'expression Visible if suivante :
```
{{ui.emailInput.value !== ""}}
```
Cette expression vérifie si la valeur du `emailInput` composant n'est pas une chaîne vide. Si l'utilisateur a saisi une adresse e-mail, l'expression est évaluée à `true` et le champ de saisie du mot de passe sera visible. Si le champ e-mail est vide, l'expression est évaluée à `false` et le champ de saisie du mot de passe sera masqué.
##### Exemple : affichage de champs de formulaire supplémentaires sur la base d'une sélection déroulante
Supposons que vous ayez un formulaire dans lequel les utilisateurs peuvent sélectionner une catégorie dans une liste déroulante. Selon la catégorie sélectionnée, vous souhaitez afficher ou masquer des champs de formulaire supplémentaires afin de recueillir des informations plus spécifiques.
Par exemple, si l'utilisateur sélectionne la *Products* catégorie, vous pouvez utiliser l'expression suivante pour afficher un *Product Details* champ supplémentaire :
```
{{ui.categoryDropdown.value === "Products"}}
```
Si l'utilisateur sélectionne les *Consulting* catégories *Services* ou, vous pouvez utiliser cette expression pour afficher un ensemble différent de champs supplémentaires :
```
{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
```
##### Exemples : Autres
Pour rendre le composant visible si sa valeur n'est pas une chaîne vide : `textInput1`
```
{{ui.textInput1.value === "" ? false : true}}
```
Pour que le composant soit toujours visible :
```
{{true}}
```
Pour rendre le composant visible si sa valeur n'est pas une chaîne vide : `emailInput`
```
{{ui.emailInput.value !== ""}}
```
### Désactivé si
La fonctionnalité **Désactivé si** vous permet d'activer ou de désactiver un composant de manière conditionnelle en fonction de conditions ou de valeurs de données spécifiques. Pour ce faire, utilisez la propriété **Disabled if**, qui accepte une expression booléenne qui détermine si le composant doit être activé ou désactivé.
La propriété **Disabled if** utilise la syntaxe suivante :
```
{{expression ? true : false}}
```
or
```
{{expression}}
```
#### Désactivé si des exemples d'expressions
##### Exemple : désactivation d'un bouton d'envoi en fonction de la validation du formulaire
Si votre formulaire comporte plusieurs champs de saisie et que vous souhaitez désactiver le bouton d'envoi jusqu'à ce que tous les champs obligatoires soient correctement remplis, vous pouvez utiliser l'expression **Disabled If** suivante :
```
{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}
```
Cette expression vérifie si l'un des champs de saisie obligatoires (`nameInput`,`emailInput`,`passwordInput`) est vide. Si l'un des champs est vide, l'expression est évaluée à `true` et le bouton d'envoi sera désactivé. Une fois que tous les champs obligatoires sont remplis, l'expression est évaluée à `false` et le bouton d'envoi est activé.
En utilisant ces types d'expressions conditionnelles dans les propriétés **Visible if** et **Disabled ff**, vous pouvez créer des interfaces utilisateur dynamiques et réactives qui s'adaptent aux entrées des utilisateurs, offrant ainsi une expérience plus rationalisée et plus pertinente aux utilisateurs de votre application.
Où se *expression* trouve une expression booléenne dont la valeur est vraie ou fausse.
Exemple :
```
{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.
```
#### Dispositions des conteneurs
Les propriétés de mise en page déterminent la manière dont le contenu ou les éléments d'un composant sont organisés et positionnés. Plusieurs options de mise en page sont disponibles, chacune étant représentée par une icône :
+ **Disposition des colonnes** : Cette disposition organise le contenu ou les éléments verticalement, dans une seule colonne.
+ **Disposition en deux colonnes** : cette disposition divise le composant en deux colonnes de largeur égale, ce qui vous permet de positionner le contenu ou les éléments côte à côte.
+ **Disposition des lignes** : cette disposition organise le contenu ou les éléments horizontalement, sur une seule ligne.
##### Orientation
+ **Horizontal** : cette mise en page organise le contenu ou les éléments horizontalement, sur une seule ligne.
+ **Vertical** : cette mise en page organise le contenu ou les éléments verticalement, dans une seule colonne.
+ **Enveloppé en ligne** : cette mise en page organise le contenu ou les éléments horizontalement, mais passe à la ligne suivante si les éléments dépassent la largeur disponible.
##### Alignment
+ **Gauche** : Aligne le contenu ou les éléments sur le côté gauche du composant.
+ **Centre : centre** le contenu ou les éléments horizontalement dans le composant.
+ **Droite** : aligne le contenu ou les éléments sur le côté droit du composant.
##### Width
La propriété **Width** indique la taille horizontale du composant. Vous pouvez entrer une valeur de pourcentage comprise entre 0 % et 100 %, représentant la largeur du composant par rapport à son conteneur parent ou à l'espace disponible.
##### Height
La propriété **Height** indique la taille verticale du composant. La valeur « auto » ajuste automatiquement la hauteur du composant en fonction de son contenu ou de l'espace disponible.
##### Espace entre
La propriété **Space between** détermine l'espacement ou l'écart entre le contenu ou les éléments du composant. Vous pouvez sélectionner une valeur comprise entre 0 pixels (sans espacement) et 64 pixels, avec des incréments de 4 pixels (par exemple, 4 pixels, 8 pixels, 12 pixels, etc.).
##### Remplissage
La propriété **Padding** contrôle l'espace entre le contenu ou les éléments et les bords du composant. Vous pouvez sélectionner une valeur comprise entre 0 pixels (sans rembourrage) et 64 pixels, avec des incréments de 4 pixels (par exemple, 4 pixels, 8 pixels, 12 pixels, etc.).
##### Contexte
L'**arrière-plan** active ou désactive une couleur ou un style d'arrière-plan pour le composant.
Ces propriétés de mise en page offrent une certaine flexibilité dans l'organisation et le positionnement du contenu au sein d'un composant, ainsi que dans le contrôle de la taille, de l'espacement et de l'apparence visuelle du composant lui-même.
## Composants de données
Cette section couvre les différents composants de données disponibles dans le studio d'application, notamment les composants **Table**, **Detail**, **Metric**, **Form** et **Repeater**. Ces composants sont utilisés pour afficher, collecter et manipuler des données au sein de votre application.
### Table
Le composant **Table** affiche les données sous forme de tableau, avec des lignes et des colonnes. Il est utilisé pour présenter des données structurées, telles que des listes d'éléments ou des enregistrements d'une base de données, de manière organisée et de easy-to-read manière.
#### Propriétés de tableau
Le composant **Table** partage plusieurs propriétés communes avec d'autres composants, tels que `Name``Source`, et`Actions`. Pour plus d'informations sur ces propriétés, consultez[Propriétés communes des composants](#common-properties).
Outre les propriétés communes, le composant **Table** possède des propriétés et des options de configuration spécifiques`Columns`, notamment`Search and export`, et`Expressions`.
##### Columns
Dans cette section, vous pouvez définir les colonnes à afficher dans le tableau. Chaque colonne peut être configurée avec les propriétés suivantes :
+ **Format** : type de données du champ, par exemple : texte, nombre, date.
+ **Libellé de colonne** : texte d'en-tête de la colonne.
+ **Valeur** : champ de la source de données qui doit être affiché dans cette colonne.
Ce champ permet de spécifier la valeur ou l'expression qui doit être affichée dans les cellules de la colonne. Vous pouvez utiliser des expressions pour référencer des données provenant de la source connectée ou d'autres composants.
Exemple : `{{currentRow.title}}` - Cette expression affichera la valeur du *title* champ de la ligne actuelle dans les cellules de la colonne.
+ **Activer le tri** : cette option vous permet d'activer ou de désactiver la fonctionnalité de tri pour une colonne spécifique. Lorsque cette option est activée, les utilisateurs peuvent trier les données du tableau en fonction des valeurs de cette colonne.
##### Rechercher et exporter
Le composant **Table** propose les options suivantes pour activer ou désactiver les fonctionnalités de recherche et d'exportation :
+ **Afficher la recherche** Lorsque cette option est activée, cette option ajoute un champ de recherche au tableau, permettant aux utilisateurs de rechercher et de filtrer les données affichées.
+ **Afficher l'exportation** Lorsque cette option est activée, cette option ajoute une option d'exportation au tableau, permettant aux utilisateurs de télécharger les données du tableau dans différents formats, par exemple : CSV.
**Note**
Par défaut, la fonctionnalité de recherche est limitée aux données chargées dans le tableau. Pour utiliser la recherche de manière exhaustive, vous devez charger toutes les pages de données.
##### Lignes par page
Vous pouvez spécifier le nombre de lignes à afficher par page dans le tableau. Les utilisateurs peuvent ensuite naviguer entre les pages pour afficher l'ensemble de données complet.
##### Limite de pré-extraction
Spécifiez le nombre maximum d'enregistrements à préextraire dans chaque demande de requête. Le maximum est de 3 000.
##### Actions
Dans la section **Actions**, configurez les propriétés suivantes :
+ **Emplacement de l'action** : lorsque l'option **Épingler vers la droite** est activée, toutes les actions ajoutées s'affichent toujours à droite du tableau, que l'utilisateur fasse défiler la page ou non.
+ **Actions** : ajoutez des boutons d'action au tableau. Vous pouvez configurer ces boutons pour effectuer des actions spécifiques lorsqu'un utilisateur clique dessus, par exemple :
+ Exécuter une action sur un composant
+ Accédez à une autre page
+ Invoquer une action sur les données
+ Exécuter de manière personnalisée JavaScript
+ Invoquer une automatisation
##### Expressions
Le composant **Table** fournit plusieurs zones dans lesquelles utiliser des expressions et des fonctionnalités d'action au niveau des lignes qui vous permettent de personnaliser et d'améliorer les fonctionnalités et l'interactivité du tableau. Ils vous permettent de référencer et d'afficher les données de manière dynamique dans le tableau. En exploitant ces champs d'expression, vous pouvez créer des colonnes dynamiques, transmettre des données à des actions au niveau des lignes et référencer des données de table provenant d'autres composants ou expressions de votre application.
##### Exemples : Référencement de valeurs de ligne
`{{currentRow.columnName}}`ou `{{currentRow["Column Name"]}}` Ces expressions vous permettent de référencer la valeur d'une colonne spécifique pour la ligne en cours de rendu. Remplacez *columnName* ou *Column Name* par le nom réel de la colonne à laquelle vous souhaitez faire référence.
Exemples :
+ `{{currentRow.productName}}`Affiche le nom du produit pour la ligne en cours.
+ `{{currentRow["Supplier Name"]}}`Affiche le nom du fournisseur pour la ligne en cours, où se trouve l'en-tête de colonne*Supplier Name*.
+ `{{currentRow.orderDate}}`Affiche la date de commande pour la ligne en cours.
##### Exemples : Référencement de la ligne sélectionnée
`{{ui.table1.selectedRow["columnName"]}}`Cette expression vous permet de référencer la valeur d'une colonne spécifique pour la ligne actuellement sélectionnée dans le tableau avec l'ID*table1*. *table1*Remplacez-le par l'ID réel de votre composant de table et *columnName* par le nom de la colonne à laquelle vous souhaitez faire référence.
Exemples :
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}`Affiche le montant total pour la ligne actuellement sélectionnée dans le tableau avec l'ID*ordersTable*.
+ `{{ui.customersTable.selectedRow["email"]}}`Affiche l'adresse e-mail de la ligne actuellement sélectionnée dans le tableau avec l'ID*customersTable*.
+ `{{ui.employeesTable.selectedRow["department"]}}`Affiche le département correspondant à la ligne actuellement sélectionnée dans le tableau avec l'ID*employeesTable*.
##### Exemples : création de colonnes personnalisées
Vous pouvez ajouter des colonnes personnalisées à une table en fonction des données renvoyées par l'action, l'automatisation ou l'expression de données sous-jacente. Vous pouvez utiliser des valeurs et des JavaScript expressions de colonne existantes pour créer de nouvelles colonnes.
Exemples :
+ `{{currentRow.quantity * currentRow.unitPrice}}`Crée une nouvelle colonne affichant le prix total en multipliant les colonnes de quantité et de prix unitaire.
+ `{{new Date(currentRow.orderDate).toLocaleDateString()}}`Crée une nouvelle colonne affichant la date de commande dans un format plus lisible.
+ `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}`Crée une nouvelle colonne affichant le nom complet et l'adresse e-mail de chaque ligne.
##### Exemples : Personnalisation des valeurs d'affichage des colonnes :
Vous pouvez personnaliser la valeur d'affichage d'un champ dans une colonne de table en définissant le `Value` champ du mappage de colonnes. Cela vous permet d'appliquer un formatage ou des transformations personnalisés aux données affichées.
Exemples :
+ `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}`Affiche les émojis en forme d'étoile en fonction de la valeur d'évaluation de chaque ligne.
+ `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}`Affiche la valeur de la catégorie avec chaque mot en majuscule pour chaque ligne.
+ `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`: affiche un cercle coloré, un emoji et un texte en fonction de la valeur d'état de chaque ligne.
##### Actions des boutons au niveau des lignes
`{{currentRow.columnName}}`ou `{{currentRow["Column Name"]}}` vous pouvez utiliser ces expressions pour transmettre le contexte de la ligne référencée dans le cadre d'une action au niveau de la ligne, par exemple pour accéder à une autre page contenant les données de la ligne sélectionnée ou pour déclencher une automatisation avec les données de la ligne.
Exemples :
+ Si vous avez un bouton d'édition dans la colonne d'action des lignes, vous pouvez passer `{{currentRow.orderId}}` en paramètre pour accéder à une page d'édition de commande avec l'ID de commande sélectionné.
+ Si vous avez un bouton de suppression dans la colonne d'action de la ligne, vous pouvez passer `{{currentRow.customerName}}` à une automatisation qui envoie un e-mail de confirmation au client avant de supprimer sa commande.
+ Si vous avez un bouton Afficher les détails dans la colonne d'action des lignes, vous pouvez passer `{{currentRow.employeeId}}` à une automatisation qui enregistre l'employé qui a consulté les détails de la commande.
En tirant parti de ces champs d'expression et des fonctionnalités d'action au niveau des lignes, vous pouvez créer des tableaux hautement personnalisés et interactifs qui affichent et manipulent les données en fonction de vos besoins spécifiques. En outre, vous pouvez associer des actions au niveau des lignes à d'autres composants ou automatisations au sein de votre application, ce qui permet un flux de données et des fonctionnalités fluides.
### Détail
Le composant **Détail** est conçu pour afficher des informations détaillées sur un enregistrement ou un élément spécifique. Il fournit un espace dédié pour présenter des données complètes relatives à une seule entité ou ligne, ce qui le rend idéal pour présenter des détails approfondis ou faciliter les tâches de saisie et d'édition de données.
#### Propriétés détaillées
Le composant **Detail** partage plusieurs propriétés communes avec d'autres composants`Name`, tels que`Source`, et`Actions`. Pour plus d'informations sur ces propriétés, consultez[Propriétés communes des composants](#common-properties).
Le composant **Detail** possède également des propriétés et des options de configuration spécifiques`Fields`, notamment`Layout`, et`Expressions`.
#### Disposition
La section **Disposition** vous permet de personnaliser la disposition et la présentation des champs dans le composant **Détail**. Vous pouvez configurer des options telles que :
+ **Nombre de colonnes** : Spécifiez le nombre de colonnes dans lesquelles les champs doivent être affichés.
+ Ordre des **champs** : glissez-déposez les champs pour réorganiser leur apparence.
+ **Espacement et alignement** : ajustez l'espacement et l'alignement des champs au sein du composant.
#### Expressions et exemples
Le composant **Detail** fournit différents champs d'expression qui vous permettent de référencer et d'afficher les données du composant de manière dynamique. Ces expressions vous permettent de créer des composants **Detail** personnalisés et interactifs qui se connectent parfaitement aux données et à la logique de votre application.
##### Exemple : Référencement de données
`{{ui.details.data[0]?.["colName"]}}`: Cette expression vous permet de référencer la valeur de la colonne nommée « ColName » pour le premier élément (index 0) du tableau de données connecté au composant **Detail** avec l'ID « details ». Remplacez « ColName » par le nom réel de la colonne à laquelle vous souhaitez faire référence. Par exemple, l'expression suivante affiche la valeur de la colonne « CustomerName » pour le premier élément du tableau de données connecté au composant « details » :
```
{{ui.details.data[0]?.["customerName"]}}
```
**Note**
Cette expression est utile lorsque le composant **Détail** se trouve sur la même page que la table référencée et que vous souhaitez afficher les données de la première ligne du tableau dans le composant **Détail**.
##### Exemple : rendu conditionnel
`{{ui.table1.selectedRow["colName"]}}`: Cette expression renvoie la valeur true si la ligne sélectionnée dans le tableau avec l'ID *table1* contient des données pour la colonne nommée*colName*. Il peut être utilisé pour afficher ou masquer de manière conditionnelle le composant **Détail** selon que la ligne sélectionnée dans le tableau est vide ou non.
Exemple :
Vous pouvez utiliser cette expression dans la `Visible if` propriété du composant **Detail** pour l'afficher ou la masquer de manière conditionnelle en fonction de la ligne sélectionnée dans le tableau.
```
{{ui.table1.selectedRow["customerName"]}}
```
Si cette expression est vraie (la ligne sélectionnée dans le *table1* composant possède une valeur pour la *customerName* colonne), le composant **Détail** sera visible. Si l'expression a la valeur false (c'est-à-dire que la ligne sélectionnée est vide ou ne possède pas de valeur pour « CustomerName »), **le** composant Detail sera masqué.
##### Exemple : affichage conditionnel
`{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`: Cette expression affiche un emoji de manière conditionnelle en fonction de la valeur d'un composant ou d'un champ de données.
Répartition :
+ `ui.Component.value`: fait référence à la valeur d'un composant avec l'ID*Component*.
+ `=== "green"`: Vérifie si la valeur du composant est égale à la chaîne « verte ».
+ `? "🟢"`: si la condition est vraie, affiche l'emoji en forme de cercle vert.
+ `: ui.Component.value === "yellow" ? "🟡"`: Si la première condition est fausse, vérifie si la valeur du composant est égale à la chaîne « jaune ».
+ `? "🟡"`: si la deuxième condition est vraie, affiche l'emoji carré jaune.
+ `: ui.detail1.data?.[0]?.CustomerStatus`: Si les deux conditions sont fausses, elle fait référence à la valeur CustomerStatus « » du premier élément du tableau de données connecté au composant Detail avec l'ID « detail ».
Cette expression peut être utilisée pour afficher un emoji ou une valeur spécifique basée sur la valeur d'un composant ou d'un champ de données dans le composant **Détail**.
### Métriques
Le composant **Metrics** est un élément visuel qui affiche les indicateurs clés ou les points de données sous la forme d'une carte. Il est conçu pour fournir une manière concise et visuellement attrayante de présenter des informations importantes ou des indicateurs de performance.
#### Propriétés des métriques
Le composant **Metrics** partage plusieurs propriétés communes avec d'autres composants, tels que `Name``Source`, et`Actions`. Pour plus d'informations sur ces propriétés, consultez[Propriétés communes des composants](#common-properties).
#### Tendance
La fonction de tendance des métriques vous permet d'afficher un indicateur visuel de la performance ou de l'évolution dans le temps de la métrique affichée.
##### Valeur de tendance
Ce champ vous permet de spécifier la valeur ou l'expression à utiliser pour déterminer la direction et l'amplitude de la tendance. Il s'agit généralement d'une valeur qui représente le changement ou les performances sur une période donnée.
Exemple :
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}
```
Cette expression extrait la valeur du month-over-month chiffre d'affaires à partir du premier élément des données connectées aux métriques « SalesMetrics ».
##### Tendance positive
Ce champ vous permet de saisir une expression qui définit les conditions d'une tendance positive. L'expression doit être vraie ou fausse.
Exemple :
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}
```
Cette expression vérifie si la valeur du month-over-month chiffre d'affaires est supérieure à 0, ce qui indique une tendance positive.
##### Tendance négative
Ce champ vous permet de saisir une expression qui définit la condition d'une tendance négative. L'expression doit être vraie ou fausse.
Exemple :
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}
```
Cette expression vérifie si le month-over-month chiffre d'affaires est inférieur à 0, ce qui indique une tendance négative.
##### Barre de couleurs
Ce bouton vous permet d'activer ou de désactiver l'affichage d'une barre de couleur pour indiquer visuellement l'état de la tendance.
##### Exemples de barres de couleurs :
##### Exemple : tendance des statistiques de vente
+ **Valeur de tendance** : `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}`
+ **Tendance positive** : `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}`
+ **Tendance négative** : `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}`
+ **Barre de couleur** : activée
##### Exemple : tendance des statistiques d'inventaire
+ **Valeur de tendance** : `{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Tendance positive** : `{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Tendance négative** : `{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Barre de couleurs** : activée
##### Exemple : tendance en matière de satisfaction client
+ **Valeur de tendance** : `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}`
+ **Tendance positive** : `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}`
+ **Tendance négative** : `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}`
+ **Barre de couleur** : activée
En configurant ces propriétés liées aux tendances, vous pouvez créer des composants de **métriques** qui fournissent une représentation visuelle des performances ou de l'évolution dans le temps de la métrique affichée.
En tirant parti de ces expressions, vous pouvez créer des composants de métriques hautement personnalisés et interactifs qui référencent et affichent les données de manière dynamique, ce qui vous permet de présenter des mesures clés, des indicateurs de performance et des visualisations basées sur les données au sein de votre application.
#### Exemples d'expressions de métriques
Dans le panneau des propriétés, vous pouvez saisir des expressions pour afficher le titre, la valeur principale, la valeur secondaire et la légende de la valeur afin d'afficher dynamiquement une valeur.
##### Exemple : Référencement d'une valeur primaire
`{{ui.metric1.primaryValue}}`: Cette expression vous permet de référencer la valeur principale du composant **Metrics** à l'aide *metric1* de l'ID d'autres composants ou expressions de la même page.
Exemple : `{{ui.salesMetrics.primaryValue}}` affichera la valeur principale du composant *salesMetrics* **Metrics**.
##### Exemple : Référencement d'une valeur secondaire
`{{ui.metric1.secondaryValue}}`: Cette expression vous permet de référencer la valeur secondaire du composant **Metrics** avec l'ID *metric1* d'autres composants ou expressions de la même page.
Exemple : `{{ui.revenueMetrics.secondaryValue}}` affichera la valeur secondaire du composant *revenueMetrics* **Metrics**.
##### Exemple : Référencement de données
`{{ui.metric1.data}}`: Cette expression vous permet de référencer les données du composant **Metrics** avec l'ID *metric1* d'autres composants ou expressions de la même page.
Exemple : `{{ui.kpiMetrics.data}}` fera référence aux données connectées au composant *kpiMetrics* **Metrics**.
##### Exemple : affichage de valeurs de données spécifiques :
`{{ui.metric1.data?.[0]?.id}}`: Cette expression est un exemple de la manière d'afficher une information spécifique à partir des données connectées au composant **Metrics** avec l'ID*metric1*. C'est utile lorsque vous souhaitez afficher une propriété spécifique du premier élément des données.
Répartition :
+ `ui.metric1`: fait référence au composant **Metrics** par l'ID*metric1*.
+ `data`: fait référence aux informations ou à l'ensemble de données connecté à ce composant.
+ `?.[0]`: désigne le premier élément ou entrée de cet ensemble de données.
+ `?.id`: affiche la *id* valeur ou l'identifiant de ce premier élément ou entrée.
Exemple : `{{ui.orderMetrics.data?.[0]?.orderId}}` affichera la *orderId* valeur du premier élément des données connectées au composant *orderMetrics* **Metrics**.
##### Exemple : affichage de la longueur des données
`{{ui.metric1.data?.length}}`: Cette expression montre comment afficher la longueur (nombre d'éléments) des données connectées au composant **Metrics** avec l'ID*metric1*. C'est utile lorsque vous souhaitez afficher le nombre d'éléments contenus dans les données.
Répartition :
+ `ui.metric1.data`: fait référence à l'ensemble de données connecté au composant.
+ `?.length`: accède au nombre total ou au nombre d'éléments ou d'entrées dans cet ensemble de données.
Exemple : `{{ui.productMetrics.data?.length}}` affichera le nombre d'éléments dans les données connectées au composant *productMetrics* **Metrics**.
### Répéteur
Le composant **Repeater** est un composant dynamique qui permet de générer et d'afficher un ensemble d'éléments en fonction d'une source de données fournie. Il est conçu pour faciliter la création de listes, de grilles ou de modèles répétitifs dans l'interface utilisateur de votre application. Voici quelques exemples de cas d'utilisation :
+ Afficher une carte pour chaque utilisateur d'un compte
+ Afficher une liste de produits incluant des images et un bouton pour les ajouter au panier
+ Afficher la liste des fichiers auxquels l'utilisateur peut accéder
Le composant **Repeater** se distingue du composant **Table** par son contenu riche. Un composant **Table** possède un format de ligne et de colonne strict. Le **répéteur** peut afficher vos données de manière plus flexible.
#### Propriétés du répéteur
Le composant **Repeater** partage plusieurs propriétés communes avec d'autres composants, tels que `Name``Source`, et`Actions`. Pour plus d'informations sur ces propriétés, consultez[Propriétés communes des composants](#common-properties).
Outre les propriétés communes, le composant **Répéteur** possède les propriétés et options de configuration supplémentaires suivantes.
#### Modèle d'article
Le **modèle d'élément** est un conteneur dans lequel vous pouvez définir la structure et les composants qui seront répétés pour chaque élément de la source de données. Vous pouvez glisser-déposer d'autres composants dans ce conteneur, tels que **du texte**, **une image**, un **bouton** ou tout autre composant dont vous avez besoin pour représenter chaque élément.
Dans le **modèle d'élément**, vous pouvez référencer les propriétés ou les valeurs de l'élément actuel à l'aide d'expressions au format`{{currentItem.propertyName}}`.
Par exemple, si votre source de données contient une `itemName` propriété, vous pouvez l'utiliser `{{currentItem.itemName}}` pour afficher le ou les noms des éléments de l'élément actuel.
#### Disposition
La section **Disposition** vous permet de configurer la disposition des éléments répétés dans le composant répéteur.
##### Orientation
+ **Liste** : organise les éléments répétés verticalement dans une seule colonne.
+ **Grille** : organise les éléments répétés dans une disposition en grille comportant plusieurs colonnes.
##### Lignes par page
Spécifiez le nombre de lignes à afficher par page dans la mise en page de liste. La pagination est fournie pour les éléments qui dépassent le nombre de lignes spécifié.
##### Colonnes et lignes par page (grille)
+ **Colonnes** : Spécifiez le nombre de colonnes dans la disposition de la grille.
+ **Lignes par page** : Spécifiez le nombre de lignes à afficher par page dans la mise en page en grille. La pagination est fournie pour les éléments qui dépassent les dimensions de grille spécifiées.
#### Expressions et exemples
Le composant **Repeater** fournit différents champs d'expression qui vous permettent de référencer et d'afficher les données du composant de manière dynamique. Ces expressions vous permettent de créer des composants **répéteurs** personnalisés et interactifs qui se connectent parfaitement aux données et à la logique de votre application.
##### Exemple : Référencement d'éléments
+ `{{currentItem.propertyName}}`: propriétés ou valeurs de référence de l'élément actuel dans le **modèle d'article**.
+ `{{ui.repeaterID[index]}}`: référencez un élément spécifique du composant répéteur par son index.
##### Exemple : affichage d'une liste de produits
+ **Source** : sélectionnez l'*Products*entité comme source de données.
+ **Modèle d'article** : ajoutez un composant **Conteneur contenant** un composant **texte** pour afficher le nom du produit (`{{currentItem.productName}}`) et un composant **Image** pour afficher l'image du produit (`{{currentItem.productImageUrl}}`).
+ **Disposition** : réglez la `Orientation` valeur sur `List` et ajustez-la `Rows per Page` comme vous le souhaitez.
##### Exemple : génération d'une grille d'avatars d'utilisateurs
+ **Source** : utilisez une expression pour générer un tableau de données utilisateur (par exemple,`[{name: 'John', avatarUrl: '...'}, {...}, {...}]`).
+ **Modèle d'élément** : ajoutez un composant **Image** et définissez sa `Source` propriété sur`{{currentItem.avatarUrl}}`.
+ **Disposition** : réglez le `Orientation` à`Grid`, spécifiez le nombre de `Columns` et `Rows per Page` et ajustez le `Space Between` et `Padding` selon les besoins.
En utilisant le `Repeater` composant, vous pouvez créer des interfaces utilisateur dynamiques et pilotées par les données, rationaliser le processus de rendu des ensembles d'éléments et réduire le besoin de répétition manuelle ou de codage en dur.
### Formulaire
Le composant Formulaire est conçu pour capturer les entrées des utilisateurs et faciliter les tâches de saisie de données au sein de votre application. Il fournit une mise en page structurée pour afficher les champs de saisie, les listes déroulantes, les cases à cocher et autres contrôles de formulaire, permettant aux utilisateurs de saisir ou de modifier des données de manière fluide. Vous pouvez imbriquer d'autres composants dans un composant de formulaire, tel qu'un tableau.
#### Propriétés du formulaire
Le composant **Form** partage plusieurs propriétés communes avec d'autres composants, tels que `Name``Source`, et`Actions`. Pour plus d'informations sur ces propriétés, consultez[Propriétés communes des composants](#common-properties).
#### Générer un formulaire
La fonctionnalité **Générer un formulaire** facilite la création rapide de champs de formulaire en les remplissant automatiquement en fonction d'une source de données sélectionnée. Cela permet d'économiser du temps et des efforts lors de la création de formulaires devant afficher un grand nombre de champs.
**Pour utiliser la fonctionnalité **Générer un formulaire, procédez** comme suit :**
1. Dans les propriétés du composant **Form**, recherchez la section **Generate Form**.
1. Sélectionnez la source de données que vous souhaitez utiliser pour générer les champs du formulaire. Il peut s'agir d'une entité, d'un flux de travail ou de toute autre source de données disponible dans votre application.
1. Les champs du formulaire seront automatiquement générés en fonction de la source de données sélectionnée, y compris les étiquettes des champs, les types et les mappages de données.
1. Passez en revue les champs générés et apportez les personnalisations nécessaires, telles que l'ajout de règles de validation ou la modification de l'ordre des champs.
1. Une fois que vous êtes satisfait de la configuration du formulaire, choisissez **Soumettre** pour appliquer les champs générés à votre composant de **formulaire**.
La fonctionnalité **Générer un formulaire** est particulièrement utile lorsque vous disposez d'un modèle de données ou d'un ensemble d'entités bien défini dans votre application pour lequel vous devez capturer les données saisies par l'utilisateur. En générant automatiquement les champs du formulaire, vous pouvez gagner du temps et garantir la cohérence entre les formulaires de votre demande.
Après avoir utilisé la fonctionnalité **Générer un formulaire**, vous pouvez personnaliser davantage la mise en page, les actions et les expressions du composant de **formulaire** en fonction de vos besoins spécifiques.
#### Expressions et exemples
Comme les autres composants, vous pouvez utiliser des expressions pour référencer et afficher des données dans le composant **Form**. Par exemple :
+ `{{ui.userForm.data.email}}`: fait référence à la valeur du `email` champ provenant de la source de données connectée au composant **Form** avec l'ID`userForm`.
**Note**
Voir [Propriétés communes des composants](#common-properties) d'autres exemples d'expressions des propriétés communes.
En configurant ces propriétés et en tirant parti des expressions, vous pouvez créer des composants de formulaire personnalisés et interactifs qui s'intègrent parfaitement aux sources de données et à la logique de votre application. Ces composants peuvent être utilisés pour capturer les entrées des utilisateurs, afficher des données préremplies et déclencher des actions en fonction des soumissions de formulaires ou des interactions des utilisateurs.
### Flux par étapes
Le composant **Stepflow** est conçu pour guider les utilisateurs à travers les processus ou les flux de travail en plusieurs étapes au sein de votre application. Il fournit une interface structurée et intuitive pour présenter une séquence d'étapes, chacune avec son propre ensemble d'entrées, de validations et d'actions.
Le composant Stepflow partage plusieurs propriétés communes avec d'autres composants, tels que `Name``Source`, et`Actions`. Pour plus d'informations sur ces propriétés, consultez[Propriétés communes des composants](#common-properties).
Le composant **Stepflow** possède des propriétés et des options de configuration supplémentaires, telles que `Step Navigation``Validation`, et`Expressions`.
## Composants de l'IA
### Génération AI
Le composant **Gen AI** est un conteneur de regroupement utilisé pour regrouper les composants et la logique qui les accompagne afin de les modifier facilement à l'aide de l'IA à l'aide du chat dans le studio d'application. Lorsque vous utilisez le chat pour créer des composants, ils sont regroupés dans un conteneur **Gen AI**. Pour plus d'informations sur la modification ou l'utilisation de ce composant, consultez[Création ou modification de votre application](generative-ai.md#generative-ai-build-app).
## Composantes textuelles et numériques
### Saisie de texte
Le composant de **saisie de texte** permet aux utilisateurs de saisir et de soumettre des données texte dans votre application. Il fournit un moyen simple et intuitif de capturer les entrées des utilisateurs, telles que les noms, les adresses ou toute autre information textuelle.
+ `{{ui.inputTextID.value}}`: Renvoie la valeur fournie dans le champ de saisie.
+ `{{ui.inputTextID.isValid}}`: Renvoie la validité de la valeur fournie dans le champ de saisie.
### Texte
Le composant **Texte** est utilisé pour afficher des informations textuelles dans votre application. Il peut être utilisé pour afficher du texte statique, des valeurs dynamiques ou du contenu généré à partir d'expressions.
### Zone de texte
Le composant **Zone de texte** est conçu pour capturer le texte saisi sur plusieurs lignes par les utilisateurs. Il fournit un champ de saisie plus large permettant aux utilisateurs de saisir des entrées de texte plus longues, telles que des descriptions, des notes ou des commentaires.
+ `{{ui.textAreaID.value}}`: renvoie la valeur fournie dans la zone de texte.
+ `{{ui.textAreaID.isValid}}`: Renvoie la validité de la valeur fournie dans la zone de texte.
### E-mail
Le composant **E-mail** est un champ de saisie spécialisé conçu pour capturer les adresses e-mail des utilisateurs. Il peut appliquer des règles de validation spécifiques pour garantir que la valeur saisie respecte le format d'e-mail correct.
+ `{{ui.emailID.value}}`: Renvoie la valeur fournie dans le champ de saisie de l'e-mail.
+ `{{ui.emailID.isValid}}`: Renvoie la validité de la valeur fournie dans le champ de saisie de l'e-mail.
### Mot de passe
Le composant **Mot de passe** est un champ de saisie spécialement conçu pour permettre aux utilisateurs de saisir des informations sensibles, telles que des mots de passe ou des codes PIN. Il masque les caractères saisis pour préserver la confidentialité et la sécurité.
+ `{{ui.passwordID.value}}`: Renvoie la valeur fournie dans le champ de saisie du mot de passe.
+ `{{ui.passwordID.isValid}}`: Renvoie la validité de la valeur fournie dans le champ de saisie du mot de passe.
### Recherche
Le composant **de recherche** fournit aux utilisateurs un champ de saisie dédié pour effectuer des requêtes de recherche ou saisir des termes de recherche dans les données renseignées de l'application.
+ `{{ui.searchID.value}}`: renvoie la valeur fournie dans le champ de recherche.
### Téléphone
Le composant **Téléphone** est un champ de saisie conçu pour saisir les numéros de téléphone ou autres informations de contact des utilisateurs. Il peut inclure des règles de validation et des options de formatage spécifiques pour garantir que la valeur saisie respecte le format de numéro de téléphone correct.
+ `{{ui.phoneID.value}}`: Renvoie la valeur fournie dans le champ de saisie du téléphone.
+ `{{ui.phoneID.isValid}}`: Renvoie la validité de la valeur fournie dans le champ de saisie du téléphone.
### Number
Le composant **Number** est un champ de saisie conçu spécifiquement pour que les utilisateurs puissent saisir des valeurs numériques. Il peut appliquer des règles de validation pour garantir que la valeur saisie est un nombre valide dans une plage ou un format spécifié.
+ `{{ui.numberID.value}}`: Renvoie la valeur fournie dans le champ de saisie numérique.
+ `{{ui.numberID.isValid}}`: Renvoie la validité de la valeur fournie dans le champ de saisie numérique.
### Currency
Le composant **Devise** est un champ de saisie spécialisé permettant de saisir des valeurs ou des montants monétaires. Il peut inclure des options de formatage pour afficher les symboles monétaires, les séparateurs décimaux et appliquer des règles de validation spécifiques aux entrées de devises.
+ `{{ui.currencyID.value}}`: Renvoie la valeur fournie dans le champ de saisie des devises.
+ `{{ui.currencyID.isValid}}`: Renvoie la validité de la valeur fournie dans le champ de saisie des devises.
### Paire détaillée
Le composant **Detail pair** est utilisé pour afficher des paires clé-valeur ou des paires d'informations connexes dans un format structuré et lisible. Il est couramment utilisé pour présenter des détails ou des métadonnées associés à un élément ou à une entité spécifique.
## Composants de sélection
### Basculement
Le composant **Switch** est un contrôle d'interface utilisateur qui permet aux utilisateurs de basculer entre deux états ou options, tels queon/off, true/false, or enabled/disabled. Il fournit une représentation visuelle de l'état actuel et permet aux utilisateurs de le modifier d'un simple clic ou d'un simple toucher.
### Changer de groupe
Le composant du **groupe de commutateurs** est un ensemble de commandes de commutation individuelles qui permettent aux utilisateurs de sélectionner une ou plusieurs options parmi un ensemble prédéfini. Il fournit une représentation visuelle des options sélectionnées et non sélectionnées, ce qui permet aux utilisateurs de comprendre et d'interagir plus facilement avec les choix disponibles.
#### Changer les champs d'expression de groupe
+ `{{ui.switchGroupID.value}}`: renvoie un tableau de chaînes contenant la valeur de chaque commutateur activé par l'utilisateur de l'application.
### Groupe de cases à cocher
Le composant de **groupe Checkbox** présente aux utilisateurs un groupe de cases à cocher, leur permettant de sélectionner plusieurs options simultanément. C'est utile lorsque vous souhaitez donner aux utilisateurs la possibilité de choisir un ou plusieurs éléments dans une liste d'options.
#### Case à cocher : groupes de champs d'expression
+ `{{ui.checkboxGroupID.value}}`: renvoie un tableau de chaînes contenant la valeur de chaque case à cocher sélectionnée par l'utilisateur de l'application.
### Groupe radio
Le composant du **groupe radio** est un ensemble de boutons radio qui permettent aux utilisateurs de sélectionner une seule option parmi plusieurs choix qui s'excluent mutuellement. Il garantit qu'une seule option peut être sélectionnée à la fois, offrant aux utilisateurs un moyen clair et sans ambiguïté de faire une sélection.
#### Champs d'expression de groupes radio
Les champs suivants peuvent être utilisés dans les expressions.
+ `{{ui.radioGroupID.value}}`: renvoie la valeur du bouton radio sélectionné par l'utilisateur de l'application.
### Sélection unique
Le composant **Single Select** présente aux utilisateurs une liste d'options à partir de laquelle ils peuvent sélectionner un seul élément. Il est couramment utilisé dans les scénarios où les utilisateurs doivent faire un choix parmi un ensemble d'options prédéfinies, telles que la sélection d'une catégorie, d'un lieu ou d'une préférence.
#### Champs d'expression à sélection unique
+ `{{ui.singleSelectID.value}}`: renvoie la valeur de l'élément de liste sélectionné par l'utilisateur de l'application.
### Sélection multiple
Le composant à **sélection multiple** est similaire au composant à **sélection unique** mais permet aux utilisateurs de sélectionner plusieurs options simultanément dans une liste de choix. C'est utile lorsque les utilisateurs doivent effectuer plusieurs sélections à partir d'un ensemble d'options prédéfini, par exemple en sélectionnant plusieurs tags, centres d'intérêt ou préférences.
#### Champs d'expression à sélection multiple
+ `{{ui.multiSelectID.value}}`: renvoie un tableau de chaînes contenant la valeur de chaque élément de liste sélectionné par l'utilisateur de l'application.
## Boutons et composants de navigation
Le studio d'applications fournit une variété de boutons et de composants de navigation pour permettre aux utilisateurs de déclencher des actions et de naviguer dans votre application.
### Composants des boutons
Les composants des boutons disponibles sont les suivants :
+ Button
+ Bouton surligné
+ Bouton d'icône
+ Bouton de texte
Les composants de ces boutons partagent les propriétés communes suivantes :
#### Contenu
+ **Libellé du bouton** : texte à afficher sur le bouton.
#### Type
+ **Bouton** : bouton standard.
+ **Souligné** : bouton avec un style surligné.
+ **Icône** : bouton avec une icône.
+ **Texte** : bouton contenant uniquement du texte.
#### Size
Taille du bouton. Les valeurs possibles sont `Small`, `Medium` et `Large`.
#### Icône
Vous pouvez choisir parmi une variété d'icônes à afficher sur le bouton, notamment :
+ Enveloppe fermée
+ Cloche
+ Personne
+ Menu de hamburgers
+ Recherche
+ Informations encerclées
+ Engrenage
+ Chevron gauche
+ Chevron à droite
+ Points horizontaux
+ Corbeille
+ Retouche
+ Check
+ Fermer
+ Accueil
+ De plus
#### Triggers
Lorsque vous cliquez sur le bouton, vous pouvez configurer une ou plusieurs actions à déclencher. Les types d'actions disponibles sont les suivants :
+ **Base**
+ Exécuter l'action du composant : exécute une action spécifique au sein d'un composant.
+ Naviguer : permet d'accéder à une autre page ou vue.
+ Invoquer une action sur les données : déclenche une action liée aux données, telle que la création, la mise à jour ou la suppression d'un enregistrement.
+ **Advanced (Avancé)**
+ JavaScript: exécute JavaScript du code personnalisé.
+ Invoquer l'automatisation : démarre une automatisation ou un flux de travail existant.
#### JavaScript propriétés du bouton d'action
Sélectionnez le type `JavaScript` d'action pour exécuter JavaScript du code personnalisé lorsque vous cliquez sur le bouton.
##### Code source
Dans le `Source code` champ, vous pouvez saisir votre JavaScript expression ou votre fonction. Par exemple :
```
return "Hello World";
```
Cela renverra simplement la chaîne `Hello World` lorsque vous cliquerez sur le bouton.
##### Condition : Exécuter si
Vous pouvez également fournir une expression booléenne qui détermine si l' JavaScript action doit être exécutée ou non. Cette balise utilise la syntaxe suivante :
```
{{ui.textinput1.value !== ""}}
```
Dans cet exemple, l' JavaScript action ne sera exécutée que si la valeur du `textinput1` composant n'est pas une chaîne vide.
En utilisant ces options de déclenchement avancées, vous pouvez créer des comportements de boutons hautement personnalisés qui s'intègrent directement à la logique et aux données de votre application. Cela vous permet d'étendre les fonctionnalités intégrées des boutons et d'adapter l'expérience utilisateur à vos besoins spécifiques.
**Note**
Testez toujours soigneusement vos JavaScript actions pour vous assurer qu'elles fonctionnent comme prévu.
### Lien hypertexte
Le composant **Hyperlink** fournit un lien cliquable permettant de naviguer vers des itinéraires d'application externes URLs ou internes.
#### Propriétés du lien hypertexte
##### Contenu
+ **Libellé du lien hypertexte** : texte à afficher sous forme d'étiquette du lien hypertexte.
##### URL
URL de destination du lien hypertexte, qui peut être un site Web externe ou une route d'application interne.
##### Triggers
Lorsque vous cliquez sur le lien hypertexte, vous pouvez configurer une ou plusieurs actions à déclencher. Les types d'action disponibles sont les mêmes que ceux des composants des boutons.
## Composantes de date et d'heure
### Date
Le composant **Date** permet aux utilisateurs de sélectionner et de saisir des dates.
Le composant **Date** partage plusieurs propriétés communes avec d'autres composants, tels que `Name``Source`, et`Validation`. Pour plus d'informations sur ces propriétés, consultez[Propriétés communes des composants](#common-properties).
Outre les propriétés communes, le composant **Date** possède les propriétés spécifiques suivantes :
#### Propriétés de la date
##### Format
+ **YYYY/MM/DD**, **DD/MM/YYYY**, **YYYY/MM/DD**, **YYYY/DD/MM**, **MM/DD**, **JD/MM** : format dans lequel la date doit être affichée.
##### Value
+ **YYYY-MM-DD** : format dans lequel la valeur de date est stockée en interne.
##### Date minimale
+ **YYYY-MM-DD** : date minimale pouvant être sélectionnée.
**Note**
Cette valeur doit correspondre au format de`YYYY-MM-DD`.
##### Date maximale
+ **YYYY-MM-DD** : date maximale pouvant être sélectionnée.
**Note**
Cette valeur doit correspondre au format de`YYYY-MM-DD`.
##### Type de calendrier
+ **1 mois**, **2 mois** : type d'interface utilisateur du calendrier à afficher.
##### Dates désactivées
+ **Source : source** de données pour les dates qui doivent être désactivées. Par exemple : Aucun, Expression.
+ **Dates désactivées** : expression qui détermine les dates qui doivent être désactivées, par exemple :
+ `{{currentRow.column}}`: désactive les dates correspondant à l'évaluation de cette expression.
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: désactive les dates antérieures au 1er janvier 2023
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: Désactive les week-ends.
##### Comportement
+ **Visible si** : expression qui détermine la visibilité du composant **Date**.
+ **Désactiver si** : expression qui détermine si le composant **Date** doit être désactivé.
#### Validation
La section **Validation** vous permet de définir des règles et des contraintes supplémentaires pour la saisie de la date. En configurant ces règles de validation, vous pouvez vous assurer que les valeurs de date saisies par les utilisateurs répondent aux exigences spécifiques de votre application. Vous pouvez ajouter les types de validations suivants :
+ **Obligatoire** : cette option garantit que l'utilisateur doit saisir une valeur de date avant de soumettre le formulaire.
+ **Personnalisé** : vous pouvez créer des règles de validation personnalisées à l'aide d' JavaScriptexpressions. Par exemple :
```
{{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
```
Cette expression vérifie si la date saisie est antérieure au 1er janvier 2023. Si la condition est vraie, la validation échouera.
Vous pouvez également fournir un message de validation personnalisé à afficher lorsque la validation n'est pas satisfaite :
```
"Validation not met. The date must be on or after January 1, 2023."
```
En configurant ces règles de validation, vous pouvez vous assurer que les valeurs de date saisies par les utilisateurs répondent aux exigences spécifiques de votre application.
#### Expressions et exemples
Le composant **Date** fournit le champ d'expression suivant :
+ `{{ui.dateID.value}}`: renvoie la valeur de date saisie par l'utilisateur au format`YYYY-MM-DD`.
### Heure
Le composant **Time** permet aux utilisateurs de sélectionner et de saisir des valeurs temporelles. En configurant les différentes propriétés du composant **Time**, vous pouvez créer des champs de saisie de temps qui répondent aux exigences spécifiques de votre application, telles que la restriction de la plage de temps sélectionnable, la désactivation de certaines heures et le contrôle de la visibilité et de l'interactivité du composant.
#### Propriétés temporelles
Le composant **Time** partage plusieurs propriétés communes avec d'autres composants, tels que `Name``Source`, et`Validation`. Pour plus d'informations sur ces propriétés, consultez[Propriétés communes des composants](#common-properties).
Outre les propriétés communes, le composant **Time** possède les propriétés spécifiques suivantes :
##### Intervalles de temps
+ **5 minutes**, **10 minutes**, **15 minutes**, **20 minutes**, **25 minutes**, **30 minutes**, **60 minutes** : intervalles disponibles pour sélectionner l'heure.
##### Value
+ **HH:MM AA** : Format dans lequel la valeur temporelle est stockée en interne.
**Note**
Cette valeur doit correspondre au format de`HH:MM AA`.
##### Placeholder
+ **Paramètres du calendrier** : texte de l'espace réservé affiché lorsque le champ horaire est vide.
##### Durée minimale
+ **HH:MM AA** : Durée minimale pouvant être sélectionnée.
**Note**
Cette valeur doit correspondre au format de`HH:MM AA`.
##### Durée maximale
+ **HH:MM AA** : Durée maximale pouvant être sélectionnée.
**Note**
Cette valeur doit correspondre au format de`HH:MM AA`.
##### Horaires réservés aux personnes handicapées
+ **Source : source** de données pour les heures qui doivent être désactivées (par exemple, None, Expression).
+ **Horaires désactivés** : expression qui détermine les horaires à désactiver, par exemple`{{currentRow.column}}`.
##### Configuration des horaires désactivés
Vous pouvez utiliser la section **Horaires désactivés** pour spécifier les valeurs temporelles qui ne doivent pas être disponibles pour la sélection.
##### Source
+ **Aucun** : aucun horaire n'est désactivé.
+ **Expression** : vous pouvez utiliser une JavaScript expression pour déterminer les heures qui doivent être désactivées, par exemple`{{currentRow.column}}`.
##### Exemple d'expression :
```
{{currentRow.column === "Lunch Break"}}
```
Cette expression désactiverait chaque fois que la colonne « Lunch Break » est vraie pour la ligne en cours.
En configurant ces règles de validation et en désactivant les expressions temporelles, vous pouvez vous assurer que les valeurs temporelles saisies par les utilisateurs répondent aux exigences spécifiques de votre application.
##### Comportement
+ **Visible si** : expression qui détermine la visibilité du composant Time.
+ **Désactiver si** : expression qui détermine si le composant Time doit être désactivé.
##### Validation
+ **Obligatoire** : une bascule qui garantit que l'utilisateur doit saisir une valeur temporelle avant de soumettre le formulaire.
+ **Personnalisé** : vous permet de créer des règles de validation personnalisées à l'aide d' JavaScript expressions.
**Message de validation personnalisé** : message à afficher lorsque la validation personnalisée n'est pas satisfaite.
Par exemple :
```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```
Cette expression vérifie si l'heure saisie est 9 h 00 ou 9 h 30. Si la condition est vraie, la validation échouera.
Vous pouvez également fournir un message de validation personnalisé à afficher lorsque la validation n'est pas satisfaite :
```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```
#### Expressions et exemples
Le composant Time fournit le champ d'expression suivant :
+ `{{ui.timeID.value}}`: Renvoie la valeur temporelle saisie par l'utilisateur au format HH:MM AA.
##### Exemple : valeur temporelle
+ `{{ui.timeID.value}}`: renvoie la valeur temporelle saisie par l'utilisateur au format`HH:MM AA`.
##### Exemple : comparaison de temps
+ `{{ui.timeInput.value > "10:00 AM"}}`: Vérifie si la valeur horaire est supérieure à 10 h 00.
+ `{{ui.timeInput.value < "05:00 pM"}}`: Vérifie si la valeur horaire est inférieure à 17h00.
### Plage de dates
Le composant **Plage de dates** permet aux utilisateurs de sélectionner et de saisir une plage de dates. En configurant les différentes propriétés du composant Plage de dates, vous pouvez créer des champs de saisie de plage de dates qui répondent aux exigences spécifiques de votre application, telles que la restriction de la plage de dates sélectionnable, la désactivation de certaines dates et le contrôle de la visibilité et de l'interactivité du composant.
#### Propriétés de la plage de dates
Le composant **Date Range** partage plusieurs propriétés communes avec d'autres composants, tels que `Name``Source`, et`Validation`. Pour plus d'informations sur ces propriétés, consultez[Propriétés communes des composants](#common-properties).
Outre les propriétés communes, le composant **Date Range** possède les propriétés spécifiques suivantes :
##### Format
+ **MM/DD/YYYY**: format dans lequel la plage de dates doit être affichée.
##### Date de début
+ **YYYY-MM-DD** : date minimale pouvant être sélectionnée comme date de début de plage.
**Note**
Cette valeur doit correspondre au format de`YYYY-MM-DD`.
##### Date de fin
+ **YYYY-MM-DD** : date maximale pouvant être sélectionnée comme fin de plage.
**Note**
Cette valeur doit correspondre au format de`YYYY-MM-DD`.
##### Placeholder
+ **Paramètres du calendrier** : texte de l'espace réservé affiché lorsque le champ de plage de dates est vide.
##### Date minimale
+ **YYYY-MM-DD** : date minimale pouvant être sélectionnée.
**Note**
Cette valeur doit correspondre au format de`YYYY-MM-DD`.
##### Date maximale
+ **YYYY-MM-DD** : date maximale pouvant être sélectionnée.
**Note**
Cette valeur doit correspondre au format de`YYYY-MM-DD`.
##### Type de calendrier
+ **1 mois** : type d'interface utilisateur du calendrier à afficher. Par exemple, un seul mois.
+ **2 mois** : type d'interface utilisateur du calendrier à afficher. Par exemple, deux mois.
##### Jours obligatoires sélectionnés
+ **0** : Le nombre de jours obligatoires qui doivent être sélectionnés dans la plage de dates.
##### Dates désactivées
+ **Source : source** de données pour les dates qui doivent être désactivées (par exemple, None, Expression, Entity ou Automation).
+ **Dates désactivées** : expression qui détermine les dates qui doivent être désactivées, par exemple`{{currentRow.column}}`.
##### Validation
La section **Validation** vous permet de définir des règles et des contraintes supplémentaires pour la saisie de la plage de dates.
#### Expressions et exemples
Le composant **Date Range** fournit les champs d'expression suivants :
+ `{{ui.dateRangeID.startDate}}`: renvoie la date de début de la plage sélectionnée au format`YYYY-MM-DD`.
+ `{{ui.dateRangeID.endDate}}`: renvoie la date de fin de la plage sélectionnée au format`YYYY-MM-DD`.
##### Exemple : calcul de la différence de date
+ `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}`Calcule le nombre de jours entre les dates de début et de fin.
##### Exemple : visibilité conditionnelle basée sur une plage de dates
+ `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}`Vérifie si la plage de dates sélectionnée est en dehors de l'année 2023.
##### Exemple : dates désactivées en fonction des données de ligne actuelles
+ `{{currentRow.isHoliday}}`Désactive les dates pour lesquelles la colonne « IsHoliday » de la ligne actuelle est vraie.
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`Désactive les dates antérieures au 1er janvier 2023 en fonction de la « DateColumn » de la ligne actuelle.
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`Désactive les week-ends en fonction de la « DateColumn » de la ligne actuelle.
##### Validation personnalisée
+ `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}`Vérifie si la date de début est ultérieure à la date de fin, ce qui échouerait lors de la validation personnalisée.
## Composants multimédia
Le studio d'application fournit plusieurs composants permettant d'intégrer et d'afficher différents types de médias dans votre application.
### Intégrer iFrame
Le composant **iFrame embed** vous permet d'intégrer du contenu Web externe ou des applications dans votre application à l'aide d'un iFrame.
#### Propriétés d'intégration de l'iFrame
##### URL
**Note**
La source du média affiché dans ce composant doit être autorisée dans les paramètres de sécurité du contenu de votre application. Pour de plus amples informations, veuillez consulter [Afficher ou mettre à jour les paramètres de sécurité du contenu de votre application](app-content-security-settings-csp.md).
URL du contenu externe ou de l'application que vous souhaitez intégrer.
##### Disposition
+ **Largeur** : largeur de l'iFrame, spécifiée sous forme de pourcentage (%) ou de valeur de pixel fixe (par exemple, 300 pixels).
+ **Hauteur** : hauteur de l'iFrame, spécifiée sous forme de pourcentage (%) ou de valeur de pixel fixe.
### Téléchargement S3
Le composant de **téléchargement S3** permet aux utilisateurs de télécharger des fichiers dans un compartiment Amazon S3. En configurant le composant **S3 Upload**, vous pouvez permettre aux utilisateurs de télécharger facilement des fichiers vers le stockage Amazon S3 de votre application, puis d'exploiter les informations des fichiers téléchargés dans la logique et l'interface utilisateur de votre application.
**Note**
N'oubliez pas de vous assurer que les autorisations nécessaires et les configurations de compartiment Amazon S3 sont en place pour prendre en charge les téléchargements de fichiers et les exigences de stockage de votre application.
#### Propriétés de téléchargement S3
##### Configuration du S3
+ **Connecteur** : sélectionnez le connecteur Amazon S3 préconfiguré à utiliser pour les téléchargements de fichiers.
+ **Bucket** : le compartiment Amazon S3 dans lequel les fichiers seront chargés.
+ **Dossier** : dossier du compartiment Amazon S3 dans lequel les fichiers seront stockés.
+ **Nom du fichier** : convention de dénomination des fichiers téléchargés.
##### Configuration du téléchargement de fichiers
+ **Étiquette** : étiquette ou instructions affichées au-dessus de la zone de téléchargement du fichier.
+ **Description** : instructions ou informations supplémentaires concernant le téléchargement du fichier.
+ **Type de fichier** : type de fichiers dont le téléchargement est autorisé. Par exemple : image, document ou vidéo.
+ **Taille** : taille maximale des fichiers individuels pouvant être téléchargés.
+ **Libellé du bouton** : texte affiché sur le bouton de sélection du fichier.
+ **Style du bouton** : style du bouton de sélection de fichiers. Par exemple, encadré ou rempli.
+ **Taille du bouton** : taille du bouton de sélection du fichier.
##### Validation
+ **Nombre maximum de fichiers** : nombre maximum de fichiers pouvant être téléchargés en une seule fois.
+ **Taille de fichier maximale** : taille maximale autorisée pour chaque fichier individuel.
##### Triggers
+ **En cas de succès** : actions à déclencher lorsque le téléchargement d'un fichier est réussi.
+ **En cas d'échec** : actions à déclencher en cas d'échec du téléchargement d'un fichier.
#### Champs d'expression de téléchargement S3
Le composant de **téléchargement S3** fournit les champs d'expression suivants :
+ `{{ui.s3uploadID.files}}`: Renvoie un tableau des fichiers qui ont été téléchargés.
+ `{{ui.s3uploadID.files[0]?.size}}`: Renvoie la taille du fichier à l'index désigné.
+ `{{ui.s3uploadID.files[0]?.type}}`: Renvoie le type du fichier à l'index désigné.
+ `{{ui.s3uploadID.files[0]?.nameOnly}}`: Renvoie le nom du fichier, sans suffixe d'extension, à l'index désigné.
+ `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: renvoie le nom du fichier avec son suffixe d'extension à l'index désigné.
#### Expressions et exemples
##### Exemple : accès aux fichiers téléchargés
+ `{{ui.s3uploadID.files.length}}`: renvoie le nombre de fichiers qui ont été téléchargés.
+ `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`: renvoie une liste séparée par des virgules des noms de fichiers qui ont été téléchargés.
+ `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`: Renvoie un tableau contenant uniquement les fichiers image qui ont été téléchargés.
##### Exemple : validation des téléchargements de fichiers
+ `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`: Vérifie si la taille de l'un des fichiers téléchargés dépasse 5 Mo.
+ `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`: Vérifie si tous les fichiers téléchargés sont des images PNG.
+ `{{ui.s3uploadID.files.length > 3}}`: Vérifie si plus de 3 fichiers ont été téléchargés.
##### Exemple : actions déclenchantes
+ `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`: affiche un message de réussite si au moins un fichier a été chargé.
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`: Déclenche une automatisation du traitement vidéo si des fichiers vidéo ont été téléchargés.
+ `{{ui.s3uploadID.files.map(f => f.url)}}`: Récupère URLs les fichiers téléchargés, qui peuvent être utilisés pour afficher ou traiter ultérieurement les fichiers.
Ces expressions vous permettent d'accéder aux fichiers téléchargés, de valider les téléchargements de fichiers et de déclencher des actions en fonction des résultats du téléchargement des fichiers. En utilisant ces expressions, vous pouvez créer un comportement plus dynamique et plus intelligent au sein de la fonctionnalité de téléchargement de fichiers de votre application.
**Note**
*s3uploadID*Remplacez-le par l'ID de votre composant de **téléchargement S3**.
### Composant de visualisation de PDF
Le composant **PDF Viewer** permet aux utilisateurs de visualiser et d'interagir avec des documents PDF au sein de votre application. App Studio prend en charge ces différents types d'entrée pour la source PDF. Le composant **PDF Viewer** vous permet d'intégrer des documents PDF dans votre application en toute flexibilité, que ce soit à partir d'une URL statique, d'un URI de données intégré ou d'un contenu généré dynamiquement.
#### Propriétés du lecteur PDF
##### Source
**Note**
La source du média affiché dans ce composant doit être autorisée dans les paramètres de sécurité du contenu de votre application. Pour de plus amples informations, veuillez consulter [Afficher ou mettre à jour les paramètres de sécurité du contenu de votre application](app-content-security-settings-csp.md).
La source du document PDF, qui peut être une expression, une entité, une URL ou une automatisation.
##### Expression
Utilisez une expression pour générer dynamiquement la source PDF.
##### Entité
Connectez le composant du **lecteur PDF** à une entité de données contenant le document PDF.
##### URL
Spécifiez l'URL du document PDF.
##### URL
Vous pouvez saisir une URL pointant vers le document PDF que vous souhaitez afficher. Il peut s'agir d'une URL Web publique ou d'une URL de votre propre application.
Exemple : `https://example.com/document.pdf`
##### URI des données
Un **URI de données** est un moyen compact d'inclure de petits fichiers de données (tels que des images ou PDFs) en ligne dans votre application. Le document PDF est codé sous forme de chaîne base64 et inclus directement dans la configuration du composant.
##### Blob ou ArrayBuffer
Vous pouvez également fournir le document PDF sous forme de blob ou d' ArrayBuffer objet, ce qui vous permet de générer ou de récupérer dynamiquement les données PDF à partir de différentes sources au sein de votre application.
##### Automatisation
Connectez le composant du **lecteur PDF** à une automatisation qui fournit le document PDF.
##### Actions
+ **Télécharger** : ajoute un bouton ou un lien permettant aux utilisateurs de télécharger le document PDF.
##### Disposition
+ **Largeur** : largeur du lecteur PDF, spécifiée sous forme de pourcentage (%) ou de valeur de pixel fixe (par exemple, 600 pixels).
+ **Hauteur** : hauteur du lecteur PDF, spécifiée sous forme de valeur fixe en pixels.
### Visionneuse d'images
Le composant **Visionneuse d'images** permet aux utilisateurs de visualiser et d'interagir avec des fichiers image au sein de votre application.
#### Propriétés du visualiseur d'images
##### Source
**Note**
La source du média affiché dans ce composant doit être autorisée dans les paramètres de sécurité du contenu de votre application. Pour de plus amples informations, veuillez consulter [Afficher ou mettre à jour les paramètres de sécurité du contenu de votre application](app-content-security-settings-csp.md).
+ **Entité** : connectez le composant **Image viewer** à une entité de données contenant le fichier image.
+ **URL** : Spécifiez l'URL du fichier image.
+ **Expression** : utilisez une expression pour générer dynamiquement la source de l'image.
+ **Automatisation** : connectez le composant de **visionneuse d'images** à une automatisation qui fournit le fichier image.
##### Texte alternatif
Description textuelle alternative de l'image, qui est utilisée à des fins d'accessibilité.
##### Disposition
+ **Ajustement de l'image** : Détermine la manière dont l'image doit être redimensionnée et affichée dans le composant. Par exemple : `Contain`, `Cover` ou `Fill`.
+ **Largeur : largeur** du composant de **visionneuse d'images**, spécifiée sous forme de pourcentage (%) ou de valeur de pixel fixe (par exemple, 300 pixels).
+ **Hauteur : hauteur** du composant de **visionneuse d'images**, spécifiée sous forme de valeur de pixel fixe.
+ **Arrière-plan** : permet de définir une couleur ou une image d'arrière-plan pour le composant **Visionneuse d'images**.
# Automatisations et actions : définissez la logique métier de votre application
Les **automatisations** vous permettent de définir la logique métier de votre application. Les principaux composants d'une automatisation sont les suivants : des déclencheurs qui démarrent l'automatisation, une séquence d'une ou plusieurs actions, des paramètres d'entrée utilisés pour transmettre des données à l'automatisation et une sortie.
**Topics**
+ [Concepts d'automatisation](automations-concepts.md)
+ [Création, modification et suppression d'automatisations](automations-create-edit-delete.md)
+ [Ajouter, modifier et supprimer des actions d'automatisation](automations-actions-add-edit-delete.md)
+ [Référence sur les actions Automation](automations-actions-reference.md)
# Concepts d'automatisation
Voici quelques concepts et termes à connaître lors de la définition et de la configuration de la logique métier de votre application à l'aide des automatisations dans App Studio.
## Automatisations
Les **automatisations** vous permettent de définir la logique métier de votre application. Les principaux composants d'une automatisation sont les suivants : des déclencheurs qui démarrent l'automatisation, une séquence d'une ou plusieurs actions, des paramètres d'entrée utilisés pour transmettre des données à l'automatisation et une sortie.
## Actions
Une action d'automatisation, communément appelée **action**, est une étape logique individuelle qui constitue une automatisation. Chaque action exécute une tâche spécifique, qu'il s'agisse d'envoyer un e-mail, de créer un enregistrement de données, d'appeler une fonction Lambda ou d'appeler. APIs Les actions sont ajoutées aux automatisations à partir de la bibliothèque d'actions et peuvent être regroupées en instructions conditionnelles ou en boucles.
## Paramètres d'entrée d'automatisation
Les **paramètres d'entrée d'automatisation** sont des valeurs d'entrée dynamiques que vous pouvez transmettre des composants aux automatisations pour les rendre flexibles et réutilisables. Considérez les paramètres comme des variables pour votre automatisation. Au lieu de coder des valeurs en dur dans une automatisation, vous pouvez définir des paramètres et fournir différentes valeurs en cas de besoin. Les paramètres vous permettent d'utiliser la même automatisation avec des entrées différentes à chaque exécution.
## Sortie simulée
Certaines actions interagissent avec des ressources ou des services externes à l'aide de connecteurs. Lorsque vous utilisez l'environnement de prévisualisation, les applications n'interagissent pas avec les services externes. Pour tester des actions utilisant des connecteurs dans l'environnement d'aperçu, vous pouvez utiliser une **sortie simulée** pour simuler le comportement et le résultat du connecteur. La sortie simulée est configurée à l'aide de JavaScript, et le résultat est stocké dans les résultats d'une action, tout comme la réponse du connecteur est stockée dans une application publiée.
En utilisant la simulation, vous pouvez utiliser l'environnement de prévisualisation pour tester différents scénarios et leur impact sur d'autres actions grâce à l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans appeler le service externe via des connecteurs.
## Sortie d'automatisation
Une **sortie d'automatisation** est utilisée pour transmettre des valeurs d'une automatisation à d'autres ressources d'une application, telles que des composants ou d'autres automatisations. Les sorties d'automatisation sont configurées sous forme d'expressions, et l'expression peut renvoyer une valeur statique ou une valeur dynamique calculée à partir des paramètres et des actions d'automatisation. Par défaut, les automatisations ne renvoient aucune donnée, y compris les résultats des actions effectuées dans le cadre de l'automatisation.
Voici quelques exemples de la manière dont les sorties d'automatisation peuvent être utilisées :
+ Vous pouvez configurer une sortie d'automatisation pour renvoyer un tableau et transmettre ce tableau pour remplir un composant de données.
+ Vous pouvez utiliser une automatisation pour calculer une valeur et transmettre cette valeur à plusieurs autres automatisations afin de centraliser et de réutiliser la logique métier.
## Triggers
Un **déclencheur** détermine quand et dans quelles conditions une automatisation sera exécutée. Quelques exemples de déclencheurs concernent `On click` les boutons et `On select` les saisies de texte. Le type de composant détermine la liste des déclencheurs disponibles pour ce composant. Les déclencheurs sont ajoutés aux [composants](concepts.md#concepts-component) et configurés dans le studio d'application.
# Création, modification et suppression d'automatisations
**Contents**
+ [Création d'une automatisation](#automations-create)
+ [Affichage ou modification des propriétés d'automatisation](#automations-edit)
+ [Supprimer une automatisation](#automations-delete)
## Création d'une automatisation
Utilisez la procédure suivante pour créer une automatisation dans une application App Studio. Une fois créée, une automatisation doit être configurée en modifiant ses propriétés et en y ajoutant des actions.
**Pour créer une automatisation**
1. Si nécessaire, accédez au studio d'application de votre application.
1. Choisissez l’onglet **Allocations**.
1. Si vous n'avez aucune automatisation, choisissez **\$1 Ajouter une automatisation** dans le canevas. Sinon, dans le menu **Automatisations** de gauche, choisissez **\$1** Ajouter.
1. Une nouvelle automatisation sera créée, et vous pourrez commencer à modifier ses propriétés ou à ajouter et configurer des actions pour définir la logique métier de votre application.
## Affichage ou modification des propriétés d'automatisation
Utilisez la procédure suivante pour afficher ou modifier les propriétés d'automatisation.
**Pour afficher ou modifier les propriétés d'automatisation**
1. Si nécessaire, accédez au studio d'application de votre application.
1. Choisissez l’onglet **Allocations**.
1. **Dans le menu **Automatisations** de gauche, choisissez l'automatisation dont vous souhaitez afficher ou modifier les propriétés pour ouvrir le menu Propriétés de droite.**
1. Dans le menu **Propriétés**, vous pouvez consulter les propriétés suivantes :
+ **Identifiant d'automatisation** : nom unique de l'automatisation. Pour le modifier, entrez un nouvel identifiant dans le champ de texte.
+ **Paramètres d'automatisation** : les paramètres d'automatisation sont utilisés pour transmettre des valeurs dynamiques de l'interface utilisateur de votre application aux actions d'automatisation et de données. Pour ajouter un paramètre, choisissez **\$1 Ajouter**. Cliquez sur l'icône en forme de crayon pour modifier le nom, la description ou le type du paramètre. Pour supprimer un paramètre, cliquez sur l'icône de corbeille.
**Astuce**
Vous pouvez également ajouter des paramètres d'automatisation directement depuis le canevas.
+ **Sortie d'automatisation** : La sortie d'automatisation est utilisée pour configurer les données de l'automatisation qui peuvent être référencées dans d'autres automatisations ou composants. Par défaut, les automatisations ne créent pas de sortie. Pour ajouter une sortie d'automatisation, choisissez **\$1 Ajouter**. Pour supprimer la sortie, cliquez sur l'icône de corbeille.
1. Vous définissez le rôle d'une automatisation en ajoutant et en configurant des actions. Pour plus d'informations sur les actions, reportez-vous [Ajouter, modifier et supprimer des actions d'automatisation](automations-actions-add-edit-delete.md) aux sections et[Référence sur les actions Automation](automations-actions-reference.md).
## Supprimer une automatisation
Utilisez la procédure suivante pour supprimer une automatisation dans une application App Studio.
**Pour supprimer une automatisation**
1. Si nécessaire, accédez au studio d'application de votre application.
1. Choisissez l’onglet **Allocations**.
1. **Dans le menu **Automatisations** de gauche, choisissez le menu ellipses de l'automatisation que vous souhaitez supprimer, puis sélectionnez Supprimer.** Vous pouvez également choisir l'icône de corbeille dans le menu **Propriétés** de droite de l'automatisation.
1. Dans la boîte de dialogue de confirmation, choisissez **Delete** (Supprimer).
# Ajouter, modifier et supprimer des actions d'automatisation
Une action d'automatisation, communément appelée **action**, est une étape logique individuelle qui constitue une automatisation. Chaque action exécute une tâche spécifique, qu'il s'agisse d'envoyer un e-mail, de créer un enregistrement de données, d'appeler une fonction Lambda ou d'appeler. APIs Les actions sont ajoutées aux automatisations à partir de la bibliothèque d'actions et peuvent être regroupées en instructions conditionnelles ou en boucles.
**Contents**
+ [Ajouter une action d'automatisation](#automations-actions-add)
+ [Affichage et modification des propriétés des actions d'automatisation](#automations-actions-edit)
+ [Supprimer une action d'automatisation](#automations-actions-delete)
## Ajouter une action d'automatisation
Utilisez la procédure suivante pour ajouter une action à une automatisation dans une application App Studio.
**Pour ajouter une action d'automatisation**
1. Si nécessaire, accédez au studio d'application de votre application.
1. Choisissez l’onglet **Allocations**.
1. Dans le menu **Automatisations** de gauche, choisissez l'automatisation à laquelle vous souhaitez ajouter une action.
1. Dans le menu **Action** de droite, choisissez l'action que vous souhaitez ajouter ou faites-la glisser vers le canevas. Une fois l'action créée, vous pouvez choisir l'action pour configurer les propriétés de l'action afin de définir les fonctionnalités de l'action. Pour plus d'informations sur les propriétés des actions et leur configuration, consultez[Référence sur les actions Automation](automations-actions-reference.md).
## Affichage et modification des propriétés des actions d'automatisation
Utilisez la procédure suivante pour afficher ou modifier les propriétés d'une action d'automatisation dans une application App Studio.
**Pour afficher ou modifier les propriétés des actions d'automatisation**
1. Si nécessaire, accédez au studio d'application de votre application.
1. Choisissez l’onglet **Allocations**.
1. Dans le menu **Automatisations** de gauche, choisissez l'action dont vous souhaitez afficher ou modifier les propriétés. Vous pouvez également choisir l'action dans le canevas lorsque vous visualisez l'automatisation qui la contient.
1. Vous pouvez afficher ou modifier les propriétés de l'action dans le menu **Propriétés** de droite. Les propriétés d'une action sont différentes pour chaque type d'action. Pour plus d'informations sur les propriétés des actions et leur configuration, consultez[Référence sur les actions Automation](automations-actions-reference.md).
## Supprimer une action d'automatisation
Utilisez la procédure suivante pour supprimer une action d'une automatisation dans une application App Studio.
**Pour supprimer une action d'automatisation**
1. Si nécessaire, accédez au studio d'application de votre application.
1. Choisissez l’onglet **Allocations**.
1. Dans le menu **Automatisations** de gauche, choisissez l'automatisation contenant l'action que vous souhaitez supprimer.
1. Dans le canevas, choisissez l'icône de la corbeille dans l'action que vous souhaitez supprimer, puis sélectionnez **Supprimer**.
# Référence sur les actions Automation
Vous trouverez ci-dessous la documentation de référence pour les actions d'automatisation utilisées dans App Studio.
Une action d'automatisation, communément appelée **action**, est une étape logique individuelle qui constitue une automatisation. Chaque action exécute une tâche spécifique, qu'il s'agisse d'envoyer un e-mail, de créer un enregistrement de données, d'appeler une fonction Lambda ou d'appeler. APIs Les actions sont ajoutées aux automatisations à partir de la bibliothèque d'actions et peuvent être regroupées en instructions conditionnelles ou en boucles.
Pour plus d'informations sur la création et la configuration des automatisations et de leurs actions, consultez les rubriques de[Automatisations et actions : définissez la logique métier de votre application](automations.md).
## Invoquer l'API
Invoque une demande d'API HTTP REST. Les créateurs peuvent utiliser cette action pour envoyer des demandes depuis App Studio à d'autres systèmes ou services avec APIs. Par exemple, vous pouvez l'utiliser pour vous connecter à des systèmes tiers ou à des applications développées en interne afin d'accéder à des données critiques pour l'entreprise, ou pour invoquer des points de terminaison d'API qui ne peuvent pas être appelés par des actions App Studio dédiées.
Pour plus d'informations sur REST APIs, consultez [Qu'est-ce qu'une RESTful API ?](https://aws.amazon.com/what-is/restful-api/) .
### Propriétés
#### Connecteur
Le **connecteur** à utiliser pour les demandes d'API effectuées par cette action. La liste déroulante des connecteurs contient uniquement les connecteurs des types suivants : `API Connector` et`OpenAPI Connector`. Selon la façon dont le connecteur est configuré, il peut contenir des informations importantes telles que les informations d'identification et les en-têtes par défaut ou les paramètres de requête.
Pour plus d'informations sur les connecteurs d'API, y compris une comparaison entre l'utilisation de `API Connector` et`OpenAPI Connector`, consultez[Connectez-vous à des services tiers](add-connector-third-party.md).
#### Propriétés de configuration des demandes d'API
Choisissez **Configurer la demande d'API** dans le panneau des propriétés pour ouvrir la boîte de dialogue de configuration de la demande. Si un **connecteur d'API** est sélectionné, la boîte de dialogue inclut les informations relatives au connecteur.
**Méthode :** méthode utilisée pour l'appel d'API. Les valeurs possibles sont les suivantes :
+ `DELETE`: Supprime une ressource spécifiée.
+ `GET`: Récupère des informations ou des données.
+ `HEAD`: Récupère uniquement les en-têtes d'une réponse sans le corps.
+ `POST`: Soumet les données à traiter.
+ `PUSH`: Soumet les données à traiter.
+ `PATCH`: Met partiellement à jour une ressource spécifiée.
**Chemin :** chemin relatif vers la ressource.
**En-têtes :** tous les en-têtes sous forme de paires clé-valeur à envoyer avec la demande d'API. Si un connecteur est sélectionné, ses en-têtes configurés seront automatiquement ajoutés et ne pourront pas être supprimés. Les en-têtes configurés ne peuvent pas être modifiés, mais vous pouvez les remplacer en ajoutant un autre en-tête portant le même nom.
**Paramètres de requête :** tous les paramètres de requête sous forme de paires clé-valeur à envoyer avec la demande d'API. Si un connecteur est sélectionné, ses paramètres de requête configurés seront automatiquement ajoutés et ne pourront être ni modifiés ni supprimés.
**Body :** informations à envoyer avec la demande d'API au format JSON. Il n'y a pas de corps pour les `GET` demandes.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Invoquer AWS
Invoque une opération depuis un AWS service. Il s'agit d'une action générale pour appeler AWS des services ou des opérations, qui doit être utilisée s'il n'existe pas d'action dédiée au AWS service ou à l'opération souhaité.
### Propriétés
#### Service
Le AWS service qui contient l'opération à exécuter.
#### Opération
L'opération à exécuter.
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
L'entrée JSON à utiliser lors de l'exécution de l'opération spécifiée. Pour plus d'informations sur la configuration des entrées pour les AWS opérations, consultez le [AWS SDK pour JavaScript](https://docs.aws.amazon.com/sdk-for-javascript).
## Invoquer une fonction Lambda
Invoque une fonction Lambda existante.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les fonctions Lambda exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour accéder à la fonction Lambda, ainsi que d'autres informations de configuration, telles que la AWS région contenant la fonction Lambda. Pour plus d'informations sur la configuration d'un connecteur pour Lambda, consultez. [Étape 3 : Création d'un connecteur Lambda](connectors-lambda.md#connectors-lambda-create-connector)
#### Nom de la fonction
Nom de la fonction Lambda à exécuter. Notez qu'il s'agit du nom de la fonction, et non de l'ARN (Amazon Resource Name) de la fonction.
#### Événement fonctionnel
Paires clé-valeur à transmettre à votre fonction Lambda en tant que charge utile de l'événement.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Loop
Exécute des actions imbriquées à plusieurs reprises pour parcourir une liste d'éléments, un élément à la fois. Par exemple, ajoutez l'[Créer un enregistrement](#automations-actions-reference-create-record)action à une action en boucle pour créer plusieurs enregistrements.
L'action de boucle peut être imbriquée dans d'autres boucles ou actions conditionnelles. Les actions de boucle sont exécutées de manière séquentielle et non en parallèle. Les résultats de chaque action au sein de la boucle ne sont accessibles que pour les actions suivantes au cours de la même itération de boucle. Ils ne sont pas accessibles en dehors de la boucle ou au cours des différentes itérations de la boucle.
### Propriétés
#### Source
Liste des éléments à parcourir, un élément à la fois. La source peut être le résultat d'une action précédente ou d'une liste statique de chaînes, de nombres ou d'objets que vous pouvez fournir à l'aide d'une JavaScript expression.
##### Exemples
La liste suivante contient des exemples d'entrées source.
+ Résultats d'une action précédente : `{{results.actionName.data}}`
+ Une liste de numéros : `{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}`
+ Une liste de chaînes de caractères : `{{["apple", "banana", "orange", "grape", "kiwi"]}}`
+ Une valeur calculée : `{{params.actionName.split("\n")}}`
#### Nom de l'article actuel
Nom de la variable qui peut être utilisée pour référencer l'élément en cours d'itération. Le nom actuel de l'élément est configurable afin que vous puissiez imbriquer deux boucles ou plus et accéder aux variables de chaque boucle. Par exemple, si vous parcourez des pays et des villes en boucle à l'aide de deux boucles, vous pouvez configurer et référencer `currentCountry` et`currentCity`.
## Condition
Exécute des actions en fonction du résultat d'une ou de plusieurs conditions logiques spécifiées qui sont évaluées lors de l'exécution de l'automatisation. L'action de condition est composée des éléments suivants :
+ Un champ de *condition*, qui est utilisé pour fournir une JavaScript expression qui est évaluée à `true` ou`false`.
+ Une *vraie branche*, qui contient des actions exécutées si la condition est évaluée à`true`.
+ Une *fausse branche*, qui contient des actions exécutées si la condition est évaluée à`false`.
Ajoutez des actions aux branches vraie et fausse en les faisant glisser dans l'action de condition.
### Propriétés
#### Condition
JavaScript Expression à évaluer lors de l'exécution de l'action.
## Créer un enregistrement
Crée un enregistrement dans une entité App Studio existante.
### Propriétés
#### Entité
Entité dans laquelle un enregistrement doit être créé. Une fois qu'une entité est sélectionnée, des valeurs doivent être ajoutées aux champs de l'entité pour que l'enregistrement soit créé. Les types de champs, et si les champs sont obligatoires ou facultatifs, sont définis dans l'entité.
## Mettre à jour l'enregistrement
Met à jour un enregistrement existant dans une entité App Studio.
### Propriétés
#### Entité
Entité contenant les enregistrements à mettre à jour.
#### Conditions
Critères qui définissent les enregistrements mis à jour par l'action. Vous pouvez regrouper les conditions pour créer une seule instruction logique. Vous pouvez combiner des groupes ou des conditions avec `AND` `OR` des instructions.
#### Champs
Les champs à mettre à jour dans les enregistrements spécifiés par les conditions.
#### Valeurs
Les valeurs à mettre à jour dans les champs spécifiés.
## Supprimer l'enregistrement
Supprime un enregistrement d'une entité App Studio.
### Propriétés
#### Entité
Entité contenant les enregistrements à supprimer.
#### Conditions
Critères qui définissent les enregistrements supprimés par l'action. Vous pouvez regrouper les conditions pour créer une seule instruction logique. Vous pouvez combiner des groupes ou des conditions avec `AND` `OR` des instructions.
## Invoquer une action de données
Exécute une action sur les données avec des paramètres facultatifs.
### Propriétés
#### Action sur les données
L'action sur les données à exécuter par l'action.
#### Parameters
Paramètres d'action sur les données à utiliser par l'action sur les données. Les paramètres d'action sur les données sont utilisés pour envoyer des valeurs qui sont utilisées comme entrées pour les actions sur les données. Les paramètres d'action sur les données peuvent être ajoutés lors de la configuration de l'action d'automatisation, mais ils doivent être modifiés dans l'onglet **Données**.
#### Réglages avancés
L'`Invoke data action`action contient les paramètres avancés suivants :
+ **Taille de page :** nombre maximal d'enregistrements à récupérer dans chaque requête. La valeur par défaut est 500 et la valeur maximale est 3000.
+ Jeton de **pagination : jeton** utilisé pour récupérer des enregistrements supplémentaires à partir d'une requête. Par exemple, si le paramètre `Page size` est défini sur 500, mais qu'il y a plus de 500 enregistrements, le fait de transmettre le jeton de pagination à une requête suivante permet de récupérer les 500 suivants. Le jeton ne sera pas défini s'il n'existe plus d'enregistrements ou de pages.
## Amazon S3 : Placer un objet
Utilise l'`Amazon S3 PutObject`opération pour ajouter un objet identifié par une clé (chemin de fichier) à un compartiment Amazon S3 spécifié.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
Les options requises à utiliser dans la `PutObject` commande. Les options sont les suivantes :
**Note**
Pour plus d'informations sur l'`Amazon S3 PutObject`opération, consultez [PutObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_PutObject.html)le manuel *Amazon Simple Storage Service API Reference*.
+ **Bucket :** nom du compartiment Amazon S3 dans lequel placer un objet.
+ **Clé :** nom unique de l'objet à placer dans le compartiment Amazon S3.
+ **Body :** contenu de l'objet à placer dans le compartiment Amazon S3.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Amazon S3 : Supprimer un objet
Utilise l'`Amazon S3 DeleteObject`opération pour supprimer un objet identifié par une clé (chemin de fichier) d'un compartiment Amazon S3 spécifié.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
Les options requises à utiliser dans la `DeleteObject` commande. Les options sont les suivantes :
**Note**
Pour plus d'informations sur l'`Amazon S3 DeleteObject`opération, consultez [DeleteObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_DeleteObject.html)le manuel *Amazon Simple Storage Service API Reference*.
+ **Bucket :** nom du compartiment Amazon S3 dans lequel supprimer un objet.
+ **Clé :** nom unique de l'objet à supprimer du compartiment Amazon S3.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Amazon S3 : Obtenir un objet
Utilise l'`Amazon S3 GetObject`opération pour récupérer un objet identifié par une clé (chemin de fichier) à partir d'un compartiment Amazon S3 spécifié.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
Les options requises à utiliser dans la `GetObject` commande. Les options sont les suivantes :
**Note**
Pour plus d'informations sur l'`Amazon S3 GetObject`opération, consultez [GetObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_GetObject.html)le manuel *Amazon Simple Storage Service API Reference*.
+ **Bucket :** nom du compartiment Amazon S3 à partir duquel récupérer un objet.
+ **Clé :** nom unique de l'objet à récupérer depuis le compartiment Amazon S3.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Amazon S3 : Répertorier des objets
Utilise l'`Amazon S3 ListObjects`opération pour répertorier les objets dans un compartiment Amazon S3 spécifié.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
Les options requises à utiliser dans la `ListObjects` commande. Les options sont les suivantes :
**Note**
Pour plus d'informations sur l'`Amazon S3 ListObjects`opération, consultez [ListObjects](https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjects.html)le manuel *Amazon Simple Storage Service API Reference*.
+ **Bucket :** nom du compartiment Amazon S3 à partir duquel répertorier les objets.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Amazon Textract : Analyser un document
Utilise l'`Amazon Textract AnalyzeDocument`opération pour analyser les relations entre les éléments détectés dans un document d'entrée.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
Le contenu de la demande à utiliser dans la `AnalyzeDocument` commande. Les options sont les suivantes :
**Note**
Pour plus d'informations sur cette `Amazon Textract AnalyzeDocument` opération, consultez le [AnalyzeDocument](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeDocument.html)manuel *Amazon Textract Developer Guide.*
+ **Document/S3Object/Bucket :** nom du compartiment Amazon S3. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
+ **Document/S3Object/Nom : nom** de fichier du document d'entrée. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
+ **Document/S3Object/Version :** si la gestion des versions est activée dans le compartiment Amazon S3, vous pouvez spécifier la version de l'objet. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
+ **FeatureTypes:** liste des types d'analyses à effectuer. Les valeurs valides sont : `TABLES`, `FORMS`, `QUERIES`, `SIGNATURES` et `LAYOUT`.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Amazon Textract : Analyser les dépenses
Utilise l'`Amazon Textract AnalyzeExpense`opération pour analyser un document d'entrée afin de détecter les relations financières entre le texte.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
Le contenu de la demande à utiliser dans la `AnalyzeExpense` commande. Les options sont les suivantes :
**Note**
Pour plus d'informations sur cette `Amazon Textract AnalyzeExpense` opération, consultez le [AnalyzeExpense](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeExpense.html)manuel *Amazon Textract Developer Guide.*
+ **Document/S3Object/Bucket :** nom du compartiment Amazon S3. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
+ **Document/S3Object/Nom : nom** de fichier du document d'entrée. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
+ **Document/S3Object/Version :** si la gestion des versions est activée dans le compartiment Amazon S3, vous pouvez spécifier la version de l'objet. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Amazon Textract : Analyser l'identifiant
Utilise l'`Amazon Textract AnalyzeID`opération pour analyser un document d'identité à la recherche d'informations pertinentes.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
Le contenu de la demande à utiliser dans la `AnalyzeID` commande. Les options sont les suivantes :
**Note**
Pour plus d'informations sur l'`Amazon Textract AnalyzeID`opération, consultez [AnalyzeID](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeID.html) dans le manuel *Amazon Textract Developer* Guide.
+ **Document/S3Object/Bucket :** nom du compartiment Amazon S3. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
+ **Document/S3Object/Nom : nom** de fichier du document d'entrée. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
+ **Document/S3Object/Version :** si la gestion des versions est activée dans le compartiment Amazon S3, vous pouvez spécifier la version de l'objet. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Amazon Textract : détecter le texte d'un document
Utilise cette `Amazon Textract DetectDocumentText` opération pour détecter les lignes de texte et les mots qui constituent une ligne de texte dans un document d'entrée.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
Le contenu de la demande à utiliser dans la `DetectDocumentText` commande. Les options sont les suivantes :
**Note**
Pour plus d'informations sur cette `Amazon Textract DetectDocumentText` opération, consultez le [DetectDocumentText](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)manuel *Amazon Textract Developer Guide.*
+ **Document/S3Object/Bucket :** nom du compartiment Amazon S3. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
+ **Document/S3Object/Nom : nom** de fichier du document d'entrée. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
+ **Document/S3Object/Version :** si la gestion des versions est activée dans le compartiment Amazon S3, vous pouvez spécifier la version de l'objet. Ce paramètre peut être laissé vide si un fichier est transmis à l'action avec le composant de **téléchargement S3**.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Amazon Bedrock : Prompt GenAI
Utilise l' InvokeModelopération [Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) pour exécuter l'inférence à l'aide des paramètres d'invite et d'inférence fournis dans les propriétés de l'action. L'action peut générer du texte, des images et des intégrations.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Pour utiliser cette action avec succès, le connecteur doit être configuré avec **Amazon Bedrock Runtime** comme service. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Modèle
Le modèle de base à utiliser par Amazon Bedrock pour traiter la demande. Pour plus d'informations sur les modèles dans Amazon Bedrock, consultez les informations [relatives aux modèles Amazon Bedrock Foundation dans le guide](https://docs.aws.amazon.com/bedrock/latest/userguide/foundation-models-reference.html) de l'utilisateur d'*Amazon Bedrock*.
#### Type d’entrée
Type d'entrée de l'entrée envoyée au modèle Amazon Bedrock. Les valeurs possibles sont **Texte**, **Document** et **Image**. Si aucun type d'entrée n'est disponible pour la sélection, il n'est probablement pas pris en charge par le modèle configuré.
#### Invite de l'utilisateur
L'invite à être envoyée au modèle Amazon Bedrock pour être traitée afin de générer une réponse. Vous pouvez saisir du texte statique ou transmettre une entrée provenant d'une autre partie de votre application, par exemple d'un composant utilisant des paramètres, d'une action précédente de l'automatisation ou d'une autre automatisation. Les exemples suivants montrent comment transmettre une valeur provenant d'un composant ou d'une action précédente :
+ Pour transmettre une valeur à partir d'un composant à l'aide de paramètres : `{{params.paramName}}`
+ Pour transmettre la valeur d'une action précédente, procédez comme suit : `{{results.actionName}}`
#### Invite du système (modèles Claude)
L'invite système à utiliser par le modèle Amazon Bedrock lors du traitement de la demande. L'invite du système est utilisée pour fournir du contexte, des instructions ou des directives aux modèles Claude.
#### Réglages de demande
Configurez différents paramètres de demande et paramètres d'inférence du modèle. Vous pouvez à présent configurer les paramètres suivants :
+ **Température** : température à utiliser par le modèle Amazon Bedrock lors du traitement de la demande. La température détermine le caractère aléatoire ou créatif de la sortie du modèle Bedrock. Plus la température est élevée, plus la réponse sera créative et moins analytique. Les valeurs possibles sont`[0-10]`.
+ **Nombre maximum de jetons** : limitez la longueur de la sortie du modèle Amazon Bedrock.
+ **TopP** **: Lors de l'échantillonnage du noyau, le modèle calcule la distribution cumulée de toutes les options pour chaque jeton suivant par ordre de probabilité décroissant et la coupe une fois qu'il atteint une probabilité particulière spécifiée par le TopP.** Vous devez modifier **la température** ou le **TopP**, mais pas les deux
+ Séquences d'**arrêt : séquences** qui empêchent le modèle de traiter la demande et de générer une sortie.
Pour plus d'informations, consultez la section [Paramètres de demande d'inférence et champs de réponse pour les modèles de base](https://docs.aws.amazon.com/bedrock/latest/userguide/model-parameters.html) dans le guide de l'*utilisateur d'Amazon Bedrock*.
#### Séquences d'arrêt
**Entrez un **identifiant et une version d'Amazon Bedrock Guardrail.**** Les garde-fous sont utilisés pour mettre en œuvre des mesures de protection en fonction de vos cas d'utilisation et de politiques responsables en matière d'IA. Pour plus d'informations, consultez la section [Bloquer le contenu dangereux dans les modèles utilisant Amazon Bedrock Guardrails](https://docs.aws.amazon.com/bedrock/latest/userguide/guardrails.html) dans le guide de l'utilisateur d'*Amazon Bedrock*.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## Amazon Bedrock : modèle Invoke
Utilise l' InvokeModelopération [Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) pour exécuter l'inférence à l'aide des paramètres d'invite et d'inférence fournis dans le corps de la demande. Vous utilisez l'inférence de modèle pour générer du texte, des images et des intégrations.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Pour utiliser cette action avec succès, le connecteur doit être configuré avec **Amazon Bedrock Runtime** comme service. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
Le contenu de la demande à utiliser dans la `InvokeModel` commande.
**Note**
Pour plus d'informations sur l'`Amazon Bedrock InvokeModel`opération, y compris des exemples de commandes, consultez le [InvokeModel](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)manuel *Amazon Bedrock API Reference*.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement en direct.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
## JavaScript
Exécute une JavaScript fonction personnalisée pour renvoyer une valeur spécifiée.
**Important**
App Studio ne prend pas en charge l'utilisation de JavaScript bibliothèques tierces ou personnalisées.
### Propriétés
#### Code source
Extrait de JavaScript code à exécuter par l'action.
**Astuce**
Vous pouvez utiliser l'IA pour générer JavaScript pour vous en effectuant les étapes suivantes :
Cliquez sur l'icône d'extension pour ouvrir l' JavaScript éditeur étendu.
(Facultatif) : Activez le bouton **Modifier le code** pour modifier tout code existant JavaScript. Sinon, l'IA remplacera tout ce qui existe déjà JavaScript.
Dans ** JavaScriptGenerate**, décrivez ce que vous voulez faire avec JavaScript, par exemple :**Add two numbers**.
Choisissez l'icône d'envoi pour générer votre JavaScript.
## Invoquer l'automatisation
Exécute une automatisation spécifiée.
### Propriétés
#### Invoquer l'automatisation
Automatisation à exécuter par l'action.
## Send email (Envoyer un e-mail)
Utilise l'`Amazon SES SendEmail`opération pour envoyer un e-mail.
### Propriétés
#### Connecteur
Le connecteur à utiliser pour les opérations exécutées par cette action. Le connecteur configuré doit être configuré avec les informations d'identification appropriées pour exécuter l'opération, ainsi que d'autres informations de configuration, telles que la AWS région qui contient les ressources référencées dans l'opération.
#### Configuration
Le contenu de la demande à utiliser dans la `SendEmail` commande. Les options sont les suivantes :
**Note**
Pour plus d'informations sur l'`Amazon SES SendEmail`opération, consultez [SendEmail](https://docs.aws.amazon.com/ses/latest/APIReference-V2/API_SendEmail.html)le manuel *Amazon Simple Email Service API Reference*.
#### Sortie simulée
Les actions n'interagissent pas avec les services ou ressources externes dans l'environnement de prévisualisation. Le champ **de sortie** simulé est utilisé pour fournir une expression JSON qui simule le comportement d'un connecteur dans l'environnement de prévisualisation à des fins de test. Cet extrait est stocké dans la `results` carte de l'action, comme le serait la réponse du connecteur pour une application publiée dans l'environnement réel.
Ce champ vous permet de tester différents scénarios et leur impact sur d'autres actions au sein de l'automatisation, telles que la simulation de différentes valeurs de résultats, de scénarios d'erreur, de cas extrêmes ou de trajectoires insatisfaisantes sans communiquer avec des services externes via des connecteurs.
# Entités et actions sur les données : configurez le modèle de données de votre application
Les **entités** sont des tables de données dans App Studio. Les entités interagissent directement avec les tables des sources de données. Les entités incluent des champs pour décrire les données qu'elles contiennent, des requêtes pour localiser et renvoyer des données, et un mappage pour connecter les champs de l'entité aux colonnes d'une source de données.
**Topics**
+ [Bonnes pratiques lors de la conception de modèles de données](data-model-best-practices.md)
+ [Création d'une entité dans une application App Studio](data-entities-create.md)
+ [Configuration ou modification d'une entité dans une application App Studio](data-entities-edit.md)
+ [Supprimer une entité](data-entities-delete.md)
+ [Entités de données gérées dans AWS App Studio](managed-data-entities.md)
# Bonnes pratiques lors de la conception de modèles de données
Utilisez les meilleures pratiques suivantes pour créer un modèle de données relationnel robuste, évolutif et sécurisé à utiliser dans AWS votre application App Studio qui répond aux exigences de votre application et garantit la fiabilité et les performances à long terme de votre infrastructure de données.
+ **Choisissez le bon service de AWS données :** en fonction de vos besoins, choisissez le service de AWS données approprié. Par exemple, pour une application de traitement des transactions en ligne (OLTP), vous pouvez envisager une base de données (DB) telle qu'Amazon Aurora, qui est un service de base de données relationnel, entièrement géré et natif du cloud qui prend en charge différents moteurs de base de données tels que MySQL et PostgreSQL. Pour obtenir la liste complète des versions d'Aurora prises en charge par App Studio, consultez[Connect à Amazon Aurora](connectors-aurora.md). D'autre part, pour les cas d'utilisation du traitement analytique en ligne (OLAP), pensez à utiliser Amazon Redshift, un entrepôt de données dans le cloud qui vous permet d'exécuter des requêtes complexes sur de très grands ensembles de données. L'exécution de ces requêtes peut souvent prendre du temps (plusieurs secondes), ce qui rend Amazon Redshift moins adapté aux applications OLTP qui nécessitent un accès aux données à faible latence.
+ **Conception axée sur l'évolutivité :** planifiez votre modèle de données en tenant compte de la croissance et de l'évolutivité futures. Tenez compte de facteurs tels que le volume de données attendu, les modèles d'accès et les exigences de performance lorsque vous choisissez un service de données et un type d'instance de base de données et une configuration appropriés (comme la capacité allouée).
+ Pour plus d'informations sur le dimensionnement avec Aurora sans serveur, consultez la section [Performances et dimensionnement pour Aurora Serverless V2](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/aurora-serverless-v2.setting-capacity.html).
+ **Normalisez vos données :** suivez les principes de normalisation des bases de données afin de minimiser la redondance des données et d'améliorer leur intégrité. Cela inclut la création de tables appropriées, la définition des clés primaires et étrangères et l'établissement de relations entre les entités. Dans App Studio, lorsque vous interrogez les données d'une entité, vous pouvez récupérer les données associées d'une autre entité en spécifiant une `join` clause dans la requête.
+ **Mettez en œuvre une indexation appropriée :** identifiez les requêtes et les modèles d'accès les plus importants, et créez les index appropriés pour optimiser les performances.
+ **Tirez parti AWS des fonctionnalités des services de données :** profitez des fonctionnalités proposées par le service de AWS données de votre choix, telles que les sauvegardes automatisées, les déploiements multi-AZ et les mises à jour logicielles automatiques.
+ **Sécurisez vos données :** mettez en œuvre des mesures de sécurité robustes, telles que des politiques IAM (Gestion des identités et des accès AWS), la création d'utilisateurs de base de données dotés d'autorisations restreintes sur les tables et les schémas, et appliquez le chiffrement au repos et en transit.
+ **Surveillez et optimisez les performances :** surveillez en permanence les performances de votre base de données et apportez les ajustements nécessaires, tels que le dimensionnement des ressources, l'optimisation des requêtes ou le réglage des configurations de base de données.
+ **Automatisez la gestion des bases de données :** utilisez AWS des services tels qu'Aurora Autoscaling, Performance Insights for Aurora et AWS Database Migration Service pour automatiser les tâches de gestion des bases de données et réduire les frais opérationnels.
+ **Mettez en œuvre des stratégies de sauvegarde et de reprise après sinistre :** assurez-vous de disposer d'un plan de sauvegarde et de restauration bien défini, en tirant parti de fonctionnalités telles que les sauvegardes automatisées Aurora, la point-in-time restauration et les configurations de répliques entre régions.
+ **Suivez les AWS meilleures pratiques et la documentation :** suivez les AWS meilleures pratiques, directives et documentations les plus récentes pour le service de données que vous avez choisi afin de vous assurer que votre modèle de données et sa mise en œuvre sont conformes AWS aux recommandations. up-to-date
Pour obtenir des instructions plus détaillées concernant chaque service de AWS données, consultez les rubriques suivantes :
+ [Bonnes pratiques avec Amazon Aurora](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.BestPractices.html)
+ [Bonnes pratiques avec Amazon Aurora MySQL](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/AuroraMySQL.BestPractices.html)
+ [Réglage des performances des requêtes Amazon Redshift](https://docs.aws.amazon.com/redshift/latest/dg/c-optimizing-query-performance.html)
+ [Meilleures pratiques pour interroger et analyser des données dans Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/bp-query-scan.html)
# Création d'une entité dans une application App Studio
Il existe quatre méthodes pour créer une entité dans une application App Studio. La liste suivante contient chaque méthode, ses avantages, ainsi qu'un lien vers les instructions d'utilisation de cette méthode pour créer puis configurer l'entité.
+ [Création d'une entité à partir d'une source de données existante](#data-entities-create-existing-data-source): créez automatiquement une entité et ses champs à partir d'une table de source de données existante et mappez les champs aux colonnes de la table de sources de données. Cette option est préférable si vous avez une source de données existante que vous souhaitez utiliser dans votre application App Studio.
+ [Création d'une entité avec une source de données gérée par App Studio](#data-entities-create-managed-data-source): créez une entité et une table DynamoDB qu'App Studio gère pour vous. La table DynamoDB est automatiquement mise à jour lorsque vous mettez à jour votre entité. Avec cette option, vous n'avez pas à créer, gérer ou connecter manuellement une source de données tierce, ni à désigner un mappage entre les champs d'entité et les colonnes de table. Toutes les modélisations et configurations des données de votre application sont effectuées dans App Studio. Cette option est préférable si vous ne souhaitez pas gérer vos propres sources de données et une table DynamoDB et si ses fonctionnalités sont suffisantes pour votre application.
+ [Création d'une entité vide](#data-entities-create-empty): Créez une entité vide entièrement à partir de zéro. Cette option est préférable si vous ne disposez pas de sources de données ou de connecteurs existants créés par un administrateur et que vous souhaitez concevoir le modèle de données de votre application de manière flexible sans être limité par des sources de données externes. Vous pouvez connecter l'entité à une source de données après sa création.
+ [Création d'une entité à l'aide de l'IA](#data-entities-create-with-ai): générez une entité, des champs, des actions sur les données et des exemples de données en fonction du nom d'entité spécifié. Cette option est préférable si vous avez une idée du modèle de données de votre application, mais que vous avez besoin d'aide pour le traduire en entité.
## Création d'une entité à partir d'une source de données existante
Utilisez une table provenant d'une source de données pour créer automatiquement une entité et ses champs, et mappez les champs d'entité aux colonnes de la table. Cette option est préférable si vous avez une source de données existante que vous souhaitez utiliser dans votre application App Studio.
1. Si nécessaire, accédez à votre application.
1. Choisissez l'onglet **Données** en haut du canevas.
1. S'il n'y a aucune entité dans votre application, choisissez **\$1 Create entity**. Sinon, dans le menu **Entités** de gauche, choisissez **\$1 Ajouter**.
1. Sélectionnez **Utiliser une table provenant d'une source de données existante**.
1. Dans **Connector**, sélectionnez le connecteur qui contient la table que vous souhaitez utiliser pour créer votre entité.
1. Dans **Table**, choisissez la table que vous souhaitez utiliser pour créer votre entité.
1. Cochez la case **Créer des actions sur les données** pour créer des actions sur les données.
1. Choisissez **Create entity** (Créer une entité). Votre entité est maintenant créée et vous pouvez la voir dans le panneau **Entités** de gauche.
1. Configurez votre nouvelle entité en suivant les procédures décrites dans[Configuration ou modification d'une entité dans une application App Studio](data-entities-edit.md). Notez que votre entité ayant été créée à partir d'une source de données existante, certaines propriétés ou ressources ont déjà été créées, telles que les champs, la source de données connectée et le mappage des champs. Votre entité contiendra également des actions sur les données si vous avez coché la case **Créer des actions sur les données** lors de la création.
## Création d'une entité avec une source de données gérée par App Studio
Créez une entité gérée et la table DynamoDB correspondante qui sont gérées par App Studio. Tant que la table DynamoDB existe dans le compte AWS associé, lorsque des modifications sont apportées à l'entité dans l'application App Studio, la table DynamoDB est automatiquement mise à jour. Avec cette option, vous n'avez pas à créer, gérer ou connecter manuellement une source de données tierce, ni à désigner un mappage entre les champs d'entité et les colonnes de table. Cette option est préférable si vous ne souhaitez pas gérer vos propres sources de données et une table DynamoDB et si ses fonctionnalités sont suffisantes pour votre application. Pour plus d'informations sur les entités gérées, consultez[Entités de données gérées dans AWS App Studio](managed-data-entities.md).
Vous pouvez utiliser les mêmes entités gérées dans plusieurs applications. Pour obtenir des instructions, veuillez consulter [Création d'une entité à partir d'une source de données existante](#data-entities-create-existing-data-source).
1. Si nécessaire, accédez à votre application.
1. Choisissez l'onglet **Données** en haut du canevas.
1. S'il n'y a aucune entité dans votre application, choisissez **\$1 Create entity**. Sinon, dans le menu **Entités** de gauche, choisissez **\$1 Ajouter**.
1. Sélectionnez **Créer une entité gérée par App Studio**.
1. Dans **Nom de l'entité**, saisissez le nom de votre entité.
1. Dans **Clé primaire**, donnez un nom à la clé primaire de votre entité. La clé primaire est l'identifiant unique de l'entité et ne peut pas être modifiée une fois l'entité créée.
1. Dans **Type de données de clé primaire**, sélectionnez le type de données de clé primaire de votre entité. Le type de données ne peut pas être modifié une fois l'entité créée.
1. Choisissez **Create entity** (Créer une entité). Votre entité est maintenant créée et vous pouvez la voir dans le panneau **Entités** de gauche.
1. Configurez votre nouvelle entité en suivant les procédures décrites dans[Configuration ou modification d'une entité dans une application App Studio](data-entities-edit.md). Notez que, dans la mesure où votre entité a été créée avec des données gérées, certaines propriétés ou ressources ont déjà été créées, telles que le champ de clé primaire et la source de données connectée.
## Création d'une entité vide
Créez une entité vide entièrement à partir de zéro. Cette option est préférable si vous ne disposez pas de sources de données ou de connecteurs existants créés par un administrateur. La création d'une entité vide offre de la flexibilité, car vous pouvez concevoir votre entité dans votre application App Studio sans être contraint par des sources de données externes. Après avoir conçu le modèle de données de votre application et configuré l'entité en conséquence, vous pourrez toujours la connecter ultérieurement à une source de données externe.
1. Si nécessaire, accédez à votre application.
1. Choisissez l'onglet **Données** en haut du canevas.
1. S'il n'y a aucune entité dans votre application, choisissez **\$1 Create entity**. Sinon, dans le menu **Entités** de gauche, choisissez **\$1 Ajouter**.
1. Sélectionnez **Créer une entité**.
1. Choisissez **Create entity** (Créer une entité). Votre entité est maintenant créée et vous pouvez la voir dans le panneau **Entités** de gauche.
1. Configurez votre nouvelle entité en suivant les procédures décrites dans[Configuration ou modification d'une entité dans une application App Studio](data-entities-edit.md).
## Création d'une entité à l'aide de l'IA
Générez une entité, des champs, des actions de données et des exemples de données en fonction du nom d'entité spécifié. Cette option est préférable si vous avez une idée du modèle de données de votre application, mais que vous avez besoin d'aide pour le traduire en entité.
1. Si nécessaire, accédez à votre application.
1. Choisissez l'onglet **Données** en haut du canevas.
1. S'il n'y a aucune entité dans votre application, choisissez **\$1 Create entity**. Sinon, dans le menu **Entités** de gauche, choisissez **\$1 Ajouter**.
1. Sélectionnez **Créer une entité avec l'IA**.
1. Dans **Nom de l'entité**, saisissez le nom de votre entité. Ce nom est utilisé pour générer les champs, les actions de données et les exemples de données de votre entité.
1. Cochez la case **Créer des actions sur les données** pour créer des actions sur les données.
1. Choisissez **Générer une entité**. Votre entité est maintenant créée et vous pouvez la voir dans le panneau **Entités** de gauche.
1. Configurez votre nouvelle entité en suivant les procédures décrites dans[Configuration ou modification d'une entité dans une application App Studio](data-entities-edit.md). Notez que, dans la mesure où votre entité a été créée avec l'IA, elle contiendra déjà des champs générés. Votre entité contiendra également des actions sur les données si vous avez coché la case **Créer des actions sur les données** lors de la création.
# Configuration ou modification d'une entité dans une application App Studio
Utilisez les rubriques suivantes pour configurer une entité dans une application App Studio.
**Topics**
+ [Modification du nom de l'entité](data-entities-edit-name.md)
+ [Ajouter, modifier ou supprimer des champs d'entité](data-entities-edit-fields.md)
+ [Actions de création, de modification ou de suppression de données](data-entities-edit-data-actions.md)
+ [Ajouter ou supprimer des échantillons de données](data-entities-edit-sample-data.md)
+ [Ajouter ou modifier une source de données connectée et des champs cartographiques](data-entities-edit-connection.md)
# Modification du nom de l'entité
1. Si nécessaire, naviguez jusqu'à l'entité que vous souhaitez modifier.
1. Dans l'onglet **Configuration**, dans **Nom de l'entité**, mettez à jour le nom de l'entité et choisissez en dehors de la zone de texte pour enregistrer vos modifications.
# Ajouter, modifier ou supprimer des champs d'entité
**Astuce**
Vous pouvez appuyer sur CTRL\$1Z pour annuler la dernière modification apportée à votre entité.
1. Si nécessaire, naviguez jusqu'à l'entité que vous souhaitez modifier.
1. Dans l'onglet **Configuration**, dans **Champs**, vous pouvez consulter un tableau des champs de votre entité. Les champs d'entité comportent les colonnes suivantes :
+ **Nom d'affichage :** le nom d'affichage est similaire à un en-tête de tableau ou à un champ de formulaire et est consultable par les utilisateurs de l'application. Il peut contenir des espaces et des caractères spéciaux mais doit être unique au sein d'une entité.
+ **Nom du système :** le nom du système est un identifiant unique utilisé dans le code pour référencer un champ. Lors du mappage vers une colonne d'une table Amazon Redshift, celui-ci doit correspondre au nom de colonne de la table Amazon Redshift.
+ **Type de données :** type de données qui seront stockées dans ce champ, par exemple `Integer``Boolean`, ou`String`.
1. Pour ajouter des champs :
1. Pour utiliser l'IA afin de générer des champs en fonction du nom de l'entité et de la source de données connectée, choisissez **Generate more fields**.
1. Pour ajouter un seul champ, choisissez **\$1 Ajouter un champ**.
1. Pour modifier un champ, procédez comme suit :
1. Pour modifier le nom d'affichage, entrez la valeur souhaitée dans la zone de texte **Nom d'affichage**. Si le nom système du champ n'a pas été modifié, il sera mis à jour avec la nouvelle valeur du nom d'affichage.
1. Pour modifier le nom du système, entrez la valeur souhaitée dans la zone de texte **Nom du système**.
1. Pour modifier le type de données, choisissez le menu déroulant **Type de données** et sélectionnez le type souhaité dans la liste.
1. Pour modifier les propriétés du champ, choisissez l'icône en forme de roue dentée du champ. La liste suivante détaille les propriétés des champs :
+ **Obligatoire** : Activez cette option si le champ est requis par votre source de données.
+ **Clé primaire** : activez cette option si le champ est mappé à une clé primaire dans votre source de données.
+ **Unique** : activez cette option si la valeur de ce champ doit être unique.
+ **Utiliser la source de données par défaut** : activez cette option si la valeur du champ est fournie par la source de données, par exemple en utilisant l'incrémentation automatique ou l'horodatage d'un événement.
+ **Options de type de données** : les champs de certains types de données peuvent être configurés avec des options de type de données telles que des valeurs minimales ou maximales.
1. Pour supprimer un champ, cliquez sur l'icône de corbeille du champ que vous souhaitez supprimer.
# Actions de création, de modification ou de suppression de données
Les actions sur les données sont utilisées dans les applications pour exécuter des actions sur les données d'une entité, telles que la récupération de tous les enregistrements ou la récupération d'un enregistrement par ID. Les actions sur les données peuvent être utilisées pour localiser et renvoyer des données correspondant à des conditions spécifiques à afficher dans des composants tels que des tableaux ou des vues détaillées.
**Contents**
+ [Création d'actions relatives aux données](#data-entities-data-action-add)
+ [Modification ou configuration des actions relatives aux données](#data-entities-data-action-edit)
+ [Opérateurs de conditions d'action sur les données et exemples](#data-entities-data-action-operators)
+ [Assistance aux opérateurs de condition par base de données](#data-entities-data-action-operators-support)
+ [Exemples de conditions d'action sur les données](#data-entities-data-action-operators-examples)
+ [Actions de suppression de données](#data-entities-data-action-delete)
## Création d'actions relatives aux données
**Astuce**
Vous pouvez appuyer sur CTRL\$1Z pour annuler la dernière modification apportée à votre entité.
1. Si nécessaire, accédez à l'entité pour laquelle vous souhaitez créer des actions de données.
1. Choisissez l'onglet **Actions relatives aux données**.
1. Il existe deux méthodes pour créer des actions sur les données :
+ (Recommandé) Pour utiliser l'IA afin de générer des actions sur les données pour vous, en fonction du nom de votre entité, de vos champs et de la source de données connectée, choisissez **Generate data actions**. Les actions suivantes seront générées :
1. `getAll`: Récupère tous les enregistrements d'une entité. Cette action est utile lorsque vous devez afficher une liste d'enregistrements ou effectuer des opérations sur plusieurs enregistrements à la fois.
1. `getByID`: Récupère un seul enregistrement d'une entité en fonction de son identifiant unique (ID ou clé primaire). Cette action est utile lorsque vous devez afficher ou effectuer des opérations sur un enregistrement spécifique.
+ Pour ajouter une seule action sur les données, choisissez **\$1 Ajouter une action sur les données**.
1. Pour afficher ou configurer la nouvelle action sur les données, consultez la section suivante,[Modification ou configuration des actions relatives aux données](#data-entities-data-action-edit).
## Modification ou configuration des actions relatives aux données
1. Si nécessaire, accédez à l'entité pour laquelle vous souhaitez créer des actions de données.
1. Choisissez l'onglet **Actions relatives aux données**.
1. Dans **Champs**, configurez les champs à renvoyer par la requête. Par défaut, tous les champs configurés de l'entité sont sélectionnés.
Vous pouvez également ajouter des **jointures** à l'action sur les données en effectuant les étapes suivantes :
1. Choisissez **\$1 Ajouter une jointure** pour ouvrir une boîte de dialogue.
1. Dans **Entité associée**, sélectionnez l'entité que vous souhaitez associer à l'entité actuelle.
1. Dans **Alias**, entrez éventuellement un nom d'alias temporaire pour l'entité associée.
1. Dans **Type de jointure**, sélectionnez le type de jointure souhaité.
1. Définissez la clause de jointure en sélectionnant les champs de chaque entité.
1. Choisissez **Ajouter** pour créer la jointure.
Une fois créée, la jointure sera affichée dans la section **Jointures** et des champs supplémentaires seront disponibles dans le menu déroulant **Champs à renvoyer**. Vous pouvez ajouter plusieurs jointures, y compris des jointures enchaînées entre les entités. Vous pouvez également filtrer et trier par champs à partir d'entités jointes.
Pour supprimer une jointure, cliquez sur l'icône de corbeille située à côté de celle-ci. Cela supprimera tous les champs de cette jointure et rompra toutes les jointures ou contraintes dépendantes utilisant ces champs.
1. Dans **Conditions**, ajoutez, modifiez ou supprimez des règles qui filtrent le résultat de la requête. Vous pouvez organiser les règles en groupes, et vous pouvez enchaîner plusieurs règles avec `AND` ou `OR` instructions. Pour plus d'informations sur les opérateurs que vous pouvez utiliser, consultez[Opérateurs de conditions d'action sur les données et exemples](#data-entities-data-action-operators).
1. Dans **Tri**, configurez la manière dont les résultats de la requête sont triés en choisissant un attribut et en choisissant un ordre croissant ou décroissant. Vous pouvez supprimer la configuration de tri en cliquant sur l'icône de corbeille à côté de la règle de tri.
1. Dans les **résultats de transformation**, vous pouvez saisir des informations personnalisées JavaScript pour modifier ou formater les résultats avant qu'ils ne soient affichés ou envoyés à des automatisations.
1. Dans **Aperçu de la sortie**, affichez un tableau d'aperçu de la sortie de la requête en fonction des champs configurés, des filtres, du tri et JavaScript.
## Opérateurs de conditions d'action sur les données et exemples
Vous pouvez utiliser des opérateurs de condition pour comparer une valeur d'expression configurée à une colonne d'entité afin de renvoyer un sous-ensemble d'objets de base de données. Les opérateurs que vous pouvez utiliser dépendent du type de données de la colonne et du type de base de données à laquelle l'entité est connectée, comme Amazon Redshift, Amazon Aurora ou Amazon DynamoDB.
Les opérateurs de condition suivants peuvent être utilisés avec tous les services de base de données :
+ `=`et `!=` : disponible pour tous les types de données (à l'exception des colonnes de clé primaire).
+ `<=`, `>=``<`, et `>=` : Disponible uniquement pour les colonnes numériques.
+ `IS NULL`et `IS NOT NULL` : Utilisé pour faire correspondre les colonnes contenant des valeurs nulles ou vides. Les valeurs nulles sont souvent interprétées différemment dans chaque base de données, mais dans App Studio, l'`NULL`opérateur fait correspondre et renvoie les enregistrements contenant des valeurs nulles dans la table de base de données connectée.
Les opérateurs de condition suivants ne peuvent être utilisés que dans les entités connectées aux services de base de données qui les prennent en charge :
+ `LIKE`et `NOT LIKE` (Redshift, Aurora) : utilisé pour effectuer des requêtes basées sur des modèles dans la base de données connectée. L'`LIKE`opérateur offre de la flexibilité dans la fonctionnalité de recherche car il trouve et renvoie des enregistrements correspondant aux modèles spécifiés. Vous définissez les modèles à l'aide de caractères génériques qui correspondent à n'importe quel caractère ou séquence de caractères du modèle. Chaque système de gestion de base de données possède un ensemble unique de caractères génériques, mais les deux plus courants sont `%` ceux qui représentent un nombre quelconque de caractères (y compris 0) et `_` un seul caractère.
+ `Contains`et `Not Contains` (DynamoDB) : utilisé pour effectuer une recherche distinguant majuscules et minuscules afin de déterminer si le texte donné se trouve dans les valeurs des colonnes.
+ `Starts With`et `Not Starts With` (DynamoDB) : utilisé pour effectuer une recherche distinguant majuscules et minuscules afin de déterminer si le texte donné se trouve au début des valeurs des colonnes.
### Assistance aux opérateurs de condition par base de données
Le tableau suivant indique quels opérateurs de conditions d'action sur les données sont pris en charge par chaque base de données pouvant se connecter à App Studio.
| | =, \$1=, <, >, <=, >= | COMME, PAS COMME | Contient, ne contient pas | Commence par, ne commence pas par | EST NUL, N'EST PAS NUL |
| --- | --- | --- | --- | --- | --- |
| **DynamoDB** | Oui | Non | Oui | Oui | Oui |
| **Aurora** | Oui | Oui | Non | Non | Oui |
| **Redshift** | Oui | Oui | Non | Non | Oui |
### Exemples de conditions d'action sur les données
Examinez la table de base de données suivante, qui inclut plusieurs éléments avec des `hireDate` champs `name``city`, et.
| name | city | Date d'embauche |
| --- | --- | --- |
| Adam | Seattle | 01/03/2025 |
| Adrienne | Boston | 05/03/2025 |
| Bob | Albuquerque | 06/03/2025 |
| Carlos | Chicago | 10-03-2025 |
| Caroline | NULL | 12/03/2025 |
| Rita | Miami | 15/03/2025 |
À présent, envisagez de créer des actions de données dans App Studio qui renvoient le `name` champ pour les éléments répondant à des conditions spécifiées. La liste suivante contient des exemples de conditions et les valeurs renvoyées par le tableau pour chacune d'elles.
**Note**
Les exemples sont formatés comme des exemples SQL. Ils peuvent ne pas apparaître comme dans App Studio, mais ils sont utilisés pour illustrer le comportement des opérateurs.
+ `WHERE name LIKE 'Adam'`: Retours`Adam`.
+ `WHERE name LIKE 'A%'`: Retours `Adam` et`Adrienne`.
+ `WHERE name NOT LIKE 'B_B'`: Renvoie`Adam`, `Adrienne``Carlos`,`Caroline`, et`Rita`.
+ `WHERE contains(name, 'ita')`: Retours`Rita`.
+ `WHERE begins_with(name, 'Car')`: Retours `Carlos` et`Caroline`.
+ `WHERE city IS NULL`: Retours`Caroline`.
+ `WHERE hireDate < "2025-03-06"`: Retours `Adam` et`Adrienne`.
+ `WHERE hireDate >= DateTime.now().toISODate()`: Notez que cela `DateTime.now().toISODate()` renvoie la date actuelle. Dans un scénario où la date actuelle est le 10/03/2025, l'expression renvoie`Carlos`, et`Caroline`. `Rita`
**Astuce**
Pour plus d'informations sur la comparaison des dates et des heures dans les expressions, consultez[Date et heure](expressions.md#expressions-date-time).
## Actions de suppression de données
Utilisez la procédure suivante pour supprimer des actions de données d'une entité App Studio.
1. Si nécessaire, accédez à l'entité pour laquelle vous souhaitez supprimer des actions de données.
1. Choisissez l'onglet **Actions relatives aux données**.
1. Pour chaque action sur les données que vous souhaitez supprimer, choisissez le menu déroulant à côté de **Modifier**, puis sélectionnez **Supprimer**.
1. Choisissez **Confirmer** dans la boîte de dialogue.
# Ajouter ou supprimer des échantillons de données
Vous pouvez ajouter des exemples de données aux entités d'une application App Studio. Comme les applications ne communiquent pas avec les services externes tant qu'elles ne sont pas publiées, des exemples de données peuvent être utilisés pour tester votre application et votre entité dans des environnements de prévisualisation.
1. Si nécessaire, naviguez jusqu'à l'entité que vous souhaitez modifier.
1. Choisissez l'onglet **Exemples de données**.
1. Pour générer des échantillons de données, choisissez **Générer d'autres échantillons de données**.
1. Pour supprimer des exemples de données, cochez les cases correspondant aux données que vous souhaitez supprimer, puis appuyez sur la touche Supprimer ou Retour arrière. Choisissez **Enregistrer** pour enregistrer les modifications.
# Ajouter ou modifier une source de données connectée et des champs cartographiques
**Astuce**
Vous pouvez appuyer sur CTRL\$1Z pour annuler la dernière modification apportée à votre entité.
1. Si nécessaire, naviguez jusqu'à l'entité que vous souhaitez modifier.
1. Choisissez l'onglet **Connexion** pour afficher ou gérer la connexion entre l'entité et une table de sources de données dans laquelle les données sont stockées lors de la publication de votre application. Une fois qu'une table de source de données est connectée, vous pouvez mapper les champs d'entité aux colonnes de la table.
1. Dans **Connector**, choisissez le connecteur qui contient une connexion à la table de sources de données souhaitée. Pour plus d'informations sur les connecteurs, consultez[Connectez App Studio à d'autres services à l'aide de connecteurs](connectors.md).
1. Dans **Table**, choisissez la table que vous souhaitez utiliser comme source de données pour l'entité.
1. Le tableau indique les champs de l'entité et la colonne de source de données à laquelle ils sont mappés. Choisissez **Auto map** pour mapper automatiquement vos champs d'entité avec les colonnes de votre source de données. Vous pouvez également mapper les champs manuellement dans le tableau en choisissant la colonne de source de données dans le menu déroulant pour chaque champ d'entité.
# Supprimer une entité
Pour supprimer une entité d'une application App Studio, procédez comme suit.
**Note**
La suppression d'une entité d'une application App Studio ne supprime pas la table de source de données connectée, y compris la table DynamoDB correspondante des entités gérées. Les tables des sources de données resteront dans le AWS compte associé et devront être supprimées du service correspondant si vous le souhaitez.
**Pour supprimer une entité**
1. Si nécessaire, accédez à votre application.
1. Choisissez l’onglet **Data (Données)**.
1. **Dans le menu **Entités** de gauche, choisissez le menu ellipses à côté de l'entité que vous souhaitez supprimer, puis sélectionnez Supprimer.**
1. Passez en revue les informations de la boîte de dialogue, entrez **confirm** et choisissez **Supprimer** pour supprimer l'entité.
# Entités de données gérées dans AWS App Studio
Généralement, vous configurez une entité dans App Studio avec une connexion à une table de base de données externe, et vous devez créer et mapper chaque champ d'entité avec une colonne dans la table de base de données connectée. Lorsque vous modifiez le modèle de données, la table de base de données externe et l'entité doivent être mises à jour, et les champs modifiés doivent être remappés. Bien que cette méthode soit flexible et permette d'utiliser différents types de sources de données, elle nécessite davantage de planification initiale et de maintenance continue.
Une *entité gérée* est un type d'entité pour lequel App Studio gère pour vous l'intégralité du processus de stockage et de configuration des données. Lorsque vous créez une entité gérée, une table DynamoDB correspondante est créée dans le compte associé. AWS Cela garantit une gestion des données sécurisée et transparente au sein de l'entreprise AWS. Avec une entité gérée, vous configurez le schéma de l'entité dans App Studio, et la table DynamoDB correspondante est également automatiquement mise à jour.
## Utilisation d'entités gérées dans plusieurs applications
Une fois que vous avez créé une entité gérée dans une application App Studio, cette entité peut être utilisée dans d'autres applications App Studio. Cela est utile pour configurer le stockage des données pour les applications dotées de modèles de données et de schémas identiques en fournissant une seule ressource sous-jacente à gérer.
Lorsque vous utilisez une entité gérée dans plusieurs applications, toutes les mises à jour du schéma de la table DynamoDB correspondante doivent être effectuées à l'aide de l'application d'origine dans laquelle l'entité gérée a été créée. Toute modification de schéma apportée à l'entité dans d'autres applications ne mettra pas à jour la table DynamoDB correspondante.
## Limites relatives aux entités gérées
**Restrictions relatives à la mise à jour** de la clé primaire : vous ne pouvez pas modifier le nom ou le type de clé primaire de l'entité après sa création, car il s'agit d'une modification destructrice dans DynamoDB qui entraînerait la perte de données existantes.
**Renommer des colonnes** : lorsque vous renommez une colonne dans DynamoDB, vous créez une nouvelle colonne alors que la colonne d'origine conserve ses données d'origine. Les données d'origine ne sont pas automatiquement copiées dans la nouvelle colonne ni supprimées de la colonne d'origine. Vous pouvez renommer les champs d'entités gérées, appelés *nom du système*, mais vous perdrez l'accès à la colonne d'origine et à ses données. Il n'y a aucune restriction quant au changement de nom d'affichage.
**Modification du type de données** : DynamoDB permet de modifier les types de données des colonnes après la création de la table, mais ces modifications peuvent avoir de graves répercussions sur les données existantes ainsi que sur la logique et la précision des requêtes. Les modifications de type de données nécessitent la transformation de toutes les données existantes pour les rendre conformes au nouveau format, ce qui est complexe pour les grandes tables actives. En outre, les actions relatives aux données peuvent renvoyer des résultats inattendus tant que la migration des données n'est pas terminée. Vous pouvez changer de type de champ, mais les données existantes ne seront pas migrées vers le nouveau type de données.
**Colonne de tri** : DynamoDB permet de récupérer des données triées via des clés de tri. Les clés de tri doivent être définies dans le cadre des clés primaires composites avec la clé de partition. Les limitations incluent la clé de tri obligatoire, le tri limité à une partition et l'absence de tri global entre les partitions. Une modélisation minutieuse des données des clés de tri est nécessaire pour éviter les partitions chaudes. Nous ne soutiendrons pas le jalon Sorting for Preview.
**Jointures** : les jointures ne sont pas prises en charge dans DynamoDB. Les tables sont dénormalisées dès leur conception afin d'éviter des opérations de jointure coûteuses. Pour modéliser one-to-many les relations, la table enfant contient un attribut faisant référence à la clé primaire de la table parent. Les requêtes de données multi-tables impliquent de rechercher des éléments dans la table parent pour récupérer des détails. Nous ne prendrons pas en charge les jointures natives pour les entités gérées dans le cadre du jalon de la version préliminaire. Pour contourner le problème, nous allons introduire une étape d'automatisation qui permet d'effectuer une fusion de données de 2 entités. Cela sera très similaire à une recherche à un niveau. Nous ne soutiendrons pas le jalon Sorting for Preview.
**Étape d'environnement** : nous autoriserons la publication à des fins de test, mais nous utiliserons le même magasin géré dans les deux environnements
# Paramètres de page et d'automatisation
Les paramètres constituent une fonctionnalité puissante d' AWS App Studio qui permet de transmettre des valeurs dynamiques entre différents composants, pages et automatisations au sein de votre application. À l'aide de paramètres, vous pouvez créer des expériences flexibles et contextuelles, afin de rendre vos applications plus réactives et personnalisées. Cet article couvre deux types de paramètres : les paramètres de page et les paramètres d'automatisation.
**Topics**
+ [Paramètres de page](parameters-page.md)
+ [Paramètres d'automatisation](parameters-automation.md)
# Paramètres de page
Les paramètres de page permettent d'envoyer des informations entre les pages. Ils sont souvent utilisés lors de la navigation d'une page à l'autre dans une application App Studio pour conserver le contexte ou transmettre des données. Les paramètres de page se composent généralement d'un nom et d'une valeur.
## Cas d'utilisation des paramètres de page
Les paramètres de page sont utilisés pour transmettre des données entre différentes pages et composants au sein de vos applications App Studio. Ils sont particulièrement utiles dans les cas d'utilisation suivants :
1. **Recherche et filtrage** : lorsque les utilisateurs effectuent une recherche sur la page d'accueil de votre application, les termes de recherche peuvent être transmis en tant que paramètres à la page de résultats, ce qui permet à celle-ci d'afficher uniquement les éléments filtrés pertinents. Par exemple, si un utilisateur recherche*noise-cancelling headphones*, le paramètre avec la valeur *noise-cancelling headphones* peut être transmis à la page de liste des produits.
1. **Affichage des détails d'un article** : Si un utilisateur clique sur une annonce, telle qu'un produit, l'identifiant unique de cet article peut être transmis en tant que paramètre à la page de détails. Cela permet à la page de détails d'afficher toutes les informations relatives à l'article en question. Par exemple, lorsqu'un utilisateur clique sur un casque, l'identifiant unique du produit est transmis en tant que paramètre à la page de détails du produit.
1. **Transmission du contexte utilisateur dans la navigation** des pages : lorsque les utilisateurs naviguent entre les pages, les paramètres peuvent transmettre un contexte important, tel que l'emplacement de l'utilisateur, les catégories de produits préférées, le contenu du panier d'achat et d'autres paramètres. Par exemple, lorsqu'un utilisateur parcourt différentes catégories de produits sur votre application, son emplacement et ses catégories préférées sont conservés en tant que paramètres, offrant ainsi une expérience personnalisée et cohérente.
1. **Liens profonds** : utilisez les paramètres de page pour partager ou mettre en signet un lien vers une page spécifique de l'application.
1. **Actions sur les données** : vous pouvez créer des actions sur les données qui acceptent des valeurs de paramètres afin de filtrer et d'interroger vos sources de données en fonction des paramètres transmis. Par exemple, sur la page de liste des produits, vous pouvez créer une action de données qui accepte `category` des paramètres pour récupérer les produits concernés.
## Considérations concernant la sécurité des paramètres de page
Bien que les paramètres de page constituent un moyen efficace de transmettre des données entre les pages, vous devez les utiliser avec prudence, car ils peuvent potentiellement exposer des informations sensibles s'ils ne sont pas utilisés correctement. Voici quelques points importants à prendre en compte en matière de sécurité :
1. **Évitez d'exposer des données sensibles dans URLs**
1. **Risque** : URLs, y compris les paramètres d'action des données, sont souvent visibles dans les journaux du serveur, l'historique du navigateur, etc. Il est donc essentiel d'éviter d'exposer des données sensibles, telles que les informations d'identification des utilisateurs, les informations personnelles identifiables (PII) ou toute autre donnée confidentielle, dans les valeurs des paramètres de page.
1. **Atténuation** : pensez à utiliser des identifiants qui peuvent être mappés en toute sécurité aux données sensibles. Par exemple, au lieu de transmettre le nom ou l'adresse e-mail d'un utilisateur en tant que paramètre, vous pouvez transmettre un identifiant unique aléatoire qui peut être utilisé pour récupérer le nom ou l'adresse e-mail de l'utilisateur.
# Paramètres d'automatisation
Les paramètres d'automatisation constituent une fonctionnalité puissante d'App Studio qui permet de créer des automatisations flexibles et réutilisables en transmettant des valeurs dynamiques provenant de diverses sources, telles que l'interface utilisateur, d'autres automatisations ou des actions sur les données. Ils agissent comme des espaces réservés qui sont remplacés par des valeurs réelles lorsque l'automatisation est exécutée, ce qui vous permet d'utiliser la même automatisation avec des entrées différentes à chaque fois.
Dans le cadre d'une automatisation, les paramètres ont des noms uniques, et vous pouvez référencer la valeur d'un paramètre à l'aide de la variable params suivie du nom du paramètre, par exemple,`{{params.customerId}}`.
Cet article fournit une compréhension approfondie des paramètres d'automatisation, y compris leurs concepts fondamentaux, leur utilisation et les meilleures pratiques.
## Avantages des paramètres d'automatisation
Les paramètres d'automatisation offrent plusieurs avantages, dont la liste suivante :
1. **Réutilisabilité** : en utilisant des paramètres, vous pouvez créer des automatisations réutilisables qui peuvent être personnalisées avec différentes valeurs d'entrée, ce qui vous permet de réutiliser la même logique d'automatisation avec différentes entrées.
1. **Flexibilité** : au lieu de coder des valeurs en dur dans une automatisation, vous pouvez définir des paramètres et fournir différentes valeurs en cas de besoin, ce qui rend vos automatisations plus dynamiques et plus adaptables.
1. **Séparation des préoccupations** : les paramètres aident à séparer la logique d'automatisation des valeurs spécifiques utilisées, favorisant ainsi l'organisation et la maintenabilité du code.
1. **Validation** : chaque paramètre possède un type de données, tel qu'une chaîne, un nombre ou un booléen, qui est validé lors de l'exécution. Cela garantit que les demandes contenant des types de données incorrects sont rejetées sans qu'il soit nécessaire de recourir à un code de validation personnalisé.
1. **Paramètres facultatifs et obligatoires** : vous pouvez définir les paramètres d'automatisation comme facultatifs ou obligatoires. Les paramètres requis doivent être fournis lors de l'exécution de l'automatisation, tandis que les paramètres facultatifs peuvent avoir des valeurs par défaut ou être omis. Cette flexibilité vous permet de créer des automatisations plus polyvalentes capables de gérer différents scénarios en fonction des paramètres fournis.
## Scénarios et cas d'utilisation
### Scénario : récupération des détails du produit
Imaginez que vous disposiez d'une automatisation qui récupère les détails d'un produit dans une base de données sur la base d'un identifiant de produit. Cette automatisation peut avoir un paramètre appelé`productId`.
Le `productId` paramètre agit comme un espace réservé que vous pouvez renseigner avec la valeur réelle de l'identifiant du produit lors de l'exécution de l'automatisation. Au lieu de coder en dur un identifiant de produit spécifique dans l'automatisation, vous pouvez définir le `productId` paramètre et transmettre différentes valeurs d'identifiant de produit à chaque fois que vous exécutez l'automatisation.
Vous pouvez appeler cette automatisation à partir de la source de données d'un composant, en transmettant l'identifiant du produit sélectionné comme `productId` paramètre à l'aide de la syntaxe à double crochet :`{{ui.productsTable.selectedRow.id}}`. Ainsi, lorsqu'un utilisateur sélectionne un produit dans un tableau (`ui.productsTable`), l'automatisation récupère les détails du produit sélectionné en transmettant l'identifiant de la ligne sélectionnée comme `productId` paramètre.
Vous pouvez également invoquer cette automatisation à partir d'une autre automatisation qui parcourt une liste de produits et récupère les détails de chaque produit en transmettant l'identifiant du produit comme `productId` paramètre. Dans ce scénario, la valeur du `productId` paramètre serait fournie dynamiquement à partir de l'`{{product.id}}`expression à chaque itération de la boucle.
En utilisant le `productId` paramètre et la syntaxe à double crochet, vous pouvez rendre cette automatisation plus flexible et réutilisable. Au lieu de créer des automatisations distinctes pour chaque produit, vous pouvez disposer d'une automatisation unique capable de récupérer les détails de n'importe quel produit en fournissant simplement l'identifiant de produit approprié comme valeur de paramètre à partir de différentes sources, telles que les composants de l'interface utilisateur ou d'autres automatisations.
### Scénario : gestion des paramètres facultatifs avec des valeurs de remplacement
Imaginons un scénario dans lequel vous avez une entité « Tâche » avec une colonne « Propriétaire » obligatoire, mais vous souhaitez que ce champ soit facultatif dans l'automatisation et fournisse une valeur de remplacement si le propriétaire n'est pas sélectionné.
1. Créez une automatisation avec un paramètre nommé `Owner` qui correspond au `Owner` champ de l'`Task`entité.
1. Le `Owner` champ étant obligatoire dans l'entité, le `Owner` paramètre sera synchronisé avec le paramètre requis.
1. Pour rendre le `Owner` paramètre facultatif dans l'automatisation, désactivez-le. `required`
1. Dans votre logique d'automatisation, vous pouvez utiliser une expression telle que`{{params.Owner || currentUser.userId}}`. Cette expression vérifie si le `Owner` paramètre est fourni. S'il n'est pas fourni, l'identifiant actuel de l'utilisateur en tant que propriétaire sera rétabli.
1. Ainsi, si l'utilisateur ne sélectionne pas de propriétaire dans un formulaire ou un composant, l'automatisation désignera automatiquement l'utilisateur actuel comme propriétaire de la tâche.
En activant le `required` réglage du `Owner` paramètre et en utilisant une expression de remplacement, vous pouvez le dissocier de l'exigence du champ d'entité, le rendre facultatif dans l'automatisation et fournir une valeur par défaut lorsque le paramètre n'est pas fourni.
## Définition des types de paramètres d'automatisation
En utilisant des types de paramètres pour spécifier les types de données et définir les exigences, vous pouvez contrôler les entrées de vos automatisations. Cela permet de garantir que vos automatisations fonctionnent de manière fiable avec les entrées attendues.
### Synchronisation des types depuis une entité
La synchronisation dynamique des types de paramètres et des exigences à partir des définitions des champs d'entité rationalise les automatisations des bâtiments qui interagissent avec les données des entités, garantissant ainsi que le paramètre reflète toujours le type de champ d'entité et les exigences les plus récents.
La procédure suivante détaille les étapes générales de synchronisation des types de paramètres à partir d'une entité :
1. Créez une entité avec des champs saisis (par exemple, booléen, numérique, etc.) et marquez les champs selon vos besoins.
1. Créez une nouvelle automatisation.
1. Ajoutez des paramètres à l'automatisation, et lorsque vous choisissez le **type**, choisissez le champ d'entité avec lequel vous souhaitez effectuer la synchronisation. Le type de données et le paramètre requis seront automatiquement synchronisés à partir du champ d'entité mappé
1. Si nécessaire, vous pouvez annuler le paramètre « obligatoire » en le modifiant on/off pour chaque paramètre. Cela signifie que le statut requis ne sera pas synchronisé avec le champ d'entité, mais sinon, il restera synchronisé.
### Définition manuelle des types
Vous pouvez également définir les types de paramètres manuellement sans effectuer de synchronisation à partir d'une entité.
En définissant des types de paramètres personnalisés, vous pouvez créer des automatisations qui acceptent des types d'entrée spécifiques et gèrent les paramètres facultatifs ou obligatoires selon les besoins, sans vous fier aux mappages de champs d'entités.
1. Créez une entité avec des champs saisis (par exemple, booléen, numérique, etc.) et marquez les champs selon vos besoins.
1. Créez une nouvelle automatisation.
1. Ajoutez des paramètres à l'automatisation, et lorsque vous choisissez le **type**, choisissez le type souhaité.
## Configuration des valeurs dynamiques à transmettre aux paramètres d'automatisation
Une fois que vous avez défini les paramètres d'une automatisation, vous pouvez leur transmettre des valeurs lorsque vous invoquez l'automatisation. Vous pouvez transmettre des valeurs de paramètres de deux manières :
1. **Déclencheurs de composants** : si vous appelez l'automatisation à partir d'un déclencheur de composant, par exemple en cliquant sur un bouton, vous pouvez utiliser des JavaScript expressions pour transmettre des valeurs depuis le contexte du composant. Par exemple, si vous avez un champ de saisie de texte nommé`emailInput`, vous pouvez transmettre sa valeur au paramètre e-mail avec l'expression suivante :`ui.emailInput.value`.
1. **Autres automatisations** : si vous invoquez l'automatisation depuis une autre automatisation, vous pouvez utiliser des JavaScript expressions pour transmettre des valeurs issues du contexte d'automatisation. Par exemple, vous pouvez transmettre la valeur d'un autre paramètre ou le résultat d'une action précédente.
## Type de sécurité
En définissant des paramètres avec des types de données spécifiques, tels que String, Number ou Boolean, vous pouvez vous assurer que les valeurs transmises à votre automatisation sont du type attendu.
**Note**
Dans App Studio, les dates sont des dates de chaîne ISO, et elles seront également validées.
Cette sécurité de type permet d'éviter les incohérences entre les types, qui peuvent entraîner des erreurs ou des comportements inattendus dans votre logique d'automatisation. Par exemple, si vous définissez un paramètre sous la forme d'un`Number`, vous pouvez être sûr que toute valeur transmise à ce paramètre sera un nombre, et vous n'aurez pas à effectuer de vérifications de type ou de conversions supplémentaires dans le cadre de votre automatisation.
## Validation
Vous pouvez ajouter des règles de validation à vos paramètres, afin de vous assurer que les valeurs transmises à votre automatisation répondent à certains critères.
Bien qu'App Studio ne propose pas de paramètres de validation intégrés pour les paramètres, vous pouvez implémenter des validations personnalisées en ajoutant à votre automatisation une JavaScript action qui génère une erreur si des contraintes spécifiques ne sont pas respectées.
Pour les champs d'entité, un sous-ensemble de règles de validation, telles que minimum/maximum les valeurs, est pris en charge. Toutefois, celles-ci ne sont pas validées au niveau de l'automatisation, uniquement au niveau de la couche de données, lors de l'exécution d'actions Create/Update/Delete Record.
## Bonnes pratiques pour les paramètres d'automatisation
Pour vous assurer que vos paramètres d'automatisation sont bien conçus, faciles à gérer et faciles à utiliser, suivez les meilleures pratiques suivantes :
1. **Utiliser des noms de paramètres descriptifs** : Choisissez des noms de paramètres qui décrivent clairement l'objectif ou le contexte du paramètre.
1. **Fournissez des descriptions des paramètres** : utilisez le champ **Description** lorsque vous définissez des paramètres pour expliquer leur objectif, leurs contraintes et leurs attentes. Ces descriptions apparaîtront dans les JSDoc commentaires lors du référencement du paramètre, ainsi que dans toutes les interfaces utilisateur où les utilisateurs doivent fournir des valeurs pour les paramètres lorsqu'ils invoquent l'automatisation.
1. **Utilisez les types de données appropriés** : examinez attentivement le type de données de chaque paramètre en fonction des valeurs d'entrée attendues, par exemple : chaîne, nombre, booléen, objet.
1. **Valider les valeurs des paramètres** : mettez en œuvre des contrôles de validation appropriés au sein de votre automatisation pour vous assurer que les valeurs des paramètres répondent à des exigences spécifiques avant de procéder à d'autres actions.
1. **Utiliser des valeurs de remplacement ou des valeurs par défaut** : bien qu'App Studio ne prenne actuellement pas en charge la définition de valeurs par défaut pour les paramètres, vous pouvez implémenter des valeurs de secours ou des valeurs par défaut lorsque vous utilisez les paramètres dans votre logique d'automatisation. Par exemple, vous pouvez utiliser une expression telle que `{{ params.param1 || "default value" }}` fournir une valeur par défaut si le `param1` paramètre n'est pas fourni ou s'il contient une valeur fausse.
1. **Maintien de la cohérence** des paramètres : si plusieurs automatisations nécessitent des paramètres similaires, essayez de maintenir la cohérence des noms de paramètres et des types de données entre ces automatisations.
1. **Utilisation des paramètres du document** : conservez une documentation claire pour vos automatisations, y compris des descriptions de chaque paramètre, de son objectif, des valeurs attendues et de tout exemple ou cas exceptionnel pertinent.
1. **Révisez et refactorisez fréquemment** : passez régulièrement en revue vos automatisations et leurs paramètres, en refactorisant ou en consolidant les paramètres selon les besoins pour améliorer la clarté, la maintenabilité et la réutilisabilité.
1. **Limitez le nombre de paramètres** : bien que les paramètres apportent de la flexibilité, un trop grand nombre de paramètres peut rendre une automatisation complexe et difficile à utiliser. Essayez de trouver un équilibre entre flexibilité et simplicité en limitant le nombre de paramètres au strict nécessaire.
1. **Envisagez le regroupement de paramètres** : si vous définissez plusieurs paramètres connexes, envisagez de les regrouper en un seul *Object* paramètre.
1. **Problèmes distincts** : évitez d'utiliser un seul paramètre à des fins multiples ou de combiner des valeurs indépendantes en un seul paramètre. Chaque paramètre doit représenter une préoccupation ou une donnée distincte.
1. **Utiliser des alias de paramètres** : si vos paramètres ont des noms longs ou complexes, pensez à utiliser des alias ou des versions abrégées dans la logique d'automatisation pour une meilleure lisibilité et une meilleure maintenabilité.
En suivant ces meilleures pratiques, vous pouvez vous assurer que vos paramètres d'automatisation sont bien conçus, faciles à gérer et faciles à utiliser, améliorant ainsi la qualité et l'efficacité globales de vos automatisations.
# Utilisation JavaScript pour écrire des expressions dans App Studio
Dans AWS App Studio, vous pouvez utiliser des JavaScript expressions pour contrôler dynamiquement le comportement et l'apparence de vos applications. Les JavaScript expressions d'une seule ligne sont écrites entre accolades doubles 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 des applications.
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 fonction. 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é comme « Hello, World \$1 ».
+ `{{ Math.max(5, 10) }}`sera évalué à 10.
+ `{{ Math.random() * 10 }}`renvoie un nombre aléatoire (avec décimales) compris entre [0 et 10).
## Interpolation
Vous pouvez également l'utiliser JavaScript pour interpoler des valeurs dynamiques dans du texte statique. Pour ce faire, l' JavaScript expression est placée entre deux 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 en cours. Par exemple, si `currentRow.FirstName` is `John` et `currentRow.LastName` is`Doe`, l'expression se résoudra en`John Doe`.
## Date et heure
JavaScript fournit diverses fonctions et objets permettant de travailler avec les dates et les 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 à 10h00.
+ `{{ui.timeInput.value <= "5:00 PM"}}`: Vérifie si l'heure est à 17 h 00 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 à 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, les blocs de code sont exécutés et leur sortie (le cas échéant) est affichée.
## Variables et fonctions globales
App Studio donne accès à certaines variables et fonctions globales qui peuvent être utilisées dans vos JavaScript expressions et vos 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 par programmation les valeurs des composants, vous pouvez créer des interfaces utilisateur dynamiques et interactives qui répondent aux entrées utilisateur et aux modifications des 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 implémentant 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'espace de `ui` noms dans les expressions. En référençant le nom d'un composant, vous pouvez récupérer sa valeur ou effectuer des opérations en fonction de son état.
**Note**
L'espace de `ui` noms n'affichera que les composants sur 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 :`{{ui.componentName}}`.
La liste suivante contient des exemples d'utilisation de l'espace de `ui` 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 utilisateur ou d' enabling/disabling autres composants en fonction de la valeur du champ de texte saisi.
+ `{{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 la valeur true si elle *option1* est sélectionnée, et la valeur false dans le cas contraire. Cela peut être utile pour le rendu conditionnel des composants ou pour effectuer des actions 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é téléchargés ou non.
+ `{{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}`: cette expression filtre la liste des fichiers téléchargés dans le *s3Upload1* composant pour inclure uniquement 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 téléchargés.
### Mise à jour des valeurs des composants d'interface
Pour mettre à jour ou manipuler la valeur d'un composant, utilisez le `RunComponentAction` dans une automatisation. 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'`RunComponentAction`action :
```
RunComponentAction(ui.myInput, "setValue", "New Value")
```
Dans cet exemple, l'`RunComponentAction`étape appelle l'`setValue`action sur le *myInput* composant, en transmettant la nouvelle valeur,*New Value*.
## Utilisation des données d'un tableau
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 de la table à partir de la ligne actuelle de la table. Par exemple, définir le nom d'une action de table, envoyer une valeur de la ligne à une automatisation lancée à partir d'une action ou utiliser les valeurs des colonnes existantes d'une table pour créer une nouvelle colonne.
+ `ui.tableName.selectedRow`et `ui.tableName.selectedRowData` sont tous deux utilisés pour accéder aux données des tables à 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 pour chaque champ. Vous devez l'utiliser `selectedRow` lorsque vous référencez une valeur à partir d'une colonne visible du tableau. Par exemple, si votre table contient une colonne personnalisée ou calculée qui n'existe pas sous forme de 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 faire référence à 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 d'une table dans des expressions :
+ `{{ui.tableName.selectedRow.columnNameWithNoSpace}}`: Renvoie la valeur de la *columnNameWithNoSpace* colonne à partir 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 à partir de la ligne sélectionnée dans le tableau.
+ `{{ui.tableName.selectedRowData.fieldName}}`: Renvoie la valeur du champ d'*fieldName*entité à partir 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 les 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 transférer les valeurs dynamiques des composants de l'interface utilisateur et d'autres automatisations vers des automatisations, afin de les rendre réutilisables et flexibles. Cela se fait à l'aide de paramètres d'automatisation avec l'`params`espace de noms suivant :
`{{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ène 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 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 défini `"2023-06-15T10:30:00.000Z"` comme tel, cette expression sera `"2023-06-22T10:30:00.000Z"` évaluée à la date d'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 aux applications d'exécuter une logique et des opérations côté serveur, telles que l'interrogation de bases de données, l'interaction avec APIs ou la réalisation de transformations de données. L'espace de `results` 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.
1. Si vous avez des actions 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éder`results.action1`.
1. Cela fonctionne également dans les actions côté client. Par exemple, si vous avez un bouton qui déclenche une automatisation à l'aide de l'`InvokeAutomation`action. Vous pouvez ensuite passer à une étape de navigation avec une `Run If` condition telle que naviguer `results.myInvokeAutomation1.fileType === "pdf"` vers une page avec une visionneuse 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'espace de `results` noms.
+ `{{results.stepName.data}}`: Récupérez le tableau de données à partir d'une étape d'automatisation nommée*stepName*.
+ `{{results.stepName.output}}`: Récupère le résultat d'une étape d'automatisation nommée*stepName*.
La manière dont vous accédez aux résultats d'une étape d'automatisation dépend du type d'action et des données renvoyées. 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 de`results.stepName.data`.
+ Pour une action d'appel d'API, vous pouvez accéder au corps de la réponse en utilisant`results.stepName.body`.
+ Pour une action Amazon S3, vous pouvez accéder au contenu du fichier à l'aide de`results.stepName.Body.transformToWebStream()`.
Consultez la documentation relative aux types d'actions spécifiques que vous utilisez pour comprendre la forme des données qu'elles renvoient et comment y accéder dans l'espace de `results` noms. La liste suivante contient quelques exemples
+ `{{results.getDataStep.data.filter(row => row.status === "pending").length}}`: En supposant qu'*getDataStep*il s'agit d'une action d'`Invoke Data Action`automatisation qui renvoie un tableau de lignes de données, cette expression filtre le tableau de données pour inclure uniquement les lignes dont le champ d'état est égal à`pending`, 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 située avant 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 exprimé en secondes, il le multiplie donc par 1000 pour le convertir en millisecondes, ce 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 GetObject`automatisation nommée*stepName*, cette expression extrait le contenu du fichier, qui peut être utilisé par des 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 pour être utilisée dans les composants.
# Dépendances des données et considérations temporelles
Lorsque vous créez des applications complexes dans App Studio, il est essentiel de comprendre et de gérer les dépendances entre les différents composants de données, tels que les formulaires, les vues détaillées et les composants automatisés. Les composants de données et les automatisations peuvent ne pas terminer leur extraction ou leur exécution en même temps, ce qui peut entraîner des problèmes de synchronisation, des erreurs et des comportements inattendus. En étant conscient des problèmes de synchronisation potentiels et en suivant les meilleures pratiques, vous pouvez créer des expériences utilisateur plus fiables et cohérentes dans vos applications App Studio.
Certains problèmes potentiels sont les suivants :
1. **Conflits liés au moment du rendu :** les composants de données peuvent s'afficher dans un ordre qui ne correspond pas à leurs dépendances de données, ce qui peut entraîner des incohérences ou des erreurs visuelles.
1. **Calendrier d'exécution de l'automatisation :** les tâches d'automatisation peuvent se terminer avant que les composants ne soient complètement chargés, ce qui entraîne des erreurs d'exécution.
1. **Pannes de composants :** les composants alimentés par des automatisations peuvent se bloquer en cas de réponses non valides ou lorsque l'automatisation n'est pas terminée.
## Exemple : détails de la commande et informations sur le client
Cet exemple montre comment les dépendances entre les composants de données peuvent entraîner des problèmes de synchronisation et des erreurs potentielles dans l'affichage des données.
Prenons l'exemple d'une application avec les deux composants de données suivants sur la même page :
+ Un composant Detail (`orderDetails`) qui récupère les données de commande.
+ Composant détaillé (`customerDetails`) qui affiche les informations du client relatives à la commande.
Dans cette application, le composant `orderDetails` détaillé comporte deux champs, configurés avec les valeurs suivantes :
```
// 2 text fields within the orderDetails detail component
// Info from orderDetails Component
{{ui.orderDetails.data[0].name}}
// Info from customerDetails component
{{ui.customerDetails.data[0].name}} // Problematic reference
```
Dans cet exemple, le `orderDetails` composant tente d'afficher le nom du client en faisant référence aux données du `customerDetails` composant. Cela pose problème, car le `orderDetails` composant peut être rendu avant qu'il n'ait récupéré ses données. `customerDetails` Si l'extraction des données du `customerDetails` composant est retardée ou échoue, le `orderDetails` composant affichera des informations incomplètes ou incorrectes.
## Meilleures pratiques en matière de dépendance aux données et de synchronisation
Utilisez les meilleures pratiques suivantes pour atténuer les problèmes de dépendance aux données et de synchronisation dans votre application App Studio :
1. **Utiliser le rendu conditionnel :** effectuez le rendu des composants ou n'affichez les données que lorsque vous avez confirmé leur disponibilité. Utilisez des instructions conditionnelles pour vérifier la présence des données avant de les afficher. L'extrait suivant montre un exemple d'instruction conditionnelle :
```
{{ui.someComponent.data ? ui.someComponent.data.fieldName : "Loading..."}}
```
1. **Gérez la visibilité des composants enfants :** pour les composants tels que Stepflow, Form ou Detail qui affichent les enfants avant le chargement de leurs données, définissez manuellement la visibilité des composants enfants. L'extrait suivant montre un exemple de définition de la visibilité en fonction de la disponibilité des données du composant parent :
```
{{ui.parentComponent.data ? true : false}}
```
1. **Utiliser des requêtes de jointure :** dans la mesure du possible, utilisez des requêtes de jointure pour récupérer les données associées dans une seule requête. Cela permet de réduire le nombre d'extractions de données distinctes et de minimiser les problèmes de synchronisation entre les composants de données.
1. **Mettez en œuvre le traitement des erreurs dans les automatisations : mettez** en œuvre une gestion robuste des erreurs dans vos automatisations afin de gérer efficacement les scénarios dans lesquels les données attendues ne sont pas disponibles ou dans lesquels des réponses non valides sont reçues.
1. **Utiliser le chaînage facultatif :** lorsque vous accédez à des propriétés imbriquées, utilisez le chaînage facultatif pour éviter les erreurs si une propriété parent n'est pas définie. L'extrait suivant montre un exemple de chaînage facultatif :
```
{{ui.component.data?.[0]?.fieldSystemName}}
```
# Création d'une application avec plusieurs utilisateurs
Plusieurs utilisateurs peuvent travailler sur une seule application App Studio, mais un seul utilisateur peut modifier une application à la fois. Consultez les sections suivantes pour savoir comment inviter d'autres utilisateurs à modifier une application et comment se comporter lorsque plusieurs utilisateurs essaient de modifier une application en même temps.
## Inviter les créateurs à modifier une application
Suivez les instructions ci-dessous pour inviter d'autres créateurs à modifier une application App Studio.
**Pour inviter d'autres créateurs à modifier une application**
1. Si nécessaire, accédez au studio d'application de votre application.
1. Choisissez **Partager**.
1. Dans l'onglet **Développement**, utilisez la zone de texte pour rechercher et sélectionner les groupes ou les utilisateurs individuels que vous souhaitez inviter à modifier l'application.
1. Pour chaque utilisateur ou groupe, choisissez le menu déroulant et sélectionnez les autorisations à accorder à cet utilisateur ou à ce groupe.
+ **Copropriétaire** : les copropriétaires ont les mêmes autorisations que les propriétaires d'applications.
+ **Modification uniquement** : les utilisateurs dotés du rôle **Modifier uniquement** ont les mêmes autorisations que les propriétaires et les copropriétaires, à l'exception des suivantes :
+ Ils ne peuvent pas inviter d'autres utilisateurs à modifier l'application.
+ Ils ne peuvent pas publier l'application dans les environnements de test ou de production.
+ Ils ne peuvent pas ajouter de sources de données à l'application.
+ Ils ne peuvent ni supprimer ni dupliquer l'application.
## Tentative de modification d'une application en cours de modification par un autre utilisateur
Une seule application App Studio ne peut être modifiée que par un seul utilisateur à la fois. Consultez l'exemple suivant pour comprendre ce qui se passe lorsque plusieurs utilisateurs essaient de modifier une application en même temps.
Dans cet exemple, `User A` est en train de modifier une application et l'a partagée avec`User B`. `User B`tente ensuite de modifier l'application en cours de modification par`User A`.
Lorsque `User B` vous essayez de modifier l'application, une boîte de dialogue apparaît pour les informer que vous `User A` êtes en train de modifier l'application, que le studio d'applications `User A` quittera le studio d'application et que toutes les modifications seront enregistrées. `User B`vous pouvez choisir d'annuler et de laisser `User A` continuer, ou de continuer et d'accéder au studio d'application pour modifier l'application. Dans cet exemple, ils choisissent de modifier l'application.
Lorsqu'il `User B` choisit de modifier l'application, il `User A` reçoit une notification indiquant que la modification de l'application `User B` a commencé et que sa session est terminée. Notez que si l'application `User A` était ouverte dans un onglet de navigateur inactif, il est possible qu'elle ne reçoive pas la notification. Dans ce cas, s'ils essaient de revenir à l'application et d'apporter une modification, ils recevront un message d'erreur et seront invités à actualiser la page, ce qui les ramènera à la liste des applications.
# Afficher ou mettre à jour les paramètres de sécurité du contenu de votre application
Chaque application d'App Studio possède des paramètres de sécurité du contenu qui peuvent être utilisés pour empêcher le chargement de médias ou de ressources externes tels que les images, les PDFs iFrames, ou uniquement autorisés à partir de domaines spécifiques ou URLs (y compris les compartiments Amazon S3). Vous pouvez également spécifier les domaines vers lesquels votre application peut télécharger des objets vers Amazon S3.
Les paramètres de sécurité du contenu par défaut pour toutes les applications sont de bloquer le chargement de tous les médias provenant de sources externes, y compris les compartiments Amazon S3, et de bloquer le téléchargement d'objets vers Amazon S3. Par conséquent, pour charger des images, des iFrames ou des supports similaires, vous devez modifier les paramètres pour autoriser les sources des médias. PDFs En outre, pour autoriser le téléchargement d'objets vers Amazon S3, vous devez modifier les paramètres afin d'autoriser les domaines vers lesquels le téléchargement peut être effectué.
**Note**
Les paramètres de sécurité du contenu sont utilisés pour configurer les en-têtes de la politique de sécurité du contenu (CSP) dans votre application. Le CSP est une norme de sécurité qui permet de protéger votre application contre les scripts intersites (XSS), le clickjacking et d'autres attaques par injection de code. Pour plus d'informations sur le CSP, consultez la section [Politique de sécurité du contenu (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) dans les documents Web MDN.
**Pour mettre à jour les paramètres de sécurité du contenu de votre application**
1. Si nécessaire, accédez au studio d'application de votre application en choisissant de le modifier dans la liste des applications.
1. Choisissez les **paramètres de l'application**.
1. Choisissez l'onglet **Paramètres de sécurité du contenu** pour afficher les paramètres suivants :
+ **Source de cadres** : utilisée pour gérer les domaines à partir desquels votre application peut charger des cadres et des iframes (tels que du contenu interactif ou PDFs) à partir desquels votre application peut charger. Ce paramètre affecte les composants ou ressources d'application suivants :
+ Composant d'intégration iFrame
+ Composant de visualisation de PDF
+ **Source de l'image** : utilisée pour gérer les domaines à partir desquels votre application peut charger des images. Ce paramètre affecte les composants ou ressources d'application suivants :
+ Logo et bannière de l'application
+ composant de visionneuse d'images
+ **Connect source** : permet de gérer les domaines vers lesquels votre application peut télécharger des objets Amazon S3.
1. Pour chaque paramètre, choisissez le paramètre souhaité dans le menu déroulant :
+ **Bloquer tout frames/images/connections** : n'autorisez aucun média (images, cadres PDFs) à se charger, ni aucun objet à être chargé sur Amazon S3.
+ **Tout autoriser frames/images/connections** : autorisez le chargement de tous les médias (images, cadres PDFs) de tous les domaines, ou autorisez le téléchargement d'objets vers Amazon S3 pour tous les domaines.
+ **Autoriser des domaines spécifiques** : autorise le chargement de médias depuis ou le téléchargement de médias vers des domaines spécifiques. Les domaines ou URLs sont spécifiés sous forme de liste d'expressions séparées par des espaces, où des caractères génériques (`*`) peuvent être utilisés pour les sous-domaines, l'adresse d'hôte ou le numéro de port afin d'indiquer que toutes les valeurs légales de chacun sont valides. La spécification correspond `http` également`https`. La liste suivante contient des exemples d'entrées valides :
+ `blob:`: Correspond à tous les blobs, y compris les données de fichiers renvoyées par des actions d'automatisation, telles que le `GetObject` renvoi d'articles depuis des compartiments Amazon S3 ou des images générées par Amazon Bedrock.
**Important**
Vous `blob:` devez inclure dans l'expression que vous avez fournie pour autoriser les données de fichier renvoyées par les actions. Même si votre expression l'est`*`, vous devez la mettre à jour pour `* blob:`
+ `http://*.example.com`: Correspond à toutes les tentatives de chargement depuis n'importe quel sous-domaine de`example.com`. Correspond également `https` aux ressources.
+ `https://source1.example.com https//source2.example.com`: Correspond à toutes les tentatives de chargement à partir `https://source1.example.com` des deux `https://source2.example.com`
+ `https://example.com/subdirectory/`: Correspond à toutes les tentatives de chargement de fichiers dans le répertoire du sous-répertoire. Par exemple, `https://example.com/subdirectory/path/to/file.jpeg`. Cela ne correspond pas`https://example.com/path/to/file.jpeg`.
1. Choisissez **Save** pour enregistrer les changements.