Lier des données à des pages UI Builder à l’aide de contrôleurs (fonctionnalité avancée)

Les contrôleurs simplifient la liaison des données et de la logique d’événement pour activer les paramètres prédéfinis des composants dans Générateur d'IU.

Les contrôleurs permettent aux constructeurs de pages de se connecter facilement aux données et aux scripts à leurs pages au format Générateur d'IU. Un contrôleur est un type de ressource de données utilisé par les préréglages des composants pour lier les données aux composants. Les contrôleurs diffèrent des autres ressources de données en ce sens qu’ils contiennent des données et une logique d’événement qui active les paramètres prédéfinis pour les composants. Un contrôleur apporte des données du serveur à un composant, et il renvoie les données mises à jour vers le serveur en fonction des interactions avec le composant. Pour plus d’informations sur les composants prédéfinis, reportez-vous à la section Configurer automatiquement les composants à l’aide de paramètres prédéfinis.

Remarque :

La création de contrôleurs n’est pas prise en charge dans Washington DC.

Les contrôleurs sont ajoutés par défaut lorsque vous utilisez un modèle de Générateur d'IU page. Vous pouvez ajouter des contrôleurs à Générateur d'IU des pages sans contrôleur dans le tiroir de ressources de données ou en sélectionnant un composant prédéfini après avoir ajouté un composant à une page. Vous pouvez afficher quels contrôleurs sont configurés sur votre page en ouvrant le tiroir des ressources de données.

Figure 1. Contrôleur dans le tiroir des ressources de données

Types de responsables du traitement des données dans Générateur d'IU

Responsables du traitement des données

Les contrôleurs de données décident quelles informations doivent être affichées sur Générateur d'IU les pages. Les contrôleurs de données utilisent les ressources de données pour synchroniser les informations en temps réel et mettre à jour les données/tables lorsqu’un utilisateur saisit des informations. Vous pouvez ajouter manuellement des contrôleurs de données à une page.

Contrôleurs d’interface utilisateur

Les contrôleurs d’interface utilisateur sont ajoutés aux pages lors de l’utilisation Générateur d'IU de modèles de page et ne peuvent pas être ajoutés manuellement.

Utilisation de contrôleurs avec des paramètres prédéfinis dans Générateur d'IU

Vous pouvez ajouter plusieurs contrôleurs à une Générateur d'IU page, mais vous ne pouvez pas utiliser le même deux fois. Si vous essayez d’utiliser un composant prédéfini qui nécessite un contrôleur, Générateur d'IU vous invite à l’ajouter.

Tous les composants ne fonctionnent pas avec des contrôleurs, mais vous pouvez facilement voir lesquels fonctionnent dans la bibliothèque de composants. Si vous avez configuré un contrôleur sur votre Générateur d'IU page, vous pouvez ouvrir la bibliothèque de composants pour afficher quels composants ont des paramètres prédéfinis. Les composants avec des paramètres prédéfinis disponibles sont mis en surbrillance dans la bibliothèque de composants.

Figure 2. Composants avec des paramètres prédéfinis

Ajouter un contrôleur

Ajoutez un contrôleur de données à votre page pour utiliser des paramètres de composant prédéfinis.

Avant de commencer

Rôle requis : admin

Pourquoi et quand exécuter cette tâche

Le contrôleur d’enregistrement est le seul contrôleur que vous pouvez ajouter à une page dans Washington DC.

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
   Pour plus d'informations, consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU.
3. Créez ou ouvrez une page ou une variante de page.
   Pour plus d’informations sur la création d’une page dans , consultez Créer une page dansGénérateur d'IU UI Builder.
4. Sélectionnez l’icône + dans le tiroir de ressources de données.
5. Sélectionnez la ressource de données.
   
6. Saisissez le formulaire dans le champ de recherche.
7. Sélectionnez le contrôleur que vous souhaitez ajouter à votre page.
8. Sélectionnez Ajouter.
   
9. Renseignez les champs pour configurer le contrôleur.
   

Résultats

Le contrôleur de formulaire s’affiche dans la section Ressources de données .

Modifier un contrôleur

