Spaltenlayouts

Spaltenlayouts werden zum Entwerfen und Organisieren von UI Builder Seiten verwendet.

In diesem Video wird gezeigt, wie Sie das folgende Verfahren durchführen.

Mit Spaltenlayouts können Sie nützliche und optisch ansprechende Seiten in einer Experience erstellen. Ein Spaltenlayout ist eine Art flexibler Container, der Komponenten enthalten kann. Spaltenlayouts sind einfache, vorkonfigurierte Layouts, mit denen Sie schnell eine effiziente und ansprechende Seite entwerfen können. Es ist nützlich, die Struktur der Seite mit Spaltenlayouts zu definieren und festzulegen, bevor Komponenten hinzugefügt werden.

Spaltenlayouts können Spalten mit gleicher oder unterschiedlicher Breite enthalten.

Sie können das Spaltenlayout als Ganzes und die einzelnen Spalten innerhalb des Layouts konfigurieren. Legen Sie beispielsweise eine andere Rahmenbreite und -farbe für ein Spaltenlayout und für die einzelnen Spalten innerhalb des Layouts fest.

Hinweis:

Derzeit wird das Ausblenden/Anzeigen von Spalten in einem Spaltenlayout basierend auf Bedingungen nicht unterstützt.

Fügen Sie ein Spaltenlayout hinzu

Fügen Sie ein Spaltenlayout in UI Builder hinzu , um eine Struktur zu erstellen und Komponenten auf einer Experience-Seite zu organisieren.

Vorbereitungen

Erforderliche Rolle: ui_builder_admin

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenauswählen.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Erstellen Sie eine Seite in UI Builder oder öffnen Sie eine Seite.
4. Wählen Sie in der Inhaltsstruktur + Komponente hinzufügen aus.
5. Wählen Sie eine der Basisoptionen auf der Registerkarte Layouts aus.
   
   Das Spaltenlayout wird in der Phase angezeigt, sodass Sie den Spalten Komponenten hinzufügen können. Weitere Informationen finden Sie unter Fügen Sie Komponenten hinzu, und konfigurieren Sie sie.
6. Fügen Sie zusätzliche Spaltenlayouts oben oder unten hinzu.
   • Halten Sie in der Inhaltsstruktur einen Spaltenlayoutnamen gedrückt (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für ein Spaltenlayout aus. Wählen Sie dann Hinzufügen vor oder Hinzufügen nach aus der Liste aus, und wählen Sie ein Layout aus.

     

   • Wählen Sie in der Phase ein Spaltenlayout und dann oben oder unten das Pluszeichen aus.

     

Konfigurieren Sie Spaltenlayouts

Konfigurieren Sie Spaltenlayouts in UI Builder, um die entsprechende Anzahl von Spalten und das gewünschte Aussehen auf einer Experience-Seite hinzuzufügen.

Vorbereitungen

Erforderliche Rolle: ui_builder_admin

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenauswählen.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Erstellen Sie eine Seite in UI Builder oder öffnen Sie eine Seite.
4. Wenn die Seite noch kein Spaltenlayout enthält, Fügen Sie ein Spaltenlayout hinzu.
5. Fügen Sie (maximal sechs) Spalten mithilfe der Inhaltsstruktur, der Phase oder des Konfigurationsbereichs hinzu.
   • Wählen und halten Sie in der Inhaltsstruktur einen Spaltennamen (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für eine Spalte aus, und wählen Sie dann Spalte hinzufügen vor oder Spalte hinzufügen nach aus der Liste aus.

     

   • Wählen Sie in der Phase eine einzelne Spalte aus, wählen Sie das Menüsymbol neben dem Spaltennamen aus, und wählen Sie dann Spalte hinzufügen vor oder Spalte hinzufügen nach aus der Liste aus.

     

   • Wählen und halten Sie in der Phase eine Spalte (oder klicken Sie mit der rechten Maustaste darauf), und wählen Sie dann Spalte hinzufügen vor oder Spalte hinzufügen nach aus der Liste aus.

     

   • Wählen Sie in der Inhaltsstruktur ein Spaltenlayout aus, und wählen Sie dann in der Phase das Pluszeichen + aus, um auf der rechten Seite des Spaltenlayouts Spalten hinzuzufügen.

     

   • Wählen Sie in der Inhaltsstruktur ein Spaltenlayout aus, und verwenden Sie dann im Konfigurationsbereich das Pluszeichen (+) neben Spalten, um auf der rechten Seite des Spaltenlayouts Spalten hinzuzufügen.

     

   Hinweis:

   Spalten können ineinander geschachtelt werden, aber diese Komplexität ist auf Seiten nicht oft erforderlich.
6. Benennen Sie eine Spalte um, indem Sie die Spaltenbezeichnung in der Inhaltsstruktur, der Phase oder dem Konfigurationsbereich bearbeiten.
   • Wählen und halten Sie in der Inhaltsstruktur einen Spaltennamen (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für eine Spalte und dann Umbenennenaus.
   • Wählen Sie in der Phase neben einem Spaltennamen das Menüsymbol und dann Umbenennenaus.
   • Wählen Sie im Konfigurationsbereich das Informationssymbol neben dem Spaltennamen aus.
   Durch das Umbenennen von Spalten können Sie zwischen verschiedenen Spalten in der Phase und in der Inhaltsstruktur unterscheiden. Wenn Sie eine komplexe Seite mit vielen Spaltenlayouts und Spalten haben, ist es nützlich, Spalten umzubenennen.
7. Um die Breite einer Spalte in einem Layout zu ändern, wählen Sie das Spaltenlayout aus (in der Inhaltsstruktur oder in der Phase) und ziehen dann eine Spaltentrennung in der Phase nach links oder rechts, um die Spalte schmaler oder breiter zu machen.
   
   Die Breitenprozentsätze am oberen Rand der Spalten ändern sich automatisch, wenn Sie die Spaltentrennlinie ziehen. Die Prozentsätze ergeben zusammen 100 %. Wenn Sie die Größe einer Spalte ändern, beachten Sie, wie viel Platz die Komponente(n) in der Spalte benötigt. Beispielsweise werden Listen- und Formularkomponenten in schmalen Spalten normalerweise nicht gut angezeigt.
8. Verteilen Sie Spalten in einem Layout mithilfe der Inhaltsstruktur, der Phase oder des Konfigurationsbereichs gleichmäßig über die Horizontale.
   • Wählen und halten Sie in der Inhaltsstruktur einen Spaltenlayoutnamen (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für ein Spaltenlayout aus, und wählen Sie dann Spalten gleichmäßig verteilen aus der Liste aus.
   • Wählen Sie in der Phase ein Spaltenlayout aus, wählen Sie das Menüsymbol neben dem Namen des Spaltenlayouts aus, und wählen Sie dann Spalten gleichmäßig verteilen aus der Liste aus.
   • Wählen Sie ein Spaltenlayout aus (in der Inhaltsstruktur oder in der Phase), und wählen Sie im Konfigurationsbereich Spalten gleichmäßig verteilenaus.
9. Spalten (einschließlich ihres Inhalts) innerhalb eines Spaltenlayouts mithilfe der Inhaltsstruktur oder der Phase neu anordnen.
   • Wählen Sie in der Inhaltsstruktur die Spalte aus, und ziehen Sie sie an eine neue Position (eine blaue horizontale Linie zeigt an, wo die Spalte abgelegt werden kann).
   • Wählen Sie in der Phase eine Spaltenkopfzeile aus, ziehen Sie die Spalte an eine neue Position, und legen Sie die Spalte in der Drop-Zone ab, die durch eine vertikale violette Linie definiert ist.
   Wenn Sie die Spalte in der Inhaltsstruktur neu anordnen, wird die Phase aktualisiert, und wenn Sie die Spalte in der Phase neu anordnen, wird die Inhaltsstruktur aktualisiert.
10. Geben Sie den Abstand zwischen Spalten aus der Inhaltsstruktur, der Phase oder dem Konfigurationsbereich an.
    • Wählen und halten Sie in der Inhaltsstruktur einen Spaltenlayoutnamen (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für ein Spaltenlayout aus, wählen Sie Layout aus der Liste aus, und wählen Sie eine Größenoption unter Spaltenabstandaus.
    • Wählen Sie in der Phase ein Spaltenlayout aus, wählen Sie das Menüsymbol neben dem Namen des Spaltenlayouts, wählen Sie Layout aus der Liste aus, und wählen Sie unter Spaltenabstand eine Größenoptionaus.
    • Wählen Sie ein Spaltenlayout aus (in der Inhaltsstruktur oder in der Phase), und wählen Sie im Konfigurationsbereich eine Größenoption unter Spaltenabstandaus.
11. Wählen Sie das Struktursymbol aus, um zu einer anderen Inhaltsebene zu navigieren, z. B. von einer Spalte zum übergeordneten Spaltenlayout oder einer untergeordneten Komponente.
    
12. Löschen Sie Spalten aus der Inhaltsstruktur oder der Phase.
    • Halten Sie in der Inhaltsstruktur einen Spaltennamen gedrückt (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für eine Spalte und dann in der Liste die Option Spalte löschen aus.
    • Wählen Sie in der Phase eine einzelne Spalte aus, wählen Sie das Menüsymbol neben dem Spaltennamen aus, und wählen Sie dann Spalte löschen aus der Liste aus.
    • Wählen Sie in der Inhaltsstruktur ein Spaltenlayout aus, und verwenden Sie dann im Konfigurationsbereich das Minus-Symbol neben Spalten, um Spalten von der rechten Seite des Spaltenlayouts zu entfernen.

Legen Sie den Abstand zwischen und in Spalten fest

Legen Sie den Abstand zwischen Spalten in einem Spaltenlayout in UI Builderfest . Wenn eine Spalte mehrere Komponenten enthält, legen Sie den horizontalen oder vertikalen Abstand zwischen den Komponenten fest.

Vorbereitungen

Erforderliche Rolle: ui_builder_admin

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenwählen.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Erstellen Sie eine Seite in UI Builder oder öffnen Sie eine Seite.
4. Wenn die Seite noch kein Spaltenlayout enthält, Fügen Sie ein Spaltenlayout hinzu.
5. Geben Sie den Abstand zwischen Spalten aus der Inhaltsstruktur, der Phase oder dem Konfigurationsbereich an.
   • Wählen und halten Sie in der Inhaltsstruktur einen Spaltenlayoutnamen (oder klicken Sie mit der rechten Maustaste), oder wählen Sie das Menüsymbol für ein Spaltenlayout aus, wählen Sie Layout aus der Liste aus, und wählen Sie eine Größenoption unter Spaltenabstandaus.
   • Wählen Sie in der Phase ein Spaltenlayout aus, wählen Sie das Menüsymbol neben dem Namen des Spaltenlayouts, wählen Sie Layout aus der Liste aus, und wählen Sie unter Spaltenabstand eine Größenoptionaus.
   • Wählen Sie ein Spaltenlayout aus (in der Inhaltsstruktur oder in der Phase), und wählen Sie im Konfigurationsbereich eine Größenoption unter Spaltenabstandaus.
6. Um den Abstand zwischen mehreren Komponenten in einer einzelnen Spalte anzugeben, wählen Sie die Spalte in der Inhaltsstruktur aus.
7. Wählen Sie im Konfigurationsbereich eine Größenoptionin Abstand aus.
8. Um zwischen dem Stapeln der Komponenten und dem Anordnen nebeneinander zu wechseln, wählen Sie das Zeilen- oder Spaltensymbol in Richtungaus.

Legen Sie erweiterte Optionen für das Spaltenlayout fest

Legen Sie erweiterte Spaltenlayoutoptionen in UI Builder fest, einschließlich Stapelbreite und Spaltenlayouthöhe.

Vorbereitungen

Erforderliche Rolle: admin

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenwählen.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Erstellen Sie eine Seite in UI Builder oder öffnen Sie eine Seite.
4. Wenn die Seite noch kein Spaltenlayout enthält, Fügen Sie ein Spaltenlayout hinzu.
5. Wählen Sie ein Spaltenlayout mit mindestens zwei Spalten in der Inhaltsstruktur aus.
   
6. Um eine Stapelbreite festzulegen, wechseln Sie zu „Konfigurationsbereich“ > „Layout“, und wählen Sie Erweiterte Layoutoptionen anzeigen aus.
   Hinweis:

   Durch das Festlegen einer Stapelbreite können Sie steuern, wie eine Seite mit Spaltenlayouts in einem schmalen Browserfenster, Tablet oder Mobilgerät aussieht.

   
7. Geben Sie eine Breite in Stapelspalten untenein.
8. Wählen Sie Speichern.
9. Um die neue Stapelbreite zu testen, wählen Sie den Pfeil neben Vorschau und dann URL-Pfad öffnen aus.
10. Reduzieren Sie die Breite des Browserfensters auf weniger als die Stapelbreite, die Sie angegeben haben, um sicherzustellen, dass die Spalten auf der rechten Seite unter die erste Spalte verschoben werden.
11. Schließen Sie die Browserregisterkarte, die mit dem URL-Pfad geöffnet wurde.
12. Um die Höhe des Spaltenlayouts zu steuern, wählen Sie ein Spaltenlayout mit mindestens zwei Spalten in der Inhaltsstruktur aus, wechseln Sie zu „Konfigurationsbereich“ > „Layout“und wählen Sie Erweiterte Layoutoptionen anzeigen aus.
    Hinweis:

    Das Festlegen der Höhe ist nützlich, wenn Ihr Spaltenlayout eine Komponente enthält, die hoch sein kann, z. B. die Listenkomponente.
13. Geben Sie unter „ Größenanpassung“ Zahlen in eine oder mehrere der Optionen ein (Höhe, Min. Hund max. H), und legen Sie die Größeneinheit fest (z. B. px, %oder em).
    
14. Wählen Sie Speichern.
15. Um die neue Größenanpassung zu testen, wählen Sie den Pfeil neben Vorschau und dann URL-Pfad öffnen aus.
16. Reduzieren und erweitern Sie die Höhe des Browserfensters, um die angegebenen Werte zu testen.
17. Schließen Sie die Browserregisterkarte, die mit dem URL-Pfad geöffnet wurde.