Créer des composants personnalisés à réutiliser sur toutes les pages avec le générateur de composants

Réutilisez des composants personnalisés dans des expériences et des pages dans Générateur d'IU.

Créez des composants personnalisés dans Générateur d'IUl’interface utilisateur de création de composants. L’interface utilisateur de création de composants partage de nombreuses similitudes avec la création de pages et vous permet de configurer les composants de la même manière que vous le feriez lors de la configuration d’une page dans Générateur d'IU.

La puissance des composants personnalisés

La création de composants personnalisés améliore l’efficacité, la cohérence et la maintenabilité dans votre expérience. En créant des éléments d’interface utilisateur réutilisables, vous évitez de dupliquer les configurations, vous assurez une apparence uniforme et vous facilitez la gestion des mises à jour ou des changements de conception. Les composants personnalisés simplifient également les mises en page complexes, prennent en charge des configurations flexibles et facilitent les tests et le débogage. Ils sont également utiles dans les environnements d’équipe, où les composants partagés permettent de rationaliser la collaboration et de maintenir une expérience utilisateur cohérente à grande échelle.

Les composants personnalisés sont particulièrement utiles lors de la conception de pages pour différents types d’utilisateurs au sein de votre expérience. Par exemple, vous pouvez créer un composant réutilisable qui inclut à la fois une liste et une visualisation de données, puis adapter son contenu ou son comportement en fonction du groupe d’utilisateurs, ce qui vous permet de conserver une mise en page cohérente tout en fournissant des informations spécifiques au rôle.

Les composants modifiés dans le générateur de composants sont automatiquement mis à jour sur toutes les pages sur lesquelles ils sont utilisés.

Important :

Les composants personnalisés créés dans une instance restent disponibles uniquement au sein de cette instance jusqu’à ce qu’ils soient migrés vers d’autres instances à l’aide d’ensembles de mises à jour ou d’installations d’applications.

Composants personnalisés ou collections de pages

Pour créer des expériences numériques efficaces et évolutives, il est important de réutiliser les éléments dans la mesure du possible. Pour ce faire, vous pouvez utiliser des composants personnalisés et des collections de pages. Chacun a un objectif distinct en fonction de l’étendue de réutilisation dont vous avez besoin.

Composants personnalisés

Utilisez des composants personnalisés lorsque vous souhaitez répliquer une partie spécifique d’une page, comme un en-tête, une liste, un formulaire ou des boutons sur plusieurs pages.

Vous souhaitez appliquer un thème ou une configuration cohérent à un composant ou à un groupe de composants.

Vous concevez des pages pour qu’elles soient modulaires ou flexibles, où certaines parties d’une page peuvent changer, mais les composants partagés restent cohérents.

Vous souhaitez gérer les changements en un seul endroit et les mettre à jour partout où le composant est utilisé.

Plusieurs équipes travaillent simultanément sur différentes sections d’une même page.

Collections de pages

Vous souhaitez réutiliser l’intégralité de la mise en page et de la configuration d’une page sur plusieurs pages ou expériences.

Vous devez créer une variante de pages complètes pour différents utilisateurs ou workflows.

Vous souhaitez utiliser un ensemble d’onglets sur plusieurs pages ou expériences.

Interface utilisateur du composant personnalisé

Vous pouvez accéder au générateur de composants dans Générateur d'IU en sélectionnant Créer dans l’en-tête ou la vignette Composant de la page d’accueil Générateur d'IU .

Figure 1. Page d'accueil de Générateur d'IU

Figure 2. Interface utilisateur du générateur de composants

Les composants créés avec Générateur d'IU se trouvent dans la boîte à outils lors de l’ajout d’un composant à une page et dans la liste des composants de la page d’accueil de Générateur d'IU. Vous pouvez mettre à jour ou modifier des composants personnalisés en les localisant dans la liste des composants de la page d’accueil de Générateur d'IU.

Figure 3. Valeurs de test dans le générateur de composants

Utilisez des valeurs de test dans le générateur de composants pour fournir des valeurs simulées pour les paramètres d’URL requis et facultatifs lors de la création d’un composant personnalisé. Les valeurs de test permettent de valider le comportement d’un composant lorsqu’il est ajouté à une page en s’assurant que les liaisons et les ressources de données fonctionnent correctement. Pour plus d’informations sur les valeurs de test, Valeurs de test dans une pagereportez-vous à la section .

Figure 4. Liste des composants

Vous pouvez dupliquer rapidement un composant personnalisé à partir de l’écran des paramètres du composant en sélectionnant Dupliquer, ce qui crée une copie exacte du composant pour réutilisation ou modification.

Figure 5. Paramètres des composants personnalisés

Comparaison entre le générateur de composants et l’interface de ligne de commande NOW Développement de composants

