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 fonctionnent les composants dans 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 expérience d’espace de travail ou 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 des manières suivantes.
| 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 mise en page 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. |
| Dans le menu flottant au-dessus de la page dans Générateur d'IU | Sur une disposition de colonne ou un composant, 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 sur une page que vous le souhaitez, avec jusqu’à six colonnes dans n’importe Générateur d'IU quelle mise en page 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
- 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 tels que des boutons, des en-têtes et des é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 une variété d’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 de la variante. Ajoutez également des événements répartis et des événements gérés pour votre variante. Les composants d’expérience plus complexes dépendent fortement des 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 de tables, d’enregistrements ou d’autres éléments de votre page. L’exposition des données vous permet de réutiliser vos composants. Vous pouvez également pointer vers les champs de configuration pour afficher les données des icônes ou les options de scripting 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 à l’étape, sélectionnez l’icône Ouvrir le menu , 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 de composant à afficher ou à masquer en fonction des politiques d’interface utilisateur.
Éditeur de formule de composant
Utilisez l’éditeur Générateur d'IU de 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 de 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 du composant lorsque vous ajoutez un composant à une page. Vous pouvez modifier l’ID de composant pour ce que vous voulez, à condition qu’il soit 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 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.