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 Bildschirmbereich, indem Sie eine Layout-Gruppe verwenden, die Informationen in geordneten Segmenten anordnet.

Beispielsweise können Sie eine Layout-Gruppe so konfigurieren, dass zugehörige Informationen als eine Reihe von Tabs angezeigt werden, die der Benutzer effizient durchsuchen kann.

Nachdem Sie eine Layoutgruppe erstellt haben, können Sie diese als Grundlage für einen Bereich in einer Designvorlage verwenden.

  1. Klicken Sie im Navigationspanel von Dev Studio auf Case types und dann auf den Case-Typ, den Sie öffnen möchten.

  2. Führen Sie einen neuen Case aus, indem Sie auf Save and run klicken.

  3. Navigieren Sie in dem neuen Case zu dem Layout, das Sie bearbeiten möchten.

  4. Klicken Sie in der Fußzeile von Dev Studio auf das Icon Live UI.

    Hinweis: Das Tool „Live UI“ wird aktiviert. Sie können jetzt die User-Interface-Komponenten in Echtzeit überprüfen.
  5. Klicken Sie auf das Layout, das Sie bearbeiten möchten, und dann auf das Icon Open in Dev Studio.

  6. Basiert Ihr Abschnitt auf einer nicht bearbeitungsfähigen Vorlage, klicken Sie auf Convert to full section editor.

  7. Klappen Sie im Tab Design die Liste Structural auf und ziehen Sie danach die Layout group in den Arbeitsbereich.

  8. Im Dialogfeld Choose layout-group format wählen Sie für die Layout-Gruppe eines der folgenden Formate aus:

    • Um Layouts als einfache Seiten ohne Headers oder Menüs anzuzeigen, wählen Sie Default aus.
    • Um Layouts unter zusammenklappbaren Headers anzuzeigen, wählen Sie Accordion aus.
    • Um Layouts nacheinander als Optionen in einem Menü anzuzeigen, wählen Sie Menu aus.
    • Um alle Layouts gleichzeitig anzuzeigen, wobei die Layouts aufeinandergestapelt sind, wählen Sie Stacked aus.
    • Um nur ein Layout mit einem Tab für jedes Layout anzuzeigen, wählen Sie Tab aus.
    • Um Layouts in einem benutzerdefinierten Format anzuzeigen, das in einer Skin festgelegt ist, wählen Sie Other aus und danach das Format aus.
  9. Um Layouts oder Container-Elemente in eine Layout-Gruppe aufzunehmen, klappen Sie die Liste Structural und die Elemente auf, die Sie in die Layout-Gruppe aufnehmen möchten.

Beispiel: 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 Startseite der UI Gallery.

  • Vordefinierten Bereich basierend auf einer Layout-Gruppe erstellen

    Sie verwenden eine Layoutgruppe, um enge Bezugsinformationen mit Accordion-, Menü-, Stapel- oder Tab-Navigationsmechanismen darzustellen. Sie können einen vordefinierten Bereich erstellen, der auf einer Layoutgruppe basiert. Das kann nützlich sein, wenn Benutzer zur Laufzeit in App Studio Tabs hinzufügen, neu anordnen oder von Bildschirmen entfernen müssen.

  • Formular „Skin“ — Tab „Components“ — Layouts — Layout Groups

    Eine Layout-Gruppe vereint verschiedene Layout-Typen, um einen Satz von Inhalten anzuzeigen, z. B. eine Liste von Finanzkonten und zugehörigen Transaktionen. Sie verwenden eine Layoutgruppe, um anzugeben, wie Informationsgruppen bewegt werden sollen. Dies könnte z. B. ein Tab für jedes Konto sein. Sie können den Typ ändern, um die Kontoliste in einem der folgenden Formate anzuzeigen: Drop-down, Accordion, Tab oder Liste.

  • Formular „Skin“ — Tab „Components“ — Layouts — Containers

    Diese Gestaltungselemente gelten für den Container-Header. Sie können Gestaltungselemente für das Standard-Containerformat angeben und benutzerdefinierte Containerformate erstellen.

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