Configurez un contrôleur pour extraire les données d’une table.

Avant de commencer

Rôle requis : admin

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
   Pour plus d'informations, consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU.
3. Créez ou ouvrez une page.
   Pour plus d’informations sur la création d’une page dans , consultez Créer une page dansGénérateur d'IU UI Builder.
4. Sélectionnez le contrôleur que vous souhaitez modifier dans le tiroir Données et scripts .
   
5. Renseignez les champs du formulaire.

   Tableau 1. Formulaire Contrôleur de formulaire

   Champ	Description
   Type	Le contrôleur est prédéfini en tant que type pour tous les contrôleurs.
   Table	Ajoutez une table à partir de laquelle vous souhaitez que le contrôleur extraie les données.
   ID système	Entrez l’identificateur unique d’un enregistrement, fournissez une valeur ou utilisez -1 pour générer une nouvelle valeur.

6. Fermez le modal d’édition du contrôleur.
7. Sélectionnez Enregistrer.

Supprimer un contrôleur

Supprimez un contrôleur dont vous n’avez plus besoin dans Générateur d'IU.

Avant de commencer

Rôle requis : admin

Pourquoi et quand exécuter cette tâche

Les contrôleurs ne peuvent pas être supprimés des pages créées avec un modèle de page.

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
   Pour plus d'informations, consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU.
3. Ouvrez la page avec le contrôleur que vous souhaitez supprimer.
4. Sélectionnez l’icône Menu ( ) à côté de la manette que vous souhaitez supprimer.
   
5. Sélectionnez Supprimer.
   
   Le contrôleur est supprimé des instances de ressources de données locales.

Afficher les propriétés et les événements dans l’API du contrôleur

L’API publique du contrôleur définit les données de sortie qu’un contrôleur fournit à un paramètre prédéfini. Cela inclut les valeurs de propriété et les événements gérés utilisés par un composant lorsqu’un paramètre prédéfini est sélectionné. Les informations sur les propriétés et les événements peuvent être consultées dans le générateur d’IU.

Les valeurs des propriétés du composant dans un paramètre prédéfini peuvent être des valeurs statiques ou des chemins d’accès aux données de sortie du contrôleur. Vous pouvez utiliser l’inspecteur de ressource de données dans UI Builder pour afficher les valeurs de la structure de données du contrôleur utilisée par un paramètre prédéfini. Pour afficher la charge utile transportée par un événement prédéfini, vous pouvez rechercher cet événement dans le sélecteur de gestionnaire d’événements.

Affichage des propriétés dans l’API du contrôleur

Vous pouvez afficher les propriétés prédéfinies dans l’inspecteur de données UIB. Connaître les valeurs disponibles vous aide à comprendre le comportement d’un composant dans votre conception et à identifier toutes les propriétés du paramètre prédéfini que vous souhaitez peut-être remplacer.

Cette procédure suppose que vous avez placé un composant avec un paramètre prédéfini sur la page et que vous avez configuré un contrôleur. Pour obtenir des instructions, reportez-vous à la section Ajouter une manette.

L’onglet de configuration affiche les valeurs de propriété prédéfinies sous la forme d’un chemin d’accès à la sortie du contrôleur. Le chemin d’accès des données de base est exprimé comme @data.<controller_name>. Le reste du chemin d’accès est construit à l’aide du contenu des catégories de la hiérarchie des données du contrôleur. Vous pouvez utiliser ce chemin pour afficher les valeurs actuelles de l’enregistrement pour lequel le contrôleur a été configuré.

1. Pour afficher les ressources de données d’un composant, sélectionnez l’icône de données dans la barre latérale inférieure gauche.

   

   L’inspecteur de données UIB à trois colonnes s’affiche.

2. Dans la première colonne où les ressources de données sont répertoriées, sélectionnez le contrôleur dont vous souhaitez afficher la sortie.
   Les données de configuration du contrôleur sélectionné apparaissent dans l’onglet Configuration de la deuxième colonne. Il s’agit des propriétés d’entrée que vous avez saisies lorsque vous avez configuré le contrôleur pour le premier composant avec un paramètre prédéfini que vous avez placé sur la page. Vous pouvez modifier ces valeurs de connexion ici si vous le souhaitez.

   Remarque :

   La configuration de -1 pour la valeur dans le champ ID système configure le contrôleur pour un nouvel enregistrement. Le contrôleur génère ensuite un GUID complet que vous pouvez utiliser pour stocker les données relatives à l’enregistrement avant qu’il ne soit enregistré. Cela vous permet d’effectuer des actions dans un enregistrement nouvellement créé, telles que l’enregistrement des pièces jointes.
   
   
   
3. Sélectionnez les sorties de niveau supérieur dans la troisième colonne.

   Il s’agit du niveau parent de la hiérarchie des données du contrôleur, indiqué par le préfixe @data., suivi de l’ID du contrôleur. Cette combinaison forme le chemin d’accès racine aux données. Les données contenues dans les sorties de niveau supérieur sont affichées dans le champ de code adjacent et sont disponibles pour les préréglages et les scripts à utiliser. Les autres propriétés de ce niveau sont des propriétés communes qui s’appliquent à tous les enregistrements.

   

   Lorsque le paramètre prédéfini mappe une propriété de composant à la sortie du contrôleur, le chemin d’accès à la sortie est affiché à la place de la valeur. Les chemins d’accès sont désignés par @data.<ID du contrôleur>.<chemin d’accès du niveau supérieur à la propriété de sortie> et peuvent être utilisés comme valeurs ou dans le cadre d’expressions de formule.

   Dans cet exemple, le mappage dans le paramètre prédéfini aboutit à un chemin d’accès vers @data.gform.table.

   
   
   
4. Pour afficher les données en dessous du niveau supérieur, sélectionnez la catégorie enfant indiquée par le chemin d’accès dans la valeur de propriété prédéfinie.

   Le nom de la catégorie enfant apparaît dans le chemin d’accès sous la forme @data.<ID du contrôleur>.<catégorie>. Les données de cette catégorie sont ensuite ajoutées à ce chemin d’accès. Le chemin d’accès racine au-dessus du champ de code indique la catégorie enfant utilisée. Dans cet exemple, le chemin d’accès à la propriété View dans la catégorie de formulaire est exprimé comme suit : @data.gform.form.view. Cette valeur prédéfinie affiche les formulaires dans la vue de l’espace de travail .

   
   
   

   Dans cet exemple, plusieurs propriétés de sortie de contrôleur sont utilisées dans une expression de formule pour créer un objet.

   
   
   
5. Pour afficher une valeur de propriété scriptée, sélectionnez l’icône de verrou en regard de la propriété.

   Cela met la propriété en mode d’édition et ouvre un modal pour modifier le script.

   

Affichage des événements dans l’API du contrôleur

Vous pouvez afficher les événements traités mappés à un composant par un paramètre prédéfini et leurs charges utiles dans l’onglet Événements du panneau de configuration de l’UI Builder. Si le mappage de données d’un événement n’est pas approprié pour votre cas d’utilisation, vous pouvez ajouter des gestionnaires de données supplémentaires.

Remarque :

Les mappages de gestionnaire de données fournis avec le paramètre prédéfini ne sont pas modifiables.

1. Sélectionnez l’onglet Événements dans UI Builder.
2. Pour afficher le mappage d’un événement prédéfini, sélectionnez la vignette de l’événement.

   Un modal s’affiche montrant les propriétés de la charge utile pour l’événement prédéfini. Vous pouvez désactiver l’événement dans ce modal.

   
   
   
3. Pour ajouter un gestionnaire d’événements à l’événement, sélectionnez + Ajouter un gestionnaire d’événements sous la vignette de l’événement.
   
   
   

   Un modal s’affiche, affichant une liste des événements disponibles et traités. Vous pouvez sélectionner n’importe quelle action de la liste, y compris un gestionnaire d’événements à partir de l’un des contrôleurs répertoriés.

4. Sélectionnez un gestionnaire d’événements dans la liste, puis sélectionnez Ajouter.

   Le nouveau gestionnaire est répertorié sous la vignette de l’événement.