Il existe deux façons de créer des composants pour Générateur d'IU. La première consiste à utiliser le composant low-code dans Générateur d'IU, qui offre une interface par glisser-déposer pour créer des composants personnalisés. La seconde consiste à utiliser les outils de développement NOW CLI pour créer des composants via le code. Les deux méthodes produisent des composants qui peuvent être ajoutés à la boîte à outils UIB et réutilisés dans les expériences. Gardez à l’esprit que les changements apportés aux composants inclus peuvent avoir un impact sur les deux types.

Bien que les deux outils créent des composants pour Générateur d'IU, il existe des différences importantes à prendre en compte.

Générateur de composants dans Générateur d'IU:

• Les composants intégrés Générateur d'IU peuvent référencer des contrôleurs et des ressources de données.
• Crée des « Composants de macroponent » qui sont stockés dans la table sys_ux_macroponent.
• Component Builder est idéal pour les utilisateurs qui préfèrent une interface visuelle par glisser-déplacer pour créer des composants.
• Idéal pour créer rapidement des composants simples à modérément complexes.

Composants de l’interface de ligne de commande NOW :

• Destiné aux développeurs qui ont besoin d’écrire du HTML, CSS et JavaScript personnalisés.
• Convient pour la construction de composants complexes et personnalisables.
• Les composants créés avec NOW CLI sont stockés dans la table sys_uib_toolbox_component.

Bonnes pratiques

Le Générateur d'IU générateur de composants personnalisé manque d’options de gouvernance et peut entraîner des doublons et des incohérences dans votre expérience. Les équipes peuvent créer des composants similaires avec de légères variations, ce qui fragmente l’interface utilisateur et rend l’expérience utilisateur confuse. Il est recommandé que votre équipe effectue des audits réguliers et une communication inter-équipes afin de maintenir l’alignement et d’éviter la fragmentation au fur et à mesure que vos expériences se développent.

Tous les composants sont conçus pour être sécurisés pour les mises à niveau, tant que leur politique de sécurité est définie sur read_only. Cela offre une meilleure protection des mises à niveau pour les composants volumineux ou les partiels de page par rapport à d’autres unités déployables telles que les lots et les modèles de page. Toutefois, cela signifie également que les composants prêts à l’emploi peuvent ne pas être modifiables.

Créer des composants à réutiliser sur les pages

Créez des composants personnalisés réutilisables à utiliser dans les expériences et les pages dans Générateur d'IU.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Dans cet exemple de générateur de composants, nous allons créer un composant de chronomètre pour suivre le temps écoulé, qui peut être ajouté à n’importe quelle page. Le composant comprend des propriétés personnalisables qui peuvent être modifiées une fois placé sur une page.

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Sélectionnez Create (Créer) dans la page d’accueil Générateur d'IU .
   
3. Sélectionnez un composant.
4. Renseignez les champs du formulaire.

   Figure 6. Boîte de dialogue Créer un composant

   

   Tableau 1. Créer un formulaire de composant

   Champ	Description
   Nom	Ajoutez un nom pour suivre votre composant en interne. Le nom du composant apparaît dans la boîte à outils. Pour cet exemple, il s’agit du chronomètre.
   Catégories	Ajoutez une catégorie à votre composant pour le retrouver facilement dans la boîte à outils. Vous pouvez mettre à jour la catégorie ultérieurement dans les paramètres. Pour cet exemple, sélectionnez Contenu.
   Description	Ajoutez une description pour décrire quand et comment utiliser votre composant.
   Icône	Sélectionnez une icône pour représenter le composant dans la boîte à outils.

5. Sélectionnez Créer.
   La page s’ouvre dans la vue Générateur de composants.

   

6. Ajoutez une propriété de composant personnalisée en sélectionnant + Ajouter une propriété dans la section Propriétés et politique .
   
   1. Sélectionnez Chaîne dans la liste.
   2. Entrez les valeurs suivantes dans le panneau de configuration.

      Tableau 2. Propriétés des composants

      Champ	Valeur
      Étiquette de propriété	Source de l’image SVG
      ID de propriété	svgImageSource
      Valeur par défaut	animateddino.svg

      

   3. Sélectionnez Enregistrer.
7. Configurez la mise en page du composant personnalisé en sélectionnant le bouton + Ajouter du contenu .
   1. Sélectionner Colonne unique, puis Ajouter.
   2. Dans l’arborescence de contenu, sous la colonne 1, sélectionnez +Ajouter du contenu.
   3. Sélectionnez Conteneur de base de carte, puis sélectionnez Ajouter.
   4. Dans l’arborescence de contenu, sous Conteneur de base de carte 1, sélectionnez + Ajouter du contenu.
   5. Sélectionnez Mises en page.
   6. Sélectionnez Flexbox, puis Ajouter.
   7. Sélectionnez Enregistrer.
      
