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 des composants 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é de la page consiste à adapter l’apparence 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 forme plus petits.

Procédure

1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour travailler ou créez une expérience en sélectionnant Créer > 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 la 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 du facteur de forme du 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 : configurez le composant manuellement.
10. Affichez la page au format de 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 du 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 simples à la configuration 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 Numéro est affichée. La barre de défilement horizontale a été supprimée.
14. Dans le panneau de configuration, dans l’onglet Configurer , faites défiler vers le bas pour apporter les modifications suivantes dans la section En-tête :
    1. Changez la taille en petite.
    2. Sélectionnez l’option Masquer les informations de la dernière actualisation .
    3. Sélectionnez l’option Masquer les actions sur la liste .
       
       Au fur et à mesure que vous apportiez un changement, l’étape se mettait à jour automatiquement. L’en-tête est de plus petite taille, l’heure d’actualisation a été supprimée et l’icône des actions de la liste a été supprimée.
    4. Sélectionnez Enregistrer.
15. Sur l’étape, faites défiler jusqu’au bas de la vue mobile.
16. Dans le panneau de configuration, dans 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 Masquer les lignes par page.
    4. Sélectionnez Enregistrer.
    La plage, le nombre de lignes et le nombre de lignes par sélecteur de 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 de 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 pour le facteur de forme mobile.
    
18. Sélectionnez les icônes de facteur de forme de tablette et d’ordinateur de bureau en haut pour confirmer qu’aucun changement n’a été apporté aux facteurs de forme plus grands.