Personnaliser les Générateur d'IU pages à l’aide de composants

Découvrez ce qu’est un composant dans Générateur d'IU. Découvrez également comment les composants fonctionnent dans le générateur d’IU.

Les composants sont les éléments de base de votre Générateur d'IU page. Les composants vont des éléments de base, comme les boutons et les libellés, aux composants d'expérience plus complexes, tels que les listes et les formulaires.

Vous pouvez ajouter ces composants à votre Générateur d'IU page pour créer ou personnaliser votre espace de travail ou votre expérience de portail. Par exemple, l’ajout d’un composant de flux d’activité à votre page qui permet aux utilisateurs de voir leur activité de demande de déplacement.

Vous pouvez ajouter des composants à votre Générateur d'IU page de la manière suivante.

Tableau 1. Façons d’ajouter un composant à une page

Emplacement	Exemple
Directement à partir d’une page dans Générateur d'IU (option 1)	Sélectionnez l’icône Ajouter du contenu (plus), sélectionnez l’onglet Composants , puis sélectionnez un composant.
Directement à partir d’une page dans Générateur d'IU (option 2)	Sur une disposition ou un composant en colonne, sélectionnez l’icône Ajouter avant (plus) ou Ajouter après (plus), puis sélectionnez un composant.
À partir de l’arborescence de contenu dans Générateur d'IU	Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu , puis sélectionnez un composant.
À partir du menu flottant au-dessus de la page dans Générateur d'IU	Dans une disposition ou un composant en colonne, sélectionnez l’icône Menu, sélectionnez Ajouter avant ou Ajouter après, puis sélectionnez un composant.

Mises en page en colonnes dans Générateur d'IU

Ajoutez d’abord des mises en page en colonnes et des colonnes à votre Générateur d'IU page. Ajoutez ensuite des composants aux colonnes dans une mise en page en colonnes pour créer et personnaliser votre page. Considérez une mise en page en colonne comme une partie définie de l’écran où vous ajoutez des composants tels que des listes et des en-têtes. Vous pouvez avoir autant de mises en page en colonnes que vous le souhaitez sur une page, avec jusqu’à six colonnes dans n’importe Générateur d'IU quelle disposition en colonne. Plusieurs composants peuvent être ajoutés à une seule colonne. Affichez la structure de votre page dans l’arborescence de contenu .

Pour plus d'informations, consultez Mises en page en colonnes.

Configurer des composants dans Générateur d'IU

Il existe trois façons de configurer un composant dans le panneau de configuration.

• Configurez les propriétés du composant.
• Ajoutez des remplacements de style CSS.
• Configurez des gestionnaires d’événements pour les composants.

Onglet Configurer

Les propriétés des composants varient en fonction de chaque composant. La configuration des composants peut être simple, comme c’est le cas avec des éléments simples comme les boutons, les en-têtes et les étiquettes. Les composants tels que les listes et les formulaires nécessitent une configuration importante. Pour les composants d’icône et d’image, sélectionnez parmi plusieurs options ou utilisez une icône ou une image personnalisée. Vous pouvez modifier les propriétés des composants à l’aide Générateur d'IUde l’éditeur JSON low-code de . Pour plus d’informations sur la configuration des composants, voir Composants Next Experience.

Pour chaque propriété de l’onglet de configuration du composant, vous pouvez choisir parmi les options suivantes.

• Statique : utilisez les données d’une liste ou saisissez vos propres données. Les données ne se connectent pas à une source de données externe.
• Liaison dynamique des données : moyen de lier une propriété de composant à une ressource de données, une propriété de page ou un état client.
• Script : saisissez du code JavaScript pour renseigner une valeur de propriété.

Onglet Styles

Vous pouvez modifier les styles des feuilles de style en cascade (CSS) pour des composants individuels. Modifiez les bordures de couleur, la taille de la police, etc.

Onglet Événements

Configurez les mappages d’événements au niveau de la page et au niveau des variantes. Ajoutez également des événements expédiés et des événements gérés pour votre variante. Les composants d’expérience, plus complexes, s’appuient fortement sur les données dynamiques fournies par une ressource de données. La liaison de données dynamiques à un composant est une fonctionnalité importante. Vous exposez dynamiquement les données des tables, des enregistrements ou d’autres éléments de votre page. L’exposition des données vous permet de réutiliser vos composants. En outre, vous pouvez pointer vers les champs de configuration pour afficher les données des icônes ou les options de script pour chaque champ.

Lorsque vous ajoutez et configurez des composants sur la page, l’étape affiche votre travail. Si vous apportez des modifications et que les mises à jour ne se chargent pas sur l’étape, sélectionnez l’icône de menu Ouvrir , puis sélectionnez Développeur > Recharger l’étape. Le rechargement de l’étape affiche vos changements, mais ne les enregistre pas. Pour enregistrer votre travail, sélectionnez Enregistrer en haut à droite.

Préréglages des composants dans Générateur d'IU

Utilisez les paramètres prédéfinis des composants pour configurer automatiquement les composants sur les pages compatibles. Générateur d'IU Les modèles de page contiennent des contrôleurs que les paramètres prédéfinis utilisent pour définir les valeurs de configuration des composants. Pour plus d'informations, consultez Configurer automatiquement les composants à l'aide de paramètres prédéfinis.

Sections des propriétés des composants

Les propriétés des composants sont regroupées en sections de propriétés similaires. Ouvrez et fermez des sections en sélectionnant les flèches à droite des en-têtes de propriété. Les administrateurs du générateur d’IU peuvent sélectionner les propriétés de configuration du composant à afficher ou à masquer en fonction des politiques d’interface utilisateur.