8. Ajoutez un composant de texte stylisé dans notre conteneur Flexbox en sélectionnant + Ajouter du contenu sous Conteneur 1.
   1. Sélectionnez le composant Texte stylisé , puis sélectionnez Ajouter.
   2. Sélectionnez Annuler pour fermer la fenêtre prédéfinie.
   3. Sélectionnez Enregistrer.
      
9. Pour configurer le composant de texte stylisé, nous allons ajouter des paramètres d’état du client.
   1. Sélectionnez les paramètres de l’état du client dans la section Données et scripts .
   2. Dans la boîte de dialogue Modifier les paramètres d’état du client , entrez les valeurs suivantes :

      Tableau 3. Paramètres de l'état du client

      Nom	Type	Valeur initiale
      startTime	Numéro
      elapsedTime	Chaîne	00:00:00
      intervalle de temps	JSON
      stopwatchEn cours d’exécution	Booléen
      ID d’intervalle	Chaîne

   3. Sélectionnez Appliquer.
      
   4. Sélectionnez Enregistrer.
10. Pour configurer le composant de texte stylisé, nous allons lier le paramètre d’état du client elapsedTime .
    1. Sélectionnez le composant Texte stylisé 1 dans l’arborescence de contenu.
    2. Sélectionnez l’icône de liaison lorsque vous pointez sur le champ Texte du composant de texte stylisé.
       
    3. Sélectionnez les états du client.
    4. Double-cliquez sur la pastille elapsedTime .
       
    5. Sélectionnez Appliquer.
    6. Sélectionnez Enregistrer.
11. Ajoutez un conteneur Flexbox pour maintenir les boutons.
    1. Sélectionnez l’icône + sous le composant de texte stylisé.
       
    2. Sélectionnez Mises en page.
    3. Sélectionnez Flexbox.
    4. Sélectionnez Ajouter.
12. Ajoutez et configurez le rendu d’exécution du chronomètre et le bouton Démarrer.
    1. Sélectionnez + Ajouter du contenu dans le conteneur que vous avez ajouté à l’étape précédente et ajoutez un rendu conditionnel.
    2. Sélectionnez + Ajouter une condition dans l’arborescence de contenu.
    3. Sélectionner Composant unique, puis Suivant.
    4. Sélectionnez Bouton iconique, puis sélectionnez Suivant.
    5. Dans la boîte de dialogue Modifier les paramètres , entrez les valeurs suivantes :
       • Étiquette du composant : Démarrer
       • ID de composant : start_button
       • Rendu du contenu : toujours
    6. Sélectionnez Appliquer.
    7. Sélectionnez le bouton Démarrer dans l’arborescence de contenu.
    8. Définissez les propriétés suivantes dans le panneau de configuration.

       Tableau 4. Propriétés des composants

       Champ	Valeur
       Icône	remplissage du chronomètre
       Variante	Primaire
       Taille	Grand
       Texte d'info-bulles	Début

    9. Sélectionnez Enregistrer.
       
13. Configurez le bouton d’arrêt à afficher lorsque le chronomètre est en cours d’exécution.
    1. Sélectionnez + Ajouter une condition dans l’arborescence de contenu.
    2. Sélectionnez Conteneur vide, puis sélectionnez Suivant.
    3. Dans la boîte de dialogue Modifier les paramètres , entrez les valeurs suivantes :
       • Étiquette du composant : En cours d’exécution
       • ID de composant : running_container
       • Rendu du contenu : lorsque la condition ci-dessous est vraie
    4. Sélectionnez l’icône de liaison tout en pointant sur le champ Condition .
       
    5. Sélectionnez les états du client, puis double-cliquez sur la pastille stopwatchRuning .
    6. Sélectionnez Appliquer.
    7. Sélectionnez Appliquer.
    8. Sélectionnez + Ajouter du contenu dans le conteneur en cours d’exécution et ajoutez un bouton emblématique.
    9. Sélectionnez le bouton iconique 1 dans le panneau de configuration et entrez les valeurs suivantes :
       • Étiquette du composant : Stop
       • ID de composant : stop_button
    10. Sélectionnez Appliquer.
    11. Définissez les propriétés suivantes dans le panneau de configuration.

        Tableau 5. Propriétés des composants

        Champ	Valeur
        Icône	remplissage du chronomètre
        Variante	Secondaire
        Taille	Grand
        Texte d'info-bulles	Arrêter

    12. Sélectionnez Enregistrer.
        
14. Réorganisez les conditions de sorte que l’option En cours d’exécution apparaisse au-dessus de l’état Démarrer.
    1. Sélectionnez Rendu conditionnel 1 dans l’arborescence de contenu.
    2. Dans le panneau de configuration, sélectionnez et faites glisser l’icône de la poignée de glissement pour déplacer les conditions en position.
       

       Les conditions sont évaluées dans l’ordre de haut en bas, de sorte que l’exécution doit apparaître au-dessus de Démarrer pour que les boutons s’affichent correctement.

