Spaltenlayouts

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 9 Minuten Lesedauer

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

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

    Mit Spaltenlayouts können Sie nützliche und visuell ansprechende Seiten in einer Experience erstellen. Ein Spaltenlayout ist eine Art von flexiblem Container, der Komponenten enthalten kann. Spaltenlayouts sind einfache Layouts, die vorkonfiguriert sind, sodass Sie schnell eine effiziente und ansprechende Seite entwerfen können. Es ist nützlich, die Struktur der Seite vor dem Hinzufügen von Komponenten mit Spaltenlayouts zu definieren und festzulegen.

    Spaltenlayouts können Spalten mit gleichen oder unterschiedlichen Breiten enthalten.

    Beispiele für in UI Builder verfügbare Spaltenlayouts.

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

    UI Builder-Seite mit einem einspaltigen Layout, das eine Überschrift und darunter ein dreispaltiges Layout enthält.

    Hinweis:
    Derzeit wird das Ausblenden/Einblenden 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 darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
    3. Erstellen Sie eine Seite in UI Builder oder öffnen Sie eine Seite.
    4. Wählen Sie in der Inhaltsstruktur die Option + Inhalt hinzufügen aus.
    5. Wählen Sie eine der Standardoptionen auf der Registerkarte Layouts.
      Unverankertes Komponentenmenü in UI Builder mit angezeigter Registerkarte „Layouts“ und den grundlegenden Optionen für das Spaltenlayout.
      Das Spaltenlayout wird in der Phase angezeigt, sodass Sie den Spalten Komponenten hinzufügen können. Weitere Informationen finden Sie unter Komponenten hinzufügen und konfigurieren.Spaltenlayout mit drei leeren Spalten.
    6. Fügen Sie darüber oder darunter zusätzliche Spaltenlayouts hinzu.
      • Klicken Sie in der Inhaltsstruktur auf einen Spaltenlayoutnamen, und halten Sie ihn, (oder klicken Sie mit der rechten Maustaste darauf), 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.

        Inhaltsstruktur mit ausgewähltem Spaltenlayout-Menüsymbol, das die Optionen anzeigt, die vor oder nach dem ausgewählten Spaltenlayout hinzugefügt werden sollen.

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

        Vorhandenes Layout mit zwei Spalten mit Pluszeichen-Symbolen zum Hinzufügen zusätzlicher Spaltenlayouts.

    Konfigurieren Sie Spaltenlayouts

    Konfigurieren Sie Spaltenlayouts in UI Builder, um die entsprechende Anzahl von Spalten und das gewünschte Erscheinungsbild 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 darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen 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.
      • Klicken Sie in der Inhaltsstruktur auf einen Spaltennamen, und halten Sie ihn, (oder klicken Sie mit der rechten Maustaste darauf), 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 danach aus der Liste aus.

        Inhaltsstruktur mit ausgewähltem Spaltenmenüsymbol, das die Optionen zum Hinzufügen einer Spalte vor oder nach der ausgewählten Spalte anzeigt.

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

        Phase mit ausgewähltem Spaltenmenüsymbol, das die Optionen zum Hinzufügen einer Spalte vor oder nach der ausgewählten Spalte anzeigt.

      • 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 danach aus der Liste aus.

        Phase mit geöffnetem Spaltenmenü und schwarzen Pfeilen, die auf die Optionen zum Hinzufügen einer Spalte vor oder nach der ausgewählten Spalte zeigen.

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

        Phase mit ausgewähltem Spaltenlayout und einem schwarzen Pfeil, der auf das Plus-Symbol zum Hinzufügen zusätzlicher Spalten zeigt.

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

        Konfigurationsbereich für das Spaltenlayout mit schwarzen Pfeil, der auf die Option für das Spaltenlayout zeigt.

      Hinweis:
      Spalten können ineinander geschachtelt werden, aber dieser Komplexitätsgrad ist für Seiten nicht oft erforderlich.
    6. Benennen Sie eine Spalte um, indem Sie die Spaltenbezeichnung in der Inhaltsstruktur, der Phase oder dem Konfigurationsbereich bearbeiten.
      • Klicken Sie in der Inhaltsstruktur auf einen Spaltennamen, und halten Sie ihn, (oder klicken Sie mit der rechten Maustaste darauf), oder wählen Sie das Menüsymbol für eine Spalte, und wählen Sie Umbenennenaus.
      • Wählen Sie in der Phase das Menüsymbol neben einem Spaltennamen und dann Umbenennenaus.
      • Wählen Sie im Konfigurationsbereich das Informationssymbol neben dem Spaltennamen aus.

        Pfeil, der auf das Symbol für die Spaltennameninformationen des Konfigurationsbereichs zeigt und das Popup-Fenster mit dem Spaltenbezeichnungsfeld erweitert wird.

      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 auf der Phase), und ziehen Sie dann einen Spaltentrenner auf der Phase nach links oder rechts, um die Spalte schmaler oder breiter zu machen.
      Animation, die zeigt, wie die Größe einer Spalte durch Ziehen des Spaltentrennzeichens geändert wird.
      Die Prozentwerte für die Breite am oberen Rand der Spalten ändern sich automatisch, wenn Sie den Spaltentrenner ziehen. Die Prozentsätze ergeben zusammen 100 %. Wenn Sie die Größe einer Spalte ändern, beachten Sie, wie viel Platz die Komponenten in der Spalte benötigen. 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.
      • Klicken Sie in der Inhaltsstruktur auf einen Spaltenlayoutnamen, und halten Sie ihn, oder klicken Sie mit der rechten Maustaste darauf, 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. Ordnen Sie Spalten (einschließlich ihres Inhalts) in einem Spaltenlayout mithilfe der Inhaltsstruktur oder der Phase neu an.
      • Wählen Sie in der Inhaltsstruktur die Spalte aus, und ziehen Sie sie an eine andere Position (eine blaue horizontale Linie zeigt an, wo die Spalte abgelegt werden kann).

        Pfeil von der Spalte in der Inhaltsstruktur auf eine neue Position in der Struktur, die mit einer blauen, horizontalen Linie markiert ist.

      • Wählen Sie in der Phase einen Spaltenheader aus, ziehen Sie die Spalte an eine andere Position, und legen Sie die Spalte in die Dropzone ab, die durch eine vertikale violette Linie definiert ist.

        Pfeil, der vom Spalten-Header in der Phase zu einer Dropzone zeigt, die durch einen vertikalen Balken in Magenta markiert ist.

      Wenn Sie die Spalte in der Inhaltsstruktur neu anordnen, wird die Phase aktualisiert, und wenn Sie die Spalte in der Inhaltsstruktur neu anordnen, wird die Inhaltsstruktur aktualisiert, wenn Sie die Spalte in der Inhaltsstruktur neu anordnen.
    10. Geben Sie den Abstand zwischen Spalten in der Inhaltsstruktur, der Phase oder dem Konfigurationsbereich an.
      • Klicken Sie in der Inhaltsstruktur auf einen Spaltenlayoutnamen, und halten Sie ihn, (oder klicken Sie mit der rechten Maustaste darauf), 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 eine Größenoption unter Spaltenabstandaus.
      • Wählen Sie ein Spaltenlayout (in der Inhaltsstruktur oder in der Phase) und dann im Konfigurationsbereich eine Größenoption unter Spaltenabstandaus.

        Komponentenbereich mit Spaltenabstandsfeld erweitert, um Optionen anzuzeigen.

    11. Wählen Sie das Struktursymbol, um zu einer anderen Inhaltsebene zu navigieren, z. B. von einer Spalte zum übergeordneten Spaltenlayout oder zu einer untergeordneten Komponente.
      Pfeil, der auf das Struktursymbol zeigt, um in Spaltenlayouts, Spalten und Komponenten in der Phase zu navigieren.
    12. Löschen Sie Spalten aus der Inhaltsstruktur oder der Phase.
      • Klicken Sie in der Inhaltsstruktur auf einen Spaltennamen, und halten Sie ihn, (oder klicken Sie mit der rechten Maustaste darauf), oder wählen Sie das Menüsymbol für eine Spalte aus, und wählen Sie dann Spalte löschen aus der Liste aus.
      • Wählen Sie in der Phase eine einzelne Spalte aus, wählen Sie das Menüsymbol neben dem Spaltennamen, 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.
      Informationen zum Bearbeiten von Spaltenabständen finden Sie unter Legen Sie den Abstand zwischen den Komponenten in Spalten fest.

    Legen Sie den Abstand zwischen den Komponenten in Spalten fest

    Wenn in UI Buildereine Spalte mehrere Komponenten enthält, legen Sie den 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 darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen 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 in einer einzelnen Spalte zwei Komponenten hinzu
      1. Identifizieren Sie in der Inhaltsstruktur eine Spalte, und wählen Sie unter dem Spaltennamen + Inhalt hinzufügen aus.
      2. Wählen Sie im Toolbox-Fenster eine Komponente aus, z. B. Avatar.
      3. Bewegen Sie in der Inhaltsstruktur die Maus über den Namen der gerade hinzugefügten Komponente, wählen Sie das Symbol zum Öffnen des Menüs (drei vertikale Punkte), und wählen Sie Hinzufügen nach aus.
        In der Inhaltsstruktur zeigt ein Pfeil auf das Symbol „Menü öffnen“ für die Avatar-Komponente, und ein zweiter Pfeil zeigt auf die Option „Nach“ im unverankerten Menü hinzufügen.
      4. Wählen Sie im Toolbox-Fenster eine andere Komponente aus, z. B. Schaltfläche.
    6. Wählen Sie Speichern.
    7. Wählen Sie in der Inhaltsstruktur die Spalte aus, der Sie die beiden Komponenten hinzugefügt haben.
    8. Wählen Sie im Konfigurationsbereich eine Größenoptionunter Abstand aus.
      Im Konfigurationsbereich zeigt ein Pfeil auf das Abstandsfeld und ein zweiter Pfeil auf das Abstands-Dropdown-Menü, in dem verschiedene Größen aufgelistet sind.
    9. Um eine genaue Lückengröße in Pixel anzugeben, bewegen Sie die Maus über das Feld Abstand, wählen Sie das Symbol Anwenderdefinierten Wert verwenden (Bleistift) und geben Sie eine Zahl ein, z. B. 300 px.
      Im Konfigurationsbereich zeigt ein schwarzer Pfeil auf das Abstandsfeld und ein zweiter schwarzer Pfeil auf das Symbol für die Verwendung eines anwenderdefinierten Werts.
    10. Um zwischen dem Stapeln der Komponenten und deren nebeneinanderliegender Platzierung in der Spalte zu wechseln, wählen Sie das Symbol Zeile oder Spalte unter Richtung.
      Im Konfigurationsbereich zeigt ein schwarzer Pfeil auf das Richtungsfeld und ein zweiter schwarzer Pfeil auf die Zeilen- und Spaltensymbole.

      Um die Reihenfolge und Platzierung der Komponenten in der Spalte umzukehren, wählen Sie das Symbol Erweitert (drei horizontale Punkte) unter Richtungund dann die Option Umkehren.

      Im Konfigurationsbereich zeigt ein schwarzer Pfeil auf das Richtungsfeld und ein zweiter schwarzer Pfeil auf das Symbol für die erweiterte Richtung.

    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: ui_builder_admin

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen 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 aus, das zwei oder mehr Spalten in der Inhaltsstruktur enthält.
      Inhaltsstruktur mit ausgewähltem Spaltenlayout 1.
    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 angezeigt wird.
      Konfigurationsbereich mit schwarzen Pfeilen, die auf den Link für erweiterte Layoutoptionen zeigen.
    7. Geben Sie eine Breite in die Stapelspalten untenein.
    8. Wählen Sie Speichern.
    9. Um die aktualisierte 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 von Ihnen angegebene Stapelbreite, um zu überprüfen, ob 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 in der Inhaltsstruktur ein Spaltenlayout mit zwei oder mehr Spalten 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 Sieunter „Größe“ 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).
      Konfigurationsbereich mit schwarzen Pfeil, der auf die erweiterte Größenanpassung zeigt.
    14. Wählen Sie Speichern.
    15. Um die aktualisierte Größe 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.