Éditeur de formule de composant

Utilisez l’éditeur de Générateur d'IU formule de composant dans le panneau de configuration pour lier ou modifier des formules. Vous pouvez entrer du texte, des liaisons de données et/ou des formules. Les formules peuvent consister en n’importe quelle combinaison des trois types d’entrée. L’éditeur de formule de composant prend en charge les types de transformation logique, arithmétique, de comparaison, de négation et fonctionnel.

Chaque fonction ajoutée à l’éditeur de formule du composant s’exécute automatiquement. L’éditeur de formule de composant affiche une étiquette pour chaque entrée de la fonction afin que vous sachiez quels paramètres chaque fonction nécessite. Pour plus d’informations sur les fonctions prises en charge dans l’éditeur de formule du composant, reportez-vous à la section Fonctions prises en charge dans l’éditeur de formule du Générateur d'IU composant.

ID de composant

Utilisez l’ID du composant lorsque vous ajoutez un script ou que vous liez des données au composant pour référencer le composant. Un ID de composant est automatiquement créé et est basé sur l’étiquette de composant lorsque vous ajoutez un composant à une page. Vous pouvez modifier l’ID de composant pour ce que vous voulez, tant qu’il est unique. Sélectionnez le nom du composant dans le panneau de configuration pour afficher l’ID du composant.

Visibilité du composant

Sélectionnez l’icône en forme d’œil dans le panneau de configuration pour définir la visibilité du composant. La visibilité du composant est basée sur une propriété du composant lui-même, et non sur la personne qui le consulte. Vous pouvez afficher ou masquer un composant en fonction des conditions. Par exemple, masquer une image si elle a un lien rompu.

Vous pouvez définir la visibilité en fonction de la liaison dynamique des données ou en modifiant une valeur de propriété scriptée.

Définissez la valeur de test pour tester ce qui se passe lorsque la visibilité est définie sur vrai, faux ou aucune.

Dupliquer les composants

Créez une copie exacte d’un composant configuré sur votre Générateur d'IU page, à l’exception du nom et de l’ID. Un composant dupliqué copie toutes les propriétés, liaisons et événements. Pour plus d'informations, consultez Dupliquer un composant.

• Configurer automatiquement les composants à l'aide de paramètres prédéfinis
  Utilisez les paramètres prédéfinis des composants pour configurer automatiquement les composants sur les pages compatibles.
• Créer des paramètres prédéfinis personnalisés pour les composants
  Créez des paramètres prédéfinis pour gagner du temps et rendre les configurations de vos composants réutilisables dans différentes expériences.
• Modifier l’apparence par défaut des composants
  Définissez les styles des composants et des couches pour modifier l’apparence par défaut.
• Améliorer l’accessibilité grâce à la gestion de la mise au point
  Définissez la mise au point sur des éléments spécifiques afin que les utilisateurs puissent interagir efficacement avec eux à l’aide de lecteurs d’écran.
• Dupliquer un composant
  Dupliquez un composant configuré à réutiliser sur une page.
• Afficher dynamiquement le contenu avec des rendus conditionnels
  Utilisez le composant de rendu conditionnel pour afficher du contenu ou des composants en fonction des conditions spécifiées.
• Collections de pages
  Les collections de pages sont des groupes de pages qui peuvent être utilisés dans plusieurs expériences.
• Changer les visualisations de données dans Générateur d'IU
  Modifiez les visualisations de données en temps réel à l’aide d’une liste déroulante pour prévisualiser les données dans votre expérience.
• Ajouter du contenu à onglets aux pages du générateur d'IU
  Utilisez le composant Onglets pour ajouter du contenu à onglets à des pages dans Générateur d'IU.
• Ajouter une barre latérale contextuelle
  Ajoutez une barre latérale contextuelle à une page avec Générateur d'IU pour afficher le contenu associé à l’aide d’une structure d’onglets verticaux.
• Ajouter des formulaires aux pages du générateur d’IU
  Utilisez le composant Formulaire pour ajouter un ou plusieurs formulaires à des Générateur d'IU pages.
• Créer des fenêtres modales dans Générateur d'IU
  Utilisez des fenêtres modales avec Générateur d'IU des composants pour fournir des alertes ou des appels à l’action à un utilisateur. Générateur d'IU est fourni avec des fenêtres modales pour gagner du temps et de l’énergie.
• Étendre votre expérience d'interface utilisateur avec des composants Viewport
  Les Viewport sont des composants spécialisés qui vous permettent d’étendre votre expérience sans avoir besoin de posséder la page parente dans Générateur d'IU. Vous pouvez utiliser les fenêtres d’affichage de trois manières. Vous pouvez ajouter un composant de fenêtre d’affichage ou un onglet de fenêtre d’affichage à une page, ou ajouter une fenêtre d’affichage au composant de barre latérale contextuelle.
• Créer des popovers dans Générateur d'IU
  Utilisez les popovers sur une page du générateur d’IU pour superposer des informations contextuelles ou des fonctionnalités permettant aux utilisateurs d’accomplir des tâches.
• Créer des boîtes de dialogue non modales dans Générateur d'IU
  Utilisez des boîtes de dialogue non modales sur une page du générateur d’IU pour ajouter une fenêtre flottante qui vous permet d’interagir à la fois avec le contenu de la fenêtre et le contenu de la page ci-dessous.