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 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 du 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 d’entrée 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 d’entrée Générateur d'IU (option 2) | Dans une mise en page de colonne ou un composant, 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 | Dans 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 des 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 colonne pour créer et personnaliser votre page. Considérez une disposition en colonne comme une partie définie de l’écran dans laquelle 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 Générateur d'IU page que vous le souhaitez, avec jusqu’à six colonnes dans n’importe 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 pour 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 différentes options ou utilisez une icône ou une image personnalisée. Vous pouvez modifier les propriétés du composant à l’aide de l’éditeur Générateur d'IUJSON low-code de . Pour plus d’informations sur la configuration des composants, reportez-vous à la rubrique 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 entrez 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 : entrez du code JavaScript pour renseigner une valeur de propriété.
- Onglet Styles
- Vous pouvez modifier les styles de 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 des mappages d’événements au niveau de la page et de la variante. Ajoutez également des événements expédiés et des événements gérés pour votre variante. Les composants d’expérience les plus complexes reposent fortement sur 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 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 icônes, les données ou les options de script pour chaque champ.
Au fur et à mesure que 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 > étape de rechargement. Le rechargement de l’étape affiche vos changements, mais ne les enregistre pas. Pour enregistrer votre travail, sélectionnez Enregistrer en haut à droite.
Composants prédéfinis 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 les sections en sélectionnant les flèches à droite des en-têtes de propriété. Les administrateurs de Générateur d’IU peuvent sélectionner les propriétés de configuration des composants qui sont affichées ou masquées en fonction des politiques d’interface utilisateur.
Éditeur de formule du composant
Utilisez l’éditeur de formule du Générateur d'IU composant dans le panneau de configuration pour lier ou modifier des formules. Vous pouvez saisir du texte, des liaisons de données et/ou des formules. Les formules peuvent être constituées de n’importe quelle combinaison des trois types d’entrée. L’éditeur de formule du composant prend en charge les types de transformation logique, arithmétique, de comparaison, de négation et fonctionnelle.
Chaque fonction ajoutée à l’éditeur de formule du composant se termine 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 de composant, reportez-vous à la section Fonctions prises en charge dans l’éditeur de formule de 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 du composant lorsque vous ajoutez un composant à une page. Vous pouvez modifier l’ID de composant comme vous le souhaitez, à 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 présente un lien rompu.
Vous pouvez définir la visibilité en fonction d’une liaison dynamique de 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.