Skip to main content

Créer un groupe de mise en page

Logo Pega Community

Note : Le contenu suivant, qui provient de Pega Community, est inclus ici pour vous aider à atteindre plus facilement les objectifs d'apprentissage du module.

Optimisez la zone de la fenêtre en utilisant un groupe de mise en page pour organiser les informations en segments ordonnés.

Par exemple, vous souhaitez configurer un groupe de mise en page pour afficher les informations connexes sous la forme d’une série d’onglets que l’utilisateur peut parcourir efficacement. Vous voulez que les styles soient cohérents avec le reste de l’interface utilisateur et que la mise en page inclut un libellé.

Note: La page d’accueil UI Gallery contient un exemple concret du groupe de mise en page que vous pouvez utiliser comme référence ou copier directement vers l’application. Pour plus d’informations, consultez la rubrique Accéder à l’UI Gallery.
Before you begin: Créez ou identifiez une section dans laquelle imbriquer votre mise en page. Pour plus d’informations, consultez la rubrique Créer des sections.
  1. Recherchez et ouvrez une section.

  2. Si la section est basée sur un modèle, cliquez sur convert to full section editor dans l’en-tête de l’éditeur de section, puis confirmez la conversion.

  3. Dans l’onglet Design, développez la liste Structural, puis faites glisser l’élément Layout group sur la zone de travail.

  4. Dans la boîte de dialogue Choose layout-group format, sélectionnez un format pour le groupe de mise en page.

    For example: Regroupez le contenu en onglets en sélectionnant Tab.
  5. Dans l’en-tête Layout group, cliquez sur l’icône View properties.

  6. Dans la fenêtre Layout group properties, sur l’onglet General, indiquez les paramètres de la mise en page :

    1. Dans la liste Container format, définissez l’apparence de la mise en page.

      For example: Appliquez le formatage par défaut que vous avez défini dans le skin en paramétrant Container format sur Default. Pour plus d’informations, consultez la rubrique Appliquer un style à une mise en page.
    2. Dans le champ Visibility, sélectionnez à quel moment afficher le groupe de mise en page.

      For example: Rendez la mise en page visible pour tous les utilisateurs en définissant Visibility sur Always.
    3. Dans la section Caption, sélectionnez le type de texte à utiliser, puis renseignez la section Settings.

      For example: Dans le champ Caption, sélectionnez Label, puis dans le champ Label, saisissez des informations liées.
    4. Dans le champ Heading level, sélectionnez le type d’en-tête à utiliser pour la mise en page.

  7. Facultatif :

    Pour spécifier un comportement CSS particulier, sur l’onglet Presentation, cochez la case Display advanced presentation options, puis définissez les paramètres en effectuant les actions de votre choix parmi les suivantes :

    • Pour afficher le groupe de mise en page sous d’autres groupes de mise en page flottants au sein du conteneur dans lequel se trouve le groupe, cochez la case Clear floated layouts.
    • Pour définir le style en ligne de la mise en page, dans le champ Inline style (not for production use), saisissez du code CSS.
      Note: La saisie d’un style en ligne génère un avertissement de garde-fou. Pour faciliter la gestion et la réutilisation, utilisez une classe CSS personnalisée. Pour plus d’informations, consultez la rubrique Classes d’aide CSS.
    • Pour spécifier le style du conteneur de mise en page, dans la liste Content CSS class, sélectionnez une classe prédéfinie ou cliquez sur l’icône Open class editor pour voir une liste des classes d’aide disponibles.
  8. Cliquez sur Submit.

  9. Dans le formulaire de la section, cliquez sur Save.

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice