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.

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 qui sont partagées entre plusieurs composants de l'application Studio. Les détails d'implémentation et les cas d'utilisation spécifiques à 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 référencer le composant et ses données à partir d'autres composants ou expressions 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 dollar. Exemples : userNameInput, ordersTable, metricCard1.

Valeur principale, valeur secondaire et valeur

De nombreux composants du studio d'applications 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 valueSecondary value, ou simplementValue, selon le type de composant et son objectif.

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é de manière visible 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 vous 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 de votre application, ce qui permet un affichage de contenu dynamique et piloté par les données.

Syntaxe des expressions

La syntaxe de saisie des expressions dans ces champs suit un modèle cohérent :

{{expression}}

Où se expression trouve une expression valide qui évalue la valeur ou les données souhaitées que vous souhaitez afficher.

Exemple : texte statique

Exemples : Expressions

En utilisant ces champs d'expression, vous pouvez créer du contenu dynamique et basé sur les données dans 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 spécifier 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 saisissez 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 permet de personnaliser l'étiquette pour chaque utilisateur, afin que l'interface soit plus adaptée à 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 libellés 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, afin d'offrir 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 un texte d'indication ou de guidage qui s'affiche dans le composant lorsqu'il est vide. Cela peut aider les utilisateurs à comprendre le format d'entrée 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 saisissez le texte Enter your name dans le champ Espace réservé, le composant s'affiche Enter your name sous forme de texte d'espace réservé.

Exemple : Expressions

Exemple : Services financiers

Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} accountCes exemples extraient les données du compte sélectionné pour afficher des instructions pertinentes, ce qui rend l'interface intuitive pour les clients des banques.

Exemple : E-commerce

Enter the coupon code for {{ui.cartTable.data.currency}} totalL'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 symptomsEn utilisant une expression qui fait 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 : entityexpression, ouautomation.

Entité

La sélection d'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. Ceci 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é :

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 pouvez choisir parmi les requêtes existantes ou en créer une nouvelle.

En sélectionnant une requête, vous pouvez :

Par exemple, si vous avez une Customers entité dans votre application avec des champs tels que NameEmail, etPhoneNumber. 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 NameDescription,Price, etCategory. 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 contenue dans l'action sur les 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 dynamiquement les données pour le composant. Cela est utile lorsque vous devez effectuer des transformations, combiner des données provenant de plusieurs sources ou générer des données en fonction d'une logique métier spécifique.

Quand utiliser la source de données Expression :

Par exemple, si un Metrics composant doit afficher le chiffre d'affaires total du mois en cours, vous pouvez utiliser une expression comme la suivante pour calculer et afficher le revenu 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 :

Par exemple, si vous disposez d'un composant Stepflow qui guide les utilisateurs tout au long du processus de candidature à un emploi. Le composant Stepflow peut être connecté à une automatisation qui gère la soumission des demandes d'emploi, la vérification des antécédents et la génération d'offres. Au fur et à mesure que l'automatisation progresse dans ces étapes, le composant Stepflow peut être mis à jour dynamiquement 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 attrayante à 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. Ceci 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 évaluée à l'un ou l'autre. 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 de votre application.

Exemples d'expressions visibles

Exemple : Afficher ou masquer un champ de saisie de mot de passe en fonction d'une saisie d'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 en fonction d'une sélection déroulante

Supposons que vous disposiez d'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 pour 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 fonction Désactivé si vous permet d'activer ou de désactiver de manière conditionnelle un composant 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}}

Exemples d'expressions if désactivés

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 sera 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 utilisateur, 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.

Disposition 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 :

Orientation

Alignment

Width

La propriété Width spécifie la taille horizontale du composant. Vous pouvez entrer une valeur en 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 spécifie 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 px (sans espacement) et 64 px, avec des incréments de 4 px (par exemple, 4 px, 8 px, 12 px, 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 px (pas de remplissage) et 64 px, avec des incréments de 4 px (par exemple, 4 px, 8 px, 12 px, 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 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.

Composantes de données

Cette section couvre les différents composants de données disponibles dans le studio d'applications, notamment les composants Table, Detail, Metric , Form et Repeater. Ces composants sont utilisés pour afficher, collecter et manipuler les données au sein de votre application.

Table

Le composant Tableau 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 facile à lire.

Propriétés de tableau

Le composant Table partage plusieurs propriétés communes avec d'autres composants, tels que NameSource, etActions. Pour plus d'informations sur ces propriétés, consultezPropriétés communes des composants.

Outre les propriétés courantes, le composant Table possède des propriétés et des options de configuration spécifiquesColumns, notammentSearch and export, etExpressions.

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 :

Rechercher et exporter

Le composant Table propose les options suivantes pour activer ou désactiver les fonctionnalités de recherche et d'exportation :

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.

Pre-fetch limite

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 :

Expressions

Le composant Tableau propose plusieurs zones d'utilisation 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 dynamiquement les données 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 lignes

{{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 :

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'IDtable1. table1Remplacez-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 :

Exemples : Création de colonnes personnalisées

Vous pouvez ajouter des colonnes personnalisées à un tableau 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 de colonne et des JavaScript expressions existantes pour créer de nouvelles colonnes.

Exemples :

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 des colonnes. Cela vous permet d'appliquer une mise en forme ou des transformations personnalisées aux données affichées.

Exemples :

Row-level actions sur les boutons

{{currentRow.columnName}}ou {{currentRow["Column Name"]}} Vous pouvez utiliser ces expressions pour transmettre le contexte de la ligne référencée dans une action au niveau de la ligne, telle que la navigation vers une autre page contenant les données de la ligne sélectionnée ou le déclenchement d'une automatisation avec les données de la ligne.

Exemples :

En tirant parti de ces champs d'expression et de ces fonctionnalités d'action au niveau des lignes, vous pouvez créer des tableaux interactifs hautement personnalisés qui affichent et manipulent les données en fonction de vos besoins spécifiques. En outre, vous pouvez connecter des actions au niveau des lignes à d'autres composants ou automatisations de votre application, pour 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é à la présentation de 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 de modification des données.

Propriétés détaillées

Le composant Detail partage plusieurs propriétés communes avec d'autres composantsName, tels queSource, etActions. Pour plus d'informations sur ces propriétés, consultezPropriétés communes des composants.

Le composant Detail possède également des propriétés et des options de configuration spécifiquesFields, notammentLayout, etExpressions.

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 :

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 détaillés 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 affichera 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"]}}

Exemple : rendu conditionnel

{{ui.table1.selectedRow["colName"]}}: Cette expression renvoie true si la ligne sélectionnée dans le tableau avec l'ID table1 contient des données pour la colonne nomméecolName. Il peut être utilisé pour afficher ou masquer de manière conditionnelle le composant Détail selon que la ligne sélectionnée du tableau est vide ou non.

Exemple :

Vous pouvez utiliser cette expression dans la Visible if propriété du composant Detail pour l'afficher ou le masquer de manière conditionnelle en fonction de la ligne sélectionnée dans le tableau.

{{ui.table1.selectedRow["customerName"]}}

Si cette expression est évaluée à true (la ligne sélectionnée dans le table1 composant possède une valeur pour la customerName colonne), le composant Detail sera visible. Si l'expression est évaluée à faux (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 de manière conditionnelle un emoji basé sur la valeur d'un composant ou d'un champ de données.

Répartition :

Cette expression peut être utilisée pour afficher un emoji ou une valeur spécifique en fonction de 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 des mesures ou des points de données clés sous forme de 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 NameSource, etActions. Pour plus d'informations sur ces propriétés, consultezPropriétés communes des composants.

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 tendancielle

Ce champ vous permet de spécifier la valeur ou l'expression à utiliser pour déterminer la direction et l'amplitude de la tendance. Généralement, il s'agit d'une valeur qui représente le changement ou la performance sur une période donnée.

Exemple :

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}

Cette expression extrait la valeur des revenus d'un mois à l'autre à 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 évaluée à vrai ou à faux.

Exemple :

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}

Cette expression vérifie si la valeur des revenus d'un mois à l'autre 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 évaluée à vrai ou à faux.

Exemple :

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}

Cette expression vérifie si la valeur des revenus d'un mois à l'autre est inférieure à 0, ce qui indique une tendance négative.

Barre de couleur

Ce bouton vous permet d'activer ou de désactiver l'affichage d'une barre colorée pour indiquer visuellement l'état de la tendance.

Exemples de barres de couleurs :

Exemple : tendance des indicateurs de ventes

Exemple : tendance des indicateurs d'inventaire

Exemple : tendance en matière de satisfaction client

En configurant ces propriétés liées aux tendances, vous pouvez créer des composants Metrics 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 mesures 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 pilotées par 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 une valeur de manière dynamique.

Exemple : Référencement d'une valeur principale

{{ui.metric1.primaryValue}}: Cette expression vous permet de référencer la valeur principale du composant Metrics avec l'ID metric1 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'IDmetric1. C'est utile lorsque vous souhaitez afficher une propriété spécifique du premier élément des données.

Répartition :

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'IDmetric1. C'est utile lorsque vous souhaitez afficher le nombre d'éléments dans les données.

Répartition :

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 vous permet de générer et d'afficher une collection 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 motifs répétitifs dans l'interface utilisateur de votre application. Voici quelques exemples de cas d'utilisation :

Le composant Repeater se différencie du composant Table grâce à un contenu riche. Un composant Tableau 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 NameSource, etActions. Pour plus d'informations sur ces propriétés, consultezPropriétés communes des composants.

Outre les propriétés communes, le composant Repeater 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 des propriétés ou des valeurs de l'élément actuel à l'aide d'expressions du 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

Lignes par page

Spécifiez le nombre de lignes à afficher par page dans la mise en page de la liste. La pagination est fournie pour les éléments qui dépassent le nombre de lignes spécifié.

Colonnes et lignes par page (grille)

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 Repeater personnalisés et interactifs qui se connectent parfaitement aux données et à la logique de votre application.

Exemple : Référencement d'éléments

Exemple : affichage d'une liste de produits

Exemple : génération d'une grille d'avatars d'utilisateurs

En utilisant ce Repeater composant, vous pouvez créer des interfaces utilisateur dynamiques et pilotées par les données, ce qui rationalise le processus de rendu des collections d'éléments et réduit le besoin de répétition manuelle ou de codage en dur.

Formulaire

Le composant Form est conçu pour capturer les entrées des utilisateurs et faciliter les tâches de saisie de données dans votre application. Il fournit une mise en page structurée pour l'affichage des champs de saisie, des listes déroulantes, des cases à cocher et d'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 à l'intérieur d'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 NameSource, etActions. Pour plus d'informations sur ces propriétés, consultezPropriétés communes des composants.

Générer un formulaire

La fonction Générer un formulaire permet de créer rapidement des 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 qui doivent afficher un grand nombre de champs.

La fonction Générer un formulaire est particulièrement utile lorsque vous disposez d'un modèle de données bien défini ou d'un ensemble d'entités dans votre application pour lequel vous devez capturer les entrées des utilisateurs. En générant automatiquement les champs du formulaire, vous pouvez gagner du temps et garantir la cohérence des formulaires de votre application.

Après avoir utilisé la fonction Générer un formulaire, vous pouvez personnaliser davantage la mise en page, les actions et les expressions du composant 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 :

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.

Stepflow

Le composant Stepflow est conçu pour guider les utilisateurs tout au long des processus ou des flux de travail en plusieurs étapes au sein de votre application. Il fournit une interface structurée et intuitive permettant de 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 NameSource, etActions. Pour plus d'informations sur ces propriétés, consultezPropriétés communes des composants.

Le composant Stepflow possède des propriétés et des options de configuration supplémentaires, telles que Step NavigationValidation, etExpressions.

Composants de l'IA

Gen 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 avec l'IA à l'aide du chat dans le studio d'application. Lorsque vous utilisez le chat pour créer des composants, ceux-ci sont regroupés dans un conteneur Gen AI. Pour plus d'informations sur la modification ou l'utilisation de ce composant, consultezCréation ou modification de votre application.

Composantes du & numéro de texte

Saisie de texte

Le composant de saisie de texte permet aux utilisateurs de saisir et de soumettre des données textuelles dans votre application. Il fournit un moyen simple et intuitif de capturer les entrées de l'utilisateur, telles que les noms, les adresses ou toute autre information textuelle.

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.

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.

Mot de passe

Le composant Password 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é.

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 dans l'application.

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.

Nombre

Le composant Number est un champ de saisie conçu spécifiquement pour permettre aux utilisateurs de 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é.

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.

Paire de détails

Le composant Detail pair est utilisé pour afficher des paires clé-valeur ou des paires d'informations associées 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.

Composantes de sélection

Basculement

Le composant Switch est une commande d'interface utilisateur qui permet aux utilisateurs de basculer entre deux états ou options, tels que on/off true/false, ou 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'une simple pression.

Groupe de commutateurs

Le composant Switch group est un ensemble de commandes de commutateur individuelles qui permettent aux utilisateurs de sélectionner une ou plusieurs options dans 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.

Champs d'expression de groupe de commutateurs

Groupe de cases à cocher

Le composant du groupe Checkbox présente aux utilisateurs un groupe de cases à cocher, leur permettant de sélectionner plusieurs options simultanément. Il est utile lorsque vous souhaitez permettre aux utilisateurs de choisir un ou plusieurs éléments dans une liste d'options.

Champs d'expression de groupe de cases à cocher

Groupe de 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 ainsi 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.

Sélection unique

Le composant Sélection unique 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 dans lesquels 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

Sélection multiple

Le composant de sélection multiple est similaire au composant de sélection unique mais permet aux utilisateurs de sélectionner plusieurs options simultanément à partir d'une liste de choix. Il est utile lorsque les utilisateurs doivent effectuer plusieurs sélections parmi un ensemble d'options prédéfinies, telles que la sélection de plusieurs balises, centres d'intérêt ou préférences.

Champs d'expression à sélection multiple

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 :

Ces composants de bouton partagent les propriétés communes suivantes :

Contenu

Type

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 :

Triggers

Lorsque vous cliquez sur le bouton, vous pouvez configurer une ou plusieurs actions à déclencher. Les types d'actions disponibles sont les suivants :

JavaScript propriétés des boutons d'action

Sélectionnez le type JavaScript d'action pour exécuter un JavaScript 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 cliquez sur le bouton.

État : Exécutez 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.

Lien hypertexte

Le composant Hyperlink fournit un lien cliquable pour accéder à des URL externes ou à des itinéraires d'application internes.

Propriétés des liens hypertextes

Contenu

URL

URL de destination du lien hypertexte, qui peut être un site Web externe ou un itinéraire d'application interne.

Triggers

Lorsque vous cliquez sur le lien hypertexte, vous pouvez configurer une ou plusieurs actions à déclencher. Les types d'actions 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 NameSource, etValidation. Pour plus d'informations sur ces propriétés, consultezPropriétés communes des composants.

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

Value

Date minimale

Date maximale

Type de calendrier

Dates désactivées

Comportement

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 :

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 :

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 temporels répondant aux exigences spécifiques de votre application, telles que la restriction de la plage horaire 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 NameSource, etValidation. Pour plus d'informations sur ces propriétés, consultezPropriétés communes des composants.

Outre les propriétés communes, le composant Time possède les propriétés spécifiques suivantes :

Intervalles de temps

Value

Placeholder

Durée minimale

Durée maximale

Horaires réservés aux personnes handicapées

Configuration des horaires désactivés

Vous pouvez utiliser la section Heures désactivées pour spécifier les valeurs temporelles qui ne doivent pas être sélectionnées.

Source

Exemple d'expression :

{{currentRow.column === "Lunch Break"}}

Cette expression est désactivée chaque fois que la colonne « Pause déjeuner » 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

Validation

Par exemple :

{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}

Cette expression vérifie si l'heure saisie est 9h00 ou 9h30. Si la condition est vraie, la validation échouera.

Vous pouvez également fournir un message de validation personnalisé à afficher lorsque la validation n'est pas atteinte :

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 :

Exemple : valeur temporelle

Exemple : comparaison temporelle

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 Date Range, 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 NameSource, etValidation. Pour plus d'informations sur ces propriétés, consultezPropriétés communes des composants.

Outre les propriétés courantes, le composant Date Range possède les propriétés spécifiques suivantes :

Format

Date de début

Date de fin

Placeholder

Date minimale

Date maximale

Type de calendrier

Jours obligatoires sélectionnés

Dates désactivées

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 :

Exemple : calcul de la différence de date

Exemple : visibilité conditionnelle basée sur une plage de dates

Exemple : dates désactivées en fonction des données de ligne actuelles

Validation personnalisée

Composantes multimédia

Le studio d'applications fournit plusieurs composants permettant d'intégrer et d'afficher différents types de médias dans votre application.

Intégrer un iFrame

Le composant d'intégration iFrame 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 d'iFrame

URL

URL du contenu externe ou de l'application que vous souhaitez intégrer.

Disposition

Téléchargement S3

Le composant de téléchargement S3 permet aux utilisateurs de télécharger des fichiers vers 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 sur les fichiers chargés dans la logique et l'interface utilisateur de votre application.

Propriétés de téléchargement S3

Configuration S3

Configuration du téléchargement de fichiers

Validation

Triggers

Champs d'expression de téléchargement S3

Le composant de téléchargement S3 fournit les champs d'expression suivants :

Expressions et exemples

Exemple : accès aux fichiers téléchargés

Exemple : validation des téléchargements de fichiers

Exemple : déclenchement d'actions

Ces expressions vous permettent d'accéder aux fichiers 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 de fichiers. En utilisant ces expressions, vous pouvez créer un comportement plus dynamique et intelligent au sein de la fonctionnalité de téléchargement de fichiers de votre application.

Composant de visualisation de PDF

Le composant de visualisation de PDF 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 de saisie pour la source PDF. Le composant de visualisation PDF offre une flexibilité quant à la manière dont vous pouvez intégrer des documents PDF dans votre application, que ce soit à partir d'une URL statique, d'un URI de données en ligne ou de contenu généré dynamiquement.

Propriétés de la visionneuse PDF

Source

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 visualiseur PDF à une entité de données contenant le document PDF.

URL

Spécifiez l'URL du document PDF.

URL

Vous pouvez saisir une URL qui pointe 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 des PDF) 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 visualiseur PDF à une automatisation qui fournit le document PDF.

Actions

Disposition

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

Texte alternatif

Description textuelle alternative de l'image, qui est utilisée à des fins d'accessibilité.

Disposition