Configuration des composants pour la création dynamique

Lors de la création de pages avec une création dynamique pour différents facteurs de forme, découvrez comment l’ajustement de certaines options de configuration de composant peut améliorer l’apparence et le fonctionnement des pages dans des tailles plus petites.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Une méthode pour améliorer la convivialité des pages consiste à adapter l’aspect et la convivialité des composants à l’aide de différentes configurations sur les points d’arrêt. Il existe d’innombrables façons d’utiliser la configuration des composants. Dans cette procédure, modifiez plusieurs options de configuration du composant Liste afin de le rendre plus adapté aux facteurs de formulaire plus petits.

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour travailler ou créer une expérience en sélectionnant Créer une expérience >.
   Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
3. Créez une page à partir de zéro avec une création dynamique.
   Pour plus d’informations sur la création d’une page, consultez Créer une page dans Générateur d’IU.
4. En haut, vérifiez que l’icône de facteur de forme Bureau est sélectionnée.
   
5. À l’étape, sélectionnez + Ajouter du contenu.
6. Dans l’onglet Mises en page , sélectionnez Colonne unique.
7. Ajoutez le composant de liste en sélectionnant l’icône + au centre de la nouvelle colonne.
8. Dans l’onglet Composants , recherchez et sélectionnez le composant Liste .
9. Dans le panneau de configuration, sélectionnez Aucun : configurer le composant manuellement.
10. Affichez la page au format bureau.
    

    Notez les éléments affichés, notamment les icônes en haut, le nombre de colonnes et les informations de pagination en bas.

11. Sélectionnez l’icône de facteur de forme mobile.

    

    Au niveau du facteur de forme mobile, le composant de liste est encombré et contient des barres de défilement verticales et horizontales.

    

    Apportez quelques modifications de configuration simples pour améliorer la convivialité et l’apparence du facteur de forme mobile.

12. Sélectionnez la liste 1 dans l’arborescence de contenu.
13. Dans le panneau de configuration, dans l’onglet Configurer , recherchez le champ Nombre de colonnes affichées et saisissez 1.
    Seule la colonne Number (Nombre) s’affiche. La barre de défilement horizontale a été supprimée.
14. Dans le panneau de configuration, sous l’onglet Configurer , faites défiler vers le bas pour apporter les changements suivants dans la section En-tête :
    1. Passez la taille en petite.
    2. Sélectionnez l’option Masquer les dernières informations d’actualisation .
    3. Sélectionnez l’option Masquer les actions sur la liste .
       
       À chaque changement, l’étape se mettait à jour automatiquement. L’en-tête est de plus petite taille, le temps d’actualisation a été supprimé et l’icône des actions de la liste a été supprimée.
    4. Sélectionnez Enregistrer.
15. Sur l’étape, faites défiler vers le bas de la vue mobile.
16. Dans le panneau de configuration, sous l’onglet Configurer , faites défiler vers le bas et apportez les modifications suivantes dans la section Pagination (si nécessaire, sélectionnez Pagination pour développer le champ) :
    1. Sélectionnez l’option Masquer la plage .
    2. Sélectionnez l’option Masquer le nombre de lignes .
    3. Sélectionnez le sélecteur Hide rows per page (Masquer les lignes par page).
    4. Sélectionnez Enregistrer.
    La plage, le nombre de lignes et le sélecteur de lignes par page ont été supprimés. (Le nombre de lignes est toujours disponible en haut de l’écran mobile).

    

    Dans le panneau de configuration, les options et les champs que vous avez modifiés sont marqués par l’icône en cascade mobile.

17. Sélectionnez l’icône en cascade mobile en regard d’une option ou d’un champ pour confirmer que la valeur est destinée au facteur de forme mobile.
    
18. Sélectionnez les icônes de facteur de forme de tablette et de bureau en haut pour confirmer qu’aucune modification n’a été apportée aux facteurs de forme plus grands.