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

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

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, ajouter un composant 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 mise en page ou un composant de 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 un composant , puis sélectionnez un composant.
À partir du menu flottant au-dessus de la page dans Générateur d'IU	Sur une mise en page 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 de colonnes et des colonnes à votre Générateur d'IU page. Ajoutez ensuite des composants aux colonnes d’une mise en page de colonne pour créer et personnaliser votre page. Considérez une mise en page de 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 de colonnes sur une Générateur d'IU page que vous le souhaitez, avec jusqu’à six colonnes dans n’importe quelle mise en page de 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 les 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 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, choisissez parmi différentes options ou utilisez une icône ou une image personnalisée. Vous pouvez modifier les propriétés des composants à l’aide de l’éditeur Générateur d'IUJSON low-code de . Pour plus d’informations sur la configuration des composants, consultez 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 de données : méthode permettant de lier une propriété de composant à une ressource de données, à une propriété de page ou à l’état d’un client.
• Script : saisissez le 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 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 à partir de tables, d’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 de 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 sur l’étape, sélectionnez l’icône Ouvrir le menu , puis Développeur > Forcer le rechargement de l’étape. Le rechargement de l’étape affiche vos modifications, 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 des paramètres prédéfinis 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 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 UI Builder 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 formule de 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 de 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 de 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 liez des données au composant afin de 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 dépend d’une propriété du composant lui-même, et non de 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 de données dynamique 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 l’ensemble des propriétés, des liaisons et des é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.
• Modifier l’apparence par défaut des composants
  Définissez les styles des composants et des wrappers pour modifier l’aspect par défaut.
• Dupliquer un composant
  Dupliquer un composant configuré à réutiliser sur une page.
• Modifier les visualisations des 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 de l’UI Builder
  Utilisez le composant Onglets pour ajouter du contenu à onglets aux pages au format Générateur d'IU.
• Créer des modaux dans Générateur d'IU
  Utilisez des fenêtres modales avec Générateur d'IU les composants pour fournir des alertes ou des appels à l’action à un utilisateur. Générateur d'IU est livré avec des modaux pour économiser du temps et de l’énergie.
• Étendre votre expérience d’interface utilisateur avec des composants de fenêtre d’affichage
  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 de trois façons. Vous pouvez ajouter un composant Viewport ou un onglet compatible Viewport à une page, ou ajouter un Viewport au composant Barre latérale contextuelle.
• Créer des popovers dans Générateur d'IU
  Utilisez des popovers sur une page de Générateur d’IU pour superposer des informations contextuelles ou des fonctionnalités afin d’aider les utilisateurs à 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 de 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 avec le contenu de la page ci-dessous.
• Cas d’utilisation du composant de calendrier
  Ajoutez et configurez le composant Calendrier sur une nouvelle Générateur d'IU page d’expérience.