Ajustement de la visibilité du composant dans la création dynamique

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 4 minutes de lecture

    • Lors de la création de pages avec la création dynamique pour différents facteurs de forme, découvrez comment afficher ou masquer des composants en suivant les étapes de masquage d’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 pour améliorer la convivialité de la page 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 en voici quelques exemples :
    • Utilisez plusieurs composants de boutons horizontalement en haut d’une page pour les ordinateurs de bureau et les tablettes, mais au format 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 le pouce. Envisagez également de modifier l’emplacement des boutons pour les appareils mobiles.
    • Utilisez des images dans les pages des ordinateurs de bureau et des tablettes, mais masquez les images, en particulier les plus grandes, sur les appareils mobiles.

    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 dans laquelle 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, voir Créer une page dans le générateur d’IU.
    4. En haut de l’écran, vérifiez que l’icône du facteur de forme du bureau est sélectionnée.
      Flèche noire pointant vers l’icône du 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 de 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 composant du premier bouton.
      1. Sélectionnez l’icône + au centre de la nouvelle colonne de 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 dans le champ Étiquette en saisissant Tâches.
        Composant de bouton configurer l’onglet avec la 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, 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 (extra small).
        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. Passez les boutons de la direction verticale à la direction horizontale.
      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 pour la colonne 1 avec 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 format du bureau.

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

      Flèche noire pointant vers une 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 bons pour la largeur de la tablette.

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

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

      Flèche noire pointant vers une icône de facteur de forme mobile en haut d’une page du 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 facteur de forme 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 Dropdown.
      4. Dans le panneau de configuration, sélectionnez Aucun : configurer le composant manuellement.
      5. Dans le panneau de configuration, sous l’onglet Configurer , supprimez le texte par défaut dans le texte d’espace réservé et sélectionnez le contour du menu dans l’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 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, 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 format Mobile, masquez les composants du bouton.
      1. Sélectionnez l’icône du 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 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 mobile.

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

      Deuxièmement, dans l’arborescence de contenu, les trois composants du bouton sont affichés avec l’icône masquée de l’icône masquée .
    18. Au format 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 pouvez configurer le composant de liste déroulante pour afficher les tâches, les incidents et les changements comme les boutons horizontaux disponibles aux formats de tablette et de bureau.

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

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