Ajustement de la visibilité des composants dans la création dynamique

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 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 effectuant les étapes pour masquer une image à la taille mobile.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Une méthode permettant d’augmenter la convivialité des pages consiste à masquer des 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’ordinateur et de tablette, mais à 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 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 poste de travail 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 de liste déroulante pour mobile.

    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.
      Flèche noire pointant vers l’icône de facteur de forme de bureau en haut d’une page du 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 : configurez le composant manuellement.
      4. Dans le panneau de configuration, dans l’onglet Configurer , remplacez le texte par défaut dans le 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 l’étape 7 deux fois et dans 7d, nommez les boutons Incidents et Changements.
      Remarque :
      Pour ajouter les boutons, pointez sur le bouton 1 dans l’arborescence de contenu, sélectionnez l’icône de menu, puis sélectionnez Ajouter après.

      Ajout après

    9. Vérifiez que l’arborescence de contenu et la page sont exactes.
      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. Sur le panneau de configuration, dans Direction, sélectionnez l’icône de ligne.

        Panneau de configuration pour 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 s’affiche bien à la largeur du bureau.

      Boutons affichés en disposition horizontale au format 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 du générateur d’IU 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 format de la tablette.

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

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

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

      Boutons affichés en disposition horizontale au format mobile.

    15. Ajoutez le composant de liste déroulante.
      1. Sélectionnez le facteur de forme de bureau en haut de l’étape.
      2. Pointez sur le bouton 3 dans 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 : configurez le composant manuellement.
      5. Dans le panneau de configuration, sous l’onglet Configurer , supprimez le texte par défaut dans Texte d’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 aux facteurs de forme des ordinateurs de bureau et des tablettes.
      1. Dans l’arborescence de contenu, sélectionnez Liste déroulante 1.
      2. Dans le panneau de configuration, dans 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 du 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.

      Deuxièmement, dans l’arborescence de contenu, les trois composants de bouton sont affichés avec l’icône masquée Icône 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, dans 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 s’affiche 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 pouvez 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 forme des tablettes et des ordinateurs de bureau.

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

    20. Sélectionnez les icônes de facteur de forme de bureau et de 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.