15. Ajoutez la logique du composant en sélectionnant + en regard de Scripts clients dans la section Données et scripts .
    1. Entrez Début dans le champ Nom du script .
    2. Collez le script suivant dans le champ de script.

       function handler({ api, helpers }) {
         console.log('Start script running');
        
         if (api.state.stopwatchRunning === undefined) {
           api.setState('stopwatchRunning', false);
           api.setState('elapsedTime', '00:00:00');
           api.setState('startTime', null);
           api.setState('intervalId', null);
         }
        
         let running = api.state.stopwatchRunning;
        
         function pad(n) {
           return n < 10 ? '0' + n : n.toString();
         }
        
         function updateElapsedTime(startTime) {
           if (!running) {
             if (api.state.intervalId) {
               helpers.timing.clearInterval(api.state.intervalId);
               api.setState('intervalId', null);
               console.log('Interval cleared');
             }
             return;
           }
        
           if (!startTime) {
             console.log('No startTime passed to updateElapsedTime, cannot update');
             return;
           }
        
           const now = Date.now();
           const elapsedMs = now - startTime;
        
           const totalSeconds = Math.floor(elapsedMs / 1000);
           const hours = pad(Math.floor(totalSeconds / 3600));
           const minutes = pad(Math.floor((totalSeconds % 3600) / 60));
           const seconds = pad(totalSeconds % 60);
        
           const formattedTime = `${hours}:${minutes}:${seconds}`;
        
           console.log('Setting elapsedTime:', formattedTime);
           api.setState('elapsedTime', formattedTime);
         }
        
         if (!running) {
           const now = Date.now();
        
           api.setState('startTime', now);
           api.setState('elapsedTime', '00:00:00');
           api.setState('stopwatchRunning', true);
           running = true;
        
           if (api.state.intervalId) {
             helpers.timing.clearInterval(api.state.intervalId);
             api.setState('intervalId', null);
             console.log('Existing interval cleared before starting new one');
           }
        
           // Pass startTime directly here
           updateElapsedTime(now);
        
           const id = helpers.timing.setInterval(() => {
             updateElapsedTime(now);
           }, 1000);
           api.setState('intervalId', id);
           console.log('Interval started with id:', id);
         } else {
           if (!api.state.intervalId) {
             // Use existing startTime from state, but be mindful it might still lag
             const storedStartTime = api.state.startTime || Date.now();
             const id = helpers.timing.setInterval(() => {
               updateElapsedTime(storedStartTime);
             }, 1000);
             api.setState('intervalId', id);
             console.log('Interval restarted with id:', id);
           }
         }
       }

    3. Sélectionnez Appliquer.
       
    4. Sélectionnez + en regard de Scripts clients pour ajouter un deuxième script.
    5. Entrez Arrêt dans le champ Nom du script .
    6. Collez le script suivant dans le champ de script.

       function handler({ api, helpers }) {
         console.log('Stop script running');
        
         if (api.state.stopwatchRunning === undefined) {
           // If state is not initialized yet, initialize it to avoid errors
           api.setState('stopwatchRunning', false);
           api.setState('elapsedTime', '00:00:00');
           api.setState('startTime', 0);
           api.setState('intervalId', null);
         }
        
         if (api.state.stopwatchRunning) {
           api.setState('stopwatchRunning', false);
           if (api.state.intervalId) {
             helpers.timing.clearInterval(api.state.intervalId);
             api.setState('intervalId', null);
           }
         }
       }

    7. Sélectionnez Appliquer.
    8. Sélectionnez Enregistrer.
16. Ajoutez des gestionnaires d’événements aux boutons que nous avons créés aux étapes précédentes.
    1. Sélectionnez le bouton Démarrer dans l’arborescence de contenu et ouvrez l’onglet Événements dans le panneau de configuration.
    2. Sélectionnez Ajouter un gestionnaire sous Bouton iconique cliqué, puis sélectionnez le script client Démarrer que nous avons créé lors des étapes précédentes.
       
    3. Sélectionnez Continuer, puis sélectionnez Ajouter.
    4. Sélectionnez le bouton Arrêter dans l’arborescence de contenu et ouvrez l’onglet Événements dans le panneau de configuration.
    5. Sélectionnez Add handler (Ajouter un gestionnaire), puis sélectionnez le script client Stop que nous avons créé lors des étapes précédentes.
    6. Sélectionnez Continuer, puis sélectionnez Ajouter.
    7. Sélectionnez Enregistrer.
17. Sélectionnez Aperçu pour tester les composants configurés.
    

Résultats

Votre composant personnalisé est maintenant disponible dans la Générateur d'IU boîte à outils.