Skip to main content

Layout-Gruppe erstellen

Pega Community-Logo

Hinweis: Der folgende Inhalt, der von Pega Community stammt, ist hier enthalten, damit Sie die Lernziele des Moduls einfacher erreichen können.

Optimieren Sie den Fensterbereich mithilfe einer Layout-Gruppe, die Informationen in geordneten Segmenten anordnet.

Sie haben beispielsweise vor, eine Layout-Gruppe so zu konfigurieren, dass zusammengehörige Informationen als eine Reihe von Tabs angezeigt werden, die der Benutzer effizient durchsuchen kann. Sie möchten den Stil der übrigen Benutzeroberfläche einheitlich übernehmen und das Layout soll ein Label haben.

Hinweis: Die Startseite der UI Gallery enthält ein Arbeitsbeispiel der Layoutgruppe, das Sie als Referenz verwenden oder direkt in die Anwendung kopieren können. Weitere Informationen finden Sie unter Auf die UI Gallery zugreifen.
Bevor Sie anfangen: Erstellen oder bestimmen Sie einen Abschnitt, in den das Layout eingefügt werden soll. Weitere Informationen finden Sie unter Abschnitte erstellen.
  1. Suchen und öffnen Sie einen vorhandenen Abschnitt.

  2. Basiert der Abschnitt auf einer Vorlage, klicken Sie im Header des Section-Editors auf Convert to full section editor und bestätigen Sie die Umwandlung.

  3. Erweitern Sie im Tab Design die Liste Structural und ziehen Sie danach das Element Layout group in den Arbeitsbereich.

  4. Wählen Sie im Dialogfenster Choose layout-group format ein Format für die Layout-Gruppe aus.

    Beispiel: Wählen Sie Tab aus, um Inhalte in Tabs zu gruppieren.
  5. Klicken Sie im Header Layout group auf das Icon View properties.

  6. Geben Sie im Fenster Layout group properties auf dem Tab General die Layout-Einstellungen an:

    1. Bestimmen Sie in der Liste Container format das Aussehen des Layouts.

      Beispiel: Zum Anwenden der Standardformatierung, die Sie in der Skin definiert haben, legen Sie Container format auf Default fest. Weitere Informationen finden Sie unter Layout-Stil festlegen.
    2. Wählen Sie im Feld Visibility, wann die Layout group angezeigt werden soll.

      Beispiel: Wenn Sie möchten, dass das Layout für alle Benutzer sichtbar ist, legen Sie für Visibility die Option Always fest.
    3. Wählen Sie im Abschnitt Caption, welche Art Text Sie verwenden möchten. Füllen Sie dann den Abschnitt Settings aus.

      Beispiel: Wählen Sie im Feld Caption die Option Label aus. Im Feld Label geben Sie dann Related information ein.
    4. Wählen Sie im Feld Heading level den für das Layout gewünschten Header-Typ aus.

  7. Optional:

    Zum Angeben eines benutzerdefinierten CSS-Verhaltens aktivieren Sie auf dem Tab Presentation die Checkbox Display advanced presentation options und legen dann die Einstellungen fest. Dazu können Sie beliebig viele der folgenden Aktionen vornehmen:

    • Soll die Layout-Gruppe unter anderen schwebenden Layout-Gruppen innerhalb des Containers angezeigt werden, der die Gruppe beinhaltet, aktivieren Sie die Checkbox Clear floated layouts.
    • Wenn Sie den Inline-Stil für das Layout festlegen möchten, geben Sie CSS-Code in das Feld Inline style (not for production use) ein.
      Hinweis: Bei Inline-Stil-Eingaben wird eine Guardrail-Warnung erzeugt. Verwenden Sie zugunsten der Pflege und Wiederverwendbarkeit eine benutzerdefinierte CSS-Klasse. Weitere Informationen finden Sie unter CSS-Helper-Klassen.
    • Den Stil des Layout-Containers geben Sie an, indem Sie in der Liste Content CSS class eine vordefinierte Klasse auswählen oder auf das Icon Open class editor klicken, um eine Liste der verfügbaren Helper-Klassen aufzurufen.
  8. Klicken Sie auf Submit.

  9. Klicken Sie im Abschnittformular auf Save.

Wenn bei Ihrer Schulung Probleme auftreten, lesen Sie bitte die Pega Academy Support FAQs.

Fanden Sie diesen Inhalt hilfreich?

Möchten Sie uns dabei helfen, diesen Inhalt zu verbessern?

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