- Vue d'ensemble (Overview)
- Légende (Callout)
- Scénarios complexes
- Identifiants
- Data Service
- Notes de publication
- À propos du package d'activités Data Service
- Compatibilité du projet
- Créer un enregistrement d’entité
- Supprimer un enregistrement d’entité
- Obtenir un enregistrement d’entité à partir d’un identifiant
- Rechercher des enregistrements d’entités
- Mettre à jour un enregistrement d’entité
- Télécharger le fichier vers le champ d’enregistrement
- Télécharger le fichier à partir du champ d'enregistrement
- Supprimer le fichier à partir du champ d’enregistrement
- Créer plusieurs enregistrements d’entités
- Mettre à jour plusieurs enregistrements d’entités
- Supprimer plusieurs enregistrements d’entités
- Formulaire
- Notes de publication
- Compatibilité du projet
- Formulaires en temps réel
- Mettre à jour les données du formulaire
- Exécuter des formulaires à l'aide de JavaScript
- Personnaliser des formulaires à l'aide de CSS
- Composants conditionnels
- Ajout de plusieurs composants sur la même ligne dans les colonnes
- Utilisation du composant Table de données (Data Table)
- Obtenir le chemin d'accès au fichier/dossier
- Lecture des valeurs de cellule à partir d'un composant Data Grid
- Affichage des fichiers PDF
- Affichage d'images dans les formulaires
- Faire défiler les grilles de données
- Utilisation des outils de développement avec des formulaires
- Calculer les valeurs des composants du formulaire
- Gestion des dates dans les formulaires
- Ouvrir des hyperliens dans des formulaires
- Affichage d'un onglet par défaut dans les formulaires
- Affichage du libellé complet d'un composant
- Recherche de longues chaînes dans des listes déroulantes
- À propos de l'expérience de formulaire antérieure à la version 23.4
- Compatibilité du Projet
- Formulaires en temps réel
- Cases à cocher dynamiques
- Listes déroulantes conditionnelles
- Afficher un onglet par défaut
- Affichage des images
- Affichage des fichiers PDF
- Affichage de l'étiquette complète
- Éléments HTML dynamiques
- Gérer des dates
- Rechercher des chaînes longues dans des listes déroulantes
- Personnaliser des formulaires à l'aide de fichiers CSS locaux
- Exécuter le bloc Do sur changement de case à cocher
- Personnaliser la largeur des colonnes
- Mettre à jour les données du formulaire
- Réinitialiser les données de collecte
- Logique avancée
- Exécuter le bloc Do lors du changement d'option de la liste déroulante
- Lecture des valeurs de cellule à partir d'un composant Data Grid
- Composants conditionnels
- Faire défiler les composants Data Grid
- Utiliser le composant Grille
- Outils de développement
- Valeur calculée
- Listes déroulantes dynamiques
- Changer d'onglet en un clic
- Ouvrir des hyperliens dans un formulaire
- FTP
- IPC
- Persistance
- Notes de publication
- Compatibilité du projet
- À propos du package d'activités Persistence
- Concepteur de formulaires en série
- Start Job And Get Reference
- Attendre le travail et reprendre
- Add Queue Item And Get Reference
- Wait For Queue Item And Resume
- Wait for Form Task and Resume
- Reprendre après le délai
- Assign Tasks
- Create External Task
- Wait For External Task and Resume
- Complete Task
- Forward Task
- Get Form Tasks
- Get Task Data
- Add Task Comment
- Update Task Labels
- Créer une tâche d'application
- Attendre la tâche d'application et reprendre (Wait For App Task and Resume)
- Travailler avec des tâches d'application
- Création de votre première action de formulaire
- Commandes avancées pour les listes déroulantes
- Incorporation d'objets dans des actions de formulaire
- Autoriser les utilisateurs à charger des fichiers dans le compartiment de stockage
- Ajout d'une logique avancée à l'aide de Java Script
- Définition d'un onglet par défaut
- Suppression du bouton Supprimer de Modifier la grille à l'aide du CSS personnalisé
- Personnalisation des modèles de grille
- Utilisation de boutons pour déclencher une logique personnalisée
- Utilisation d'une mise en page de formulaire externe
- Développer dynamiquement les composants de formulaire en runtime
- Exemple de workflows
- Pipelines d'Automation Ops
- Système
- Notes de publication
- À propos du package d'activités System
- Compatibilité du projet
- Assistant Générateur de RegEx
- Le texte correspond-il
- Trouver des modèles correspondants
- Modify Text
- Modify Date
- Replace Matching Patterns
- Text to Left/Right
- Ajouter une colonne de données (Add Data Column)
- Ajouter une ligne de données (Add Data Row)
- Créer une table de données (Build Data Table)
- Supprimer la table de données (Clear Data Table)
- Obtenir l'élément de ligne (Get Row Item)
- Update Row Item
- Fusionner la table de données (Merge Data Table)
- Table de données de sortie (Output Data Table)
- Supprimer la colonne de données (Remove Data Column)
- Supprimer la ligne de données (Remove Data Row)
- For Each Row in Data Table
- Generate Data Table From Text
- Create List
- Append Item to List
- Read List Item
- Update List Item
- Ajouter les champs du journal (Add Log Fields)
- Commenter/Activités désactivées
- Commentaire (Comment)
- Change type
- Consigner le message (Log Message)
- Supprimer les champs du journal (Remove Log Fields)
- Appeler la méthode Com (Invoke Com Method)
- Valeur de format (Format Value)
- Table de données de recherche (Lookup Data Table)
- Filtrer la table de données (Filter Data Table)
- Trier la table de données (Sort Data Table)
- Supprimer les lignes dupliquées (Remove Duplicate Rows)
- Tables de données de jointure (Join Data Tables)
- État du rapport (Report Status)
- Ajouter une ligne (Append Line)
- Compress/Zip Files
- Copier le fichier (Copy File)
- Copy Folder
- Créer un dossier (Create Folder)
- Créer le fichier (Create File)
- Supprimer (Delete)
- Le fichier existe déjà
- Folder Exists
- Extract/Unzip Files
- Wait for Download
- Déclencheur de changement de fichier (File Change Trigger)
- For Each File In Folder
- For Each Folder in Folder
- Delete File
- Delete Folder
- Déplacer le fichier (Move File)
- Move Folder
- Rename Folder
- Rename File
- Le chemin d'accès existe (Path Exists)
- Lire le fichier texte
- Écrire un fichier texte (Write Text File)
- Obtenir des informations sur les fichiers
- Get Folder Info
- Récupérer les processus (Get Processes)
- Récupérer le nom d'utilisateur/mot de passe
- Processus d'arrêt forcé (Kill Process)
- Bip (Beep)
- Récupérer le dossier d'environnement (Get Environment Folder)
- Récupérer la variable d'environnement (Get Environment Variable)
- Appeler Power Shell (Invoke Power Shell)
- Boîte de dialogue (Input Dialog)
- Zone de message (Message Zone)
- Browse for file
- Browse for folder
- Invoke VBScript
- Process End Trigger
- Process Start Trigger
- Déclencheur de changement de fichier v3
- Étendue du déclencheur
- Repeat Number Of Times
- Texte en majuscules/minuscules
- Set Environment Variable
- Pour chaque (For Each)
- Boucle d'arrêt / sortie
- Étendue de nouvelle tentative (Retry Scope)
- Cocher Vrai (Check True)
- Cocher Faux (Check False)
- Workflow Placeholder
- Appeler le fichier de flux de travail (Invoke Workflow File)
- Launch Workflow Interactive
- Appeler le code (Invoke Code)
- Continuer / Ignorer actuel
- Multiple Assign
- Invoke Process
- Run Parallel Process
- While
- Faire pendant (Do While)
- Repeat Number Of Times
- Déclencher l'alerte (Raise Alert)
- Requête HTTP Orchestrator
- Obtenir l'actif (Get Asset)
- Obtenir les informations d'identification / Obtenir les informations d'identification Orchestrator
- Définir l'actif (Set Asset)
- Définir l'identifiant (Set Credential)
- Obtenir les tâches (Get Jobs)
- Get Current Job Info
- Démarrer la tâche (Start Job)
- Arrêter la tâche (Stop Job)
- Ajouter un élément de file d'attente (Add Queue Item)
- Ajouter un élément de transaction (Add Transaction Item)
- Supprimer les éléments de file d'attente (Delete Queue Items)
- Obtenir les éléments de file d'attente (Get Queue Items)
- Obtenir l'élément de transaction (Get Transaction Item)
- Différer l'élément de transaction (Postpone Transaction Item)
- Définir la progression de la transaction (Set Transaction Progress)
- Définir l'état de transaction (Set Transaction Status)
- Devrait s'arrêter (Should Stop)
- Wait Queue Item
- Bulk Add Queue Items
- Écrire le texte de stockage
- Télécharger le fichier de stockage
- Répertorier les fichiers de stockage
- Lire le texte de stockage
- Télécharger le fichier de stockage
- Supprimer le fichier de stockage
- Custom Input
- Append Item to Collection
- Build Collection
- Collection to TableDonnées
- Exists In Collection
- Filter Collection
- Merge Collections
- Remove From Collection
- Reset Timer
- Resume Timer
- Start Timer
- Stop Timer
- Timeout Scope
- Manual Trigger
- When New Item Added to Queue
- Arrêter les déclencheurs locaux
- Exécuter les déclencheurs locaux
- Répéter le déclencheur
- Déclencheur de temps
- Désactiver le déclencheur local
- Activer le déclencheur local
- Notifier la modification de la variable globale
- Déclencheur de modification de variable globale
- Extraire le texte
- Rechercher et remplacer
- Retour
- Extraire la date et l'heure du texte (Extract Date and Time from Text)
- Modifier la casse du texte
- Add or Subtract from Date
- Télécharger le fichier à partir de l'URL
- Formater la date en tant que texte
- Fractionner le texte
- Combiner du texte
- Ajouter une ligne de données (Add Data Row)
- AddQueueItem
- Ajouter un élément de transaction (Add Transaction Item)
- Ajouter une ligne
- BulkAddQueueItems
- Supprimer la table de données (Clear Data Table)
- CompresserFichiersZip
- Copy File
- Create File
- Créer un dossier (Create Folder)
- Delete file or folder
- Delete Queue Items
- Supprimer le fichier de stockage
- Télécharger le fichier de stockage
- Extraire les fichiers de décompression
- Filtrer la table de données (Filter Data Table)
- Obtenir l'actif (Get Asset)
- Obtenir l'identifiant (Get Credential)
- GetJobs
- Get Queue Item
- GetQueueItems
- Obtenir la ressource pour le chemin d'accès local
- Obtenir l'élément de ligne (Get Row Item)
- Obtenir l'élément de transaction (Get Transaction Item)
- Invoke Process
- Tables de données de jointure (Join Data Tables)
- Répertorier les fichiers de stockage
- Table de données de recherche (Lookup Data Table)
- Fusionner la table de données (Merge Data Table)
- Move File
- Requête HTTP Orchestrator
- OutputDataTable
- Le chemin d'accès existe (Path Exists)
- Différer l'élément de transaction (Postpone Transaction Item)
- Lire le texte de stockage
- Lire le fichier texte
- Supprimer la colonne de données (Remove Data Column)
- Supprimer les lignes dupliquées (Remove Duplicate Rows)
- Remplacer (Replace)
- Définir l'actif (Set Asset)
- Définir l'identifiant (Set Credential)
- SetTransactionProgress
- Définir l'état de transaction (Set Transaction Status)
- Trier la table de données (Sort Data Table)
- Démarrer la tâche (StartJob)
- Arrêter la tâche (StopJob)
- Update Row Item
- Télécharger le fichier de stockage
- Wait Queue Item
- Écrire le texte de stockage
- Écrire un fichier texte
- Test
- Notes de publication
- Compatibilité du projet
- À propos du package d'activités Testing
- Le nom du cas de test n'est pas unique dans ce projet
- La convention d'affectation de noms du cas de test est incorrecte
- Vérifications manquantes dans le cas de test
- Workflows non testés
- Connecté à Test Manager
- Simulation inutilisée
- Cas de test sans annotation
- Le cas de test/workflow est trop complexe
- Le cas de test comprend trop de branches
- Paramètres du projet
- Add Test Data Queue Item
- Adresse
- Attach Document
- Bulk Add Test Data Queue Items
- Delete Test Data Queue Items
- Get Test Data Queue Item
- Get Test Data Queue Items
- Prénom
- Nom de famille
- Random Date
- Random Number
- Random String
- Random Value
- Verify Control Attribute
- Verify Expression
- Verify Expression with Operator
- Verify Range
- Adresse
- Add Test Data Queue Item
- Attach Document
- Bulk Add Test Data Queue Items
- Delete Test Data Queue Items
- Get Test Data Queue Item
- Get Test Data Queue Items
- GivenName
- Nom
- Random Date
- Random Number
- Random String
- Random Value
- VerifyAreEqual
- VerifyAreNotEqual
- VerifyContains
- Verify Expression
- Verify Expression with Operator
- VerifyIsGreater
- VerifyIsGreaterOrEqual
- VerifyIsLess
- VerifyIsLessOrEqual
- VerifyIsRegexMatch
- Verify Range
- Workflow Events
- Workflow Foundation
- À propos du package d’activités Workflow Foundation
- Attribuer/Définir la valeur de la variable
- Retard (Delay)
- Si (If)
- Sinon si
- Séquence / Groupe
- Commutateur (Switch)
- Décision de flux (Flow Decision)
- Commutateur de flux (Flow Switch)
- Diagramme de flux (Flowchart)
- Essayer de capturer
- Machine d'état (State Machine)
- État (State)
- Transition
- État final (Final State)
- Single Excel Process Scope
- No Persist Scope
- Cancellation Scope
- Ligne d'écriture (Write Line)
Logique avancée
L'onglet Logique du Concepteur de formulaires (Form Designer) vous permet de créer des conditions et des scripts logiques avancés qui peuvent modifier l'état ou le comportement du composant de formulaire sélectionné.
À l'aide d'une logique avancée, vous pouvez modifier dynamiquement les commandes, l'apparence et la convivialité d'un composant de formulaire.
Une logique de formulaire se compose de deux parties : le déclencheur et l'action.
Déclencheur Le déclencheur logique est la condition sur laquelle les Actions sont exécutées. Par exemple, vous pouvez afficher un champ de formulaire spécifique uniquement lorsqu'une option de case à cocher est sélectionnée. Dans ce cas, l'option de case à cocher est le déclencheur, et l'affichage du champ de formulaire est Actions.
Il existe quatre types de déclencheurs logiques :
Type de déclencheur |
Description |
Exemple |
---|---|---|
Simple |
Vous définissez un composant et une valeur de formulaire de déclenchement. | |
Javascript |
Vous fournissez une logique JavaScript pour un composant de formulaire ou des données de formulaire. Utilisez la syntaxe JavaScript pour créer une logique complexe, telle qu'une boucle ou un comportement dynamique. | |
Logique JSON |
Vous fournissez une logique JSON pour un composant de formulaire ou des données de formulaire. Recommandé dans les cas où JavaScript n'est pas autorisé. Ne peut pas prendre en charge les boucles ou les comportements dynamiques. | |
Événement (Event) |
Vous définissez un événement de composant qui, une fois émis par le composant correspondant, déclenche l'action souhaitée. |
Action
L'action logique est le comportement du composant de formulaire qui doit se produire en fonction des conditions logiques que vous définissez (c'est-à-dire le déclencheur). Par exemple, vous souhaiterez peut-être activer un bouton pour les utilisateurs d'un âge spécifique. Dans ce cas, la tranche d’âge est le déclencheur, et l’activation du bouton est l’action.
Il existe quatre types d’actions logiques :
Type d'action |
Description |
Exemple |
---|---|---|
Propriété |
Le déclencheur modifie l'une des propriétés de composant disponibles, telles que l'info-bulle, la description, la classe CSS, etc. Les propriétés disponibles dépendent du type de composant déclencheur. | |
Valeur (Value) |
Le déclencheur modifie la valeur du composant correspondant. L'action doit être définie à l'aide de la syntaxe JavaScript. | |
Schéma des composants de la fusion |
Le déclencheur modifie les paramètres de schéma de composant trouvés dans le composant JSON. Pour voir les paramètres de schéma que vous pouvez modifier, survolez le composant correspondant et cliquez sur Modifier le JSON ( Edit JSON). Vous pouvez modifier plusieurs paramètres en une seule action. | |
Action personnalisée |
Vous définissez une action personnalisée à l'aide de la syntaxe JavaScript, de la même manière que vous définiriez le type de déclencheur JavaScript. |
Pour configurer une logique avancée :
- Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).
- Faites glisser et déposez les composants dans votre formulaire. Faites attention à leurs clés de champ, car vous pourriez les utiliser dans votre logique avancée.
- Accédez à l'onglet Logique (Logic) du composant que vous souhaitez modifier (c'est-à-dire le composant sur lequel les Actions doivent avoir lieu).
- Cliquez sur + Ajouter une logique (Add Logic). Vous pouvez ajouter autant de logiques que vous le souhaitez.
- Saisissez un nom pour votre logique.
- Dans le volet Déclencheur (Trigger), sélectionnez le type de déclencheur que vous souhaitez utiliser dans votre logique. Les types disponibles sont Simple, Javascript, JSON Logicet Event. Définissez les conditions souhaitées pour déclencher l’action.
- Dans le volet Actions , cliquez sur +Ajouter des Actions. Vous pouvez ajouter autant d' Actions que vous le souhaitez, toutes déclenchées par la logique qui les regroupe.
- Saisissez un nom pour votre action.
- Sélectionnez le type d'action que vous souhaitez utiliser. Les types disponibles sont Propriété, Valeur, Merge Component Schemaet Action personnalisée. Définissez l'effet souhaité de votre action.
- Lorsque vous avez terminé, cliquez sur Enregistrer les actions ( Save Actions).
- Pour enregistrer votre logique, cliquez sur Enregistrer la logique ( Save Logic).
La procédure ci-dessus s'applique de manière générique à tout type de déclencheur ou d'action. Pour obtenir une procédure détaillée, consultez les tutoriels spécifiques, qui fournissent des exemples de chaque type de déclencheur et d'action spécifique
- Type de déclencheur : Javascript & Type d' Actions : valeur Résumant dynamiquement deux champs de texte
- Type de déclencheur : Simple Type d' Actions et d'actions : Propriété Masquage dynamique d'un champ
- Type de déclencheur : Simple et Type d' Actions : Schéma de composants de fusion ( Merge Component Schema ) Modification dynamique de la couleur du titre
- Type de déclencheur : Type d' événement et d'action : Action personnalisée Définition d'un champ de formulaire par défaut à l'aide d'événements
- Type de déclencheur : JSON Type de logique et d' Actions : Propriété Affichage d'un composant basé sur l'entrée de l'utilisateur
Type de déclencheur : JavaScript Type d'action : Valeur
Cette logique avancée résume deux champs de texte, en fonction de la condition selon laquelle l'utilisateur interagit avec les champs de texte correspondants.
- Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).
- Faites glisser et déposez trois composants Champ de texte (Text Field ) dans votre formulaire.
-
Nommez deux des composants de champ de texte
A
etB
, et nommez le troisièmeTotal
. Faites attention à leurs clés de champ, car vous les utilisez dans votre logique avancée.Vous pouvez éventuellement définir le composant de champ de texteTotal
sur Désactivé ( Disabled) afin que les utilisateurs professionnels ne puissent pas interagir avec lui. - Accédez à l'onglet Logique (Logic) du composant de champ
Total
. - Ajoutez une logique et nommez-la « somme dynamique ».
-
Sélectionnez le type de déclencheur Javascript et entrez le script suivant dans la section Zone de texte (Text Area) :
result = true; return result;
result = true; return result;L'extrait ci-dessus détecte s'il y a des changements dans les champs de texte, c'est-à-dire si l'utilisateur interagit avec les champs de texte, et déclenche les Actions pour résumer les champs.
- Ajoutez une action et nommez-la « a+b ».
-
Sélectionnez le type d'action Valeur (Value) et entrez le script suivant dans la section Valeur (Javascript) :
result = (+data.a) + (+data.b); return result;
result = (+data.a) + (+data.b); return result;Remplaceza
etb
par les valeurs de clés de champ des composants de champ de texte. - Enregistrez l'action et la logique.
- Enregistrez le composant.
A
et B
, le champ Total
est automatiquement rempli, affichant la somme de A et B.
Type de déclencheur : Type d' Actions simples : Propriété
Child field
) lorsque l'utilisateur saisit « masquer » dans un autre champ de formulaire (c'est-à-dire, Parent field
).
- Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).
- Faites glisser et déposez deux composants Champ de texte (Text Field ).
- Nommez l’un des composants du champ de texte
Parent field
et l’autreChild field
. Faites attention à leurs clés de champ, car vous les utilisez dans votre logique avancée. - Accédez à l'onglet Logique du composant
Child field
. - Ajoutez une logique et nommez-la « Hide input (Masquer l’entrée) ».
-
Sélectionnez le type de déclencheur simple .
6.1. À partir du menu déroulant Lorsque le composant de formulaire , sélectionnezParent field ({parentField_field_key})
.6.2. Dans le champ A la valeur ( Has the value ), entrez « masquer ».
La configuration ci-dessus détecte si l'utilisateur a saisi la chaîne « hide » dans le champ parent et déclenche l'action pour masquer le champ enfant.
- Ajoutez une action et nommez-la « Hide (Masquer) ».
-
Sélectionnez le type Actions de propriété ( Property Actions ).
8.1. Dans le menu déroulant Propriété du composant ( Component Property ), sélectionnez Masqué ( Hidden) .
8.2. Dans le menu déroulant Définir l' état (Set State ), sélectionnez Vrai(True).
- Enregistrez l'action et la logique.
- Enregistrez le composant.
Au moment de l'exécution, si l'utilisateur professionnel saisit « hide » (masquer) dans le champ parent, le champ enfant devient masqué.
Type de déclencheur : Type d' Actions simples : Schéma de composant de fusion
Cette logique avancée modifie la couleur de l'étiquette d'un composant de champ de texte lorsque l'utilisateur sélectionne la couleur souhaitée dans une liste. La modification s'applique à l'aide d'un fichier CSS personnalisé.
Prérequis :
Créez un fichier CSS contenant la nouvelle couleur du libellé du champ de texte et référencez-la dans l'activité Créer un formulaire (Create Form), dans la propriété d'activité LocalCSSFilePath .
Par exemple, l'extrait de code CSS ci-dessous contient une classe qui définit la couleur du libellé sur vert ou rouge :
.textFieldLabel-green
{
color : green;
}
.textFieldLabel-red
{
color : red;
}
.textFieldLabel-green
{
color : green;
}
.textFieldLabel-red
{
color : red;
}
Après avoir référencé le fichier CSS dans les propriétés Créer un formulaire (Create Form), concevez votre formulaire en suivant les étapes ci-dessous :
- Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).
- Faites glisser et déposez un composant Champ de texte (Text Field ) et un composant Radio (Radio). Faites attention à leurs clés de champ, car vous les utilisez dans votre logique avancée.
-
Dans l'onglet Affichage (Display) du composant de champ de texte, définissez une Classe CSS personnalisée ( Custom CSS Class) par défaut. Par exemple, pour définir le rouge comme couleur par défaut du champ de texte, utilisez la classe
textFieldLabel-red
. La classe doit être définie dans le fichier CSS à partir des prérequis documentés ci-dessus. - Pour le composant Radio , ajoutez deux valeurs pour les couleurs
green
etred
. - Accédez à l'onglet Logique (Logic) du composant Champ de texte (Text Field ).
- Ajoutez une logique et nommez-la « sélection de couleur ».
-
Sélectionnez le type de déclencheur simple .
7.1. À partir du menu déroulant Lorsque le composant de formulaire , sélectionnezRadio ({radio_field_key})
.7.2. Dans le champ A la valeur ( Has the value ), saisissez « vert ».
La configuration ci-dessus détecte si l'utilisateur sélectionne « vert » dans les options radio et déclenche l'action pour modifier la couleur du libellé du champ de texte.
- Ajoutez une action et nommez-la "change color using css".
-
Sélectionnez le type Actions de composant de schéma ( Merge Schema Component Actions ) et saisissez l'extrait suivant :
return { customClass: "textFieldLabel-green" }
return { customClass: "textFieldLabel-green" } - Enregistrez l'action et la logique.
- Enregistrez le composant.
Au moment de l'exécution, si l'utilisateur professionnel sélectionne le bouton radio « vert », le libellé du champ de texte devient vert. Si l'utilisateur sélectionne le bouton radio « rouge », le libellé du champ de texte devient rouge.
Type de déclencheur : Événement Type d'action : Action personnalisée
Cette logique avancée modifie le contenu d'un champ de texte lorsque l'utilisateur clique sur un bouton. Le bouton émet un événement en fonction duquel le contenu du champ de texte devient un texte par défaut.
- Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).
- Faites glisser et déposez un composant Text Field et un composant Button . Faites attention aux clés de champ des composants, car vous les utilisez dans votre logique avancée.
-
Dans l'onglet Affichage du composant Bouton :
3.1. Étiqueter le composant de bouton commeChange value to "Default"
3.2. Définir les Actions du bouton en tant que clic ( Click)
3.3. Cochez la case Utiliser pour la mise à jour locale.
3.4. Saisissez l'extrait suivant dans la section Mettre à jour la logique des données (Update Data Logic) . Cela émettra l'événement appeléresetTextField
chaque fois que l'utilisateur clique sur le bouton.instance.emit('resetTextField', {});
instance.emit('resetTextField', {});3.5. Enregistrez le composant de bouton.
- Accédez à l'onglet Logique du composant de champ de texte.
- Ajoutez une logique et nommez-la « reset ».
- Sélectionnez le type de déclencheur d' événement .
-
Dans le champ Nom de l' événement (Event Name ), saisissez le nom de l'événement émis lorsque vous cliquez sur le bouton. (c'est-à-dire
resetTextField
).La configuration ci-dessus détecte lorsque l'utilisateur clique sur le boutonChange value to "Default"
et remplace le contenu existant du champ de texte par « Par défaut ». - Ajoutez une action et nommez-la « par défaut ».
- Sélectionnez le type Actions personnalisées ( Custom Actions ).
-
Saisissez l'extrait de code suivant dans la section Action personnalisée (Javascript) .
return "Default"
return "Default" - Enregistrez l'action et la logique.
- Enregistrez le composant.
Change value to "Default"
, l'événement resetTextField
est émis. Le déclencheur écoute l'événement et remplace le contenu du champ de texte existant par « Par défaut ».
Type de déclencheur : Logique JSON Type d' Actions : Propriété
Cette logique avancée affiche le contenu d'un composant HTML (dans ce cas, une image) lorsque l'utilisateur saisit le texte requis.
- Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).
- Faites glisser et déposez un composant Champ de texte (Text Field ) et un composant Élément HTML (HTML Element). Faites attention aux clés de champ des composants, car vous les utilisez dans votre logique avancée.
-
Dans l'onglet Affichage (Display) du composant de champ de texte :
3.1. Labellisez le composant de champ de texte comme "Type "Show me"".
3.2. Ajoutez la description « Doit être une correspondance exacte (sensible à la casse) », pour indiquer aux utilisateurs qu’ils doivent saisir le texte requis.
3.3. Enregistrez le composant de champ de texte.
-
Dans l'onglet Affichage du composant Élément HTML :
4.1. Dans la section Contenu (Content), référencez l'image que vous souhaitez afficher. Par exemple :<img href="https://picsum.photos/200/300" />
.4.2. Cochez la case Caché (Hidden) pour masquer l'affichage par défaut de l'image. 4.3. Enregistrez le composant d'élément HTML.
- Accédez à l'onglet Logique (Logic) du composant Élément HTML.
- Ajoutez une logique et nommez-la « entrée utilisateur ».
- Sélectionnez le type de déclencheur Logique JSON (JSON Logic).
-
Saisissez l'extrait suivant dans la section Logique JSON (JSON Logic) et remplacez
{text_field_component_field_key}
par la valeur de la clé de champ que vous avez définie pour votre composant de champ de texte.{ "===": [ { "var": "data.{text_field_component_field_key}" }, "Show me" ] }
{ "===": [ { "var": "data.{text_field_component_field_key}" }, "Show me" ] }La configuration ci-dessus détecte lorsque l'utilisateur saisit « Montrez-moi (Show me) » et ne définit qu'ensuite la valeur de la propriété Hidden de l'élément HTML ( Hidden ) sur False, affichant ainsi le contenu HTML correspondant.
- Ajoutez une action et nommez-la « display image ».
-
Sélectionnez le type Actions de propriété ( Property Actions ).
10.1. Dans le menu déroulant Propriété du composant ( Component Property ), sélectionnez Hidden(Caché).
10.2. Dans le menu déroulant Définir l' état (Set State ), sélectionnez Faux ( False).
- Enregistrez l'action et la logique.
- Enregistrez le composant.
Au moment de l'exécution, si l'utilisateur saisit le texte requis dans le champ de texte, le formulaire affiche le contenu HTML.
Pour vérifier le workflow complet ou pour avoir une référence future, téléchargez l' exemple XAML