Ajuster la visibilité des composants dans la création dynamique

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 4 minutes de lecture

    • Lors de la création de pages avec une création dynamique pour différents facteurs de forme, découvrez comment afficher ou masquer des composants en suivant les étapes permettant de masquer une image à la taille d’un mobile.

    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 à masquer les composants ou à afficher un composant différent entre les points d’arrêt. Il existe d’innombrables façons d’utiliser la visibilité des composants, mais voici quelques exemples :
    • Utilisez plusieurs composants de bouton horizontalement en haut d’une page pour la taille d’un ordinateur de bureau et d’une tablette. À la taille du mobile, masquez les boutons et affichez le composant de liste déroulante.
    • Utilisez une taille de bouton plus petite pour la taille du mobile, mais vérifiez que les boutons sont suffisamment grands pour que les utilisateurs puissent appuyer avec un pouce. Envisagez également de modifier l’emplacement des boutons pour le mobile.
    • Utilisez des images dans les pages de bureau et de tablette, mais masquez les images, en particulier les plus grandes, sur mobile.

    Dans cette procédure, affichez les boutons en haut pour les facteurs de forme de bureau et de tablette, mais masquez les boutons et utilisez le composant déroulant pour mobile.

    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.
      Flèche noire pointant vers l’icône de facteur de forme de bureau en haut d’une page de générateur d’IU en mode Éditeur.
    5. Ajoutez une mise en page en colonne en sélectionnant + Ajouter du contenu sous Corps dans l’arborescence de contenu.
    6. Dans l’onglet Mises en page , sélectionnez Colonne unique.
    7. Ajoutez le premier composant de bouton.
      1. Sélectionnez l’icône + au centre de la nouvelle colonne sur l’étape.
      2. Dans l’onglet Composants , recherchez et sélectionnez le composant Bouton .
      3. Dans le panneau de configuration, sélectionnez Aucun : configurer le composant manuellement.
      4. Dans le panneau de configuration, sous l’onglet Configurer , remplacez le texte par défaut du champ Étiquette en saisissant Tâches.
        Composant de bouton configurer l’onglet avec une flèche noire pointant vers le champ d’étiquette.
      5. Sélectionnez Enregistrer.
    8. Ajoutez deux autres boutons en répétant deux fois l’étape 7 et nommez les boutons Incidents et Changements dans 7d.
      Remarque :
      Pour ajouter les boutons, pointez sur le bouton 1 de l’arborescence de contenu, sélectionnez l’icône de menu, puis sélectionnez Ajouter après.

      Ajout après

    9. Vérifiez l’exactitude de l’arborescence de contenu et de la page.
      Arborescence de contenu et page avec des composants de mise en page en colonne, de colonne et de bouton ajoutés.
    10. Ajoutez de l’espace autour de chaque bouton.
      1. Dans l’arborescence de contenu, sélectionnez le bouton 1.
      2. Dans le panneau de configuration, sélectionnez l’onglet Styles .
      3. Dans Espacement, sélectionnez Marge.
      4. Dans le menu, sélectionnez XS (très petit).
        Panneau de configuration avec des flèches noires pointant vers l’option de marge et l’option de très petite taille.
      5. Sélectionnez Enregistrer.
    11. Ajoutez de l’espace autour des deux autres boutons en répétant l’étape 10 pour chacun.
    12. Changez les boutons du sens vertical au sens horizontal.
      1. Sélectionnez la colonne 1 dans l’arborescence de contenu.
      2. Dans le panneau de configuration, dans Direction, sélectionnez l’icône de ligne.

        Panneau de configuration de la colonne 1 avec une flèche noire pointant vers l’icône de ligne pour l’option de direction.

      3. Sélectionnez Enregistrer.
      La page a l’air bien à la largeur du bureau.

      Boutons affichés dans une disposition horizontale au niveau du facteur de forme de bureau.

    13. Sélectionnez l’icône de facteur de forme de la tablette.

      Flèche noire pointant vers l’icône de facteur de forme de tablette en haut d’une page UI Builder en mode Éditeur.

      L’espacement et la position des boutons sont également beaux pour la largeur de la tablette.

      Boutons affichés dans une disposition horizontale au niveau du facteur de forme de la tablette.

    14. Sélectionnez l’icône de création réactive pour mobile.

      Flèche noire pointant vers l’icône de facteur de forme mobile en haut d’une page de générateur d’IU en mode Éditeur.

      Les boutons utilisent presque tout l’espace horizontal à la plus petite taille.

      Boutons affichés dans une disposition horizontale au format mobile.

    15. Ajoutez le composant de liste déroulante.
      1. Sélectionnez le facteur de forme du bureau en haut de l’étape.
      2. Pointez sur le bouton 3 de l’arborescence de contenu, sélectionnez l’icône de menu, puis sélectionnez Ajouter après.
      3. Dans l’onglet Composants , recherchez et sélectionnez le composant Liste déroulante .
      4. Dans le panneau de configuration, sélectionnez Aucun : configurer le composant manuellement.
      5. Dans le panneau de configuration, dans l’onglet Configurer , supprimez le texte par défaut dans le texte de l’espace réservé et sélectionnez menu-outline dans Icône.
        Options de configuration du composant de liste déroulante.
      6. Sélectionnez Enregistrer.
    16. Masquez le composant de liste déroulante au niveau des facteurs de forme bureau et tablette.
      1. Dans l’arborescence de contenu, sélectionnez Liste déroulante 1.
      2. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Visibilité du composant pour afficher les options.
      3. Sélectionnez Masquer le composant.
      4. Sélectionnez Enregistrer.
    17. Au niveau du facteur de forme mobile, masquez les composants du bouton.
      1. Sélectionnez l’icône de facteur de forme mobile en haut de l’étape.
      2. Dans l’arborescence de contenu, sélectionnez le bouton 1.
      3. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Masquer le composant.
      4. Répétez les étapes b-c pour les boutons 2 et 3.
      5. Sélectionnez Enregistrer.
      Deux emplacements montrent que les composants de bouton sont masqués à la taille du mobile. Tout d’abord, dans le panneau de configuration, à côté de l’option Masquer le composant , sélectionnez l’icône mobile. Un message s’affiche pour confirmer que la valeur (masquer le composant sélectionné) correspond à la taille du mobile.

      Panneau de configuration avec l’onglet de configuration affiché et une flèche noire pointant vers le message.

      Ensuite, dans l’arborescence de contenu, les trois composants de bouton sont affichés avec l’icône masquée Masquée .
    18. Au niveau du facteur de forme mobile, affichez le composant de liste déroulante.
      1. Dans l’arborescence de contenu, sélectionnez Liste déroulante 1.
      2. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Masquer le composant pour effacer le champ.
      3. Sélectionnez Enregistrer.
    19. Sélectionnez Aperçu.
      Le facteur de forme mobile est affiché avec l’icône de menu. Si vous sélectionnez la flèche, les options par défaut s’affichent (élément de liste 1, élément de liste 2, etc.). Vous devez configurer le composant de liste déroulante pour afficher les tâches, les incidents et les changements tout comme les boutons horizontaux disponibles au niveau des facteurs de formulaire de la tablette et de l’ordinateur de bureau.

      Facteur de forme mobile affiché dans la superposition d’aperçu.

    20. Sélectionnez les icônes de facteur de forme Bureau et Tablette en haut.
      Les facteurs de forme des ordinateurs de bureau et des tablettes n’affichent que les boutons horizontaux, pas l’icône de menu.
    21. Fermez la superposition de l’aperçu en sélectionnant le X.