Konfigurieren von Komponenten für Responsive Authoring

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

    • Wenn Sie Seiten mit reaktionsfähiger Dokumenterstellung für verschiedene Formfaktoren erstellen, erfahren Sie, wie Sie durch die Anpassung einiger Komponentenkonfigurationsoptionen das Aussehen und die Funktion von Seiten bei kleineren Größen verbessern können.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Eine Methode zur Verbesserung der Nutzbarkeit von Seiten besteht darin, das Erscheinungsbild von Komponenten mithilfe unterschiedlicher Konfigurationen für alle Haltepunkte anzupassen. Es gibt zahllose Möglichkeiten, die Komponentenkonfiguration zu verwenden. In diesem Verfahren bearbeiten Sie mehrere Konfigurationsoptionen für die Listenkomponente, um sie für kleinere Formfaktoren geeigneter zu machen.

    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 Erstellen > Experiencewählen.
      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 von Grund auf neu mit reaktionsfähiger Dokumenterstellung.
      Weitere Informationen zum Erstellen einer Seite finden Sie unter Seite in UI Builder erstellen.
    4. Überprüfen Sie oben, ob das Symbol für den Desktop-Formfaktor ausgewählt ist.
      Schwarzer Pfeil, der auf das Symbol für den Desktop-Formfaktor zeigt, oben auf einer UI Builder-Seite in der Editor-Ansicht.
    5. Wählen Sie in der Phase + Inhalt hinzufügen aus.
    6. Wählen Sie auf der Registerkarte Layouts die Option Einzelne Spalteaus.
    7. Fügen Sie die Listenkomponente hinzu, indem Sie in der Mitte der neuen Spalte das Symbol + auswählen.
    8. Suchen Sie auf der Registerkarte Komponenten nach der Komponente Liste, und wählen Sie sie aus.
    9. Wählen Sie im Konfigurationsbereich Keines - Komponente manuell konfigurieren aus.
    10. Zeigen Sie die Seite im Desktop-Formfaktor an.
      Seite, die die Listenkomponente im Desktop-Formfaktor mit Symbolen, mehreren angezeigten Spalten und Paginierungsinformationen zeigt.

      Beachten Sie die angezeigten Elemente, einschließlich der Symbole oben, der Anzahl der Spalten und der Paginierungsinformationen unten.

    11. Wählen Sie das Symbol für den mobilen Formfaktor.

      Schwarzer Pfeil, der auf das Symbol für den mobilen Formfaktor oben auf einer UI Builder-Seite in der Editor-Ansicht zeigt.

      Beim mobilen Formfaktor ist die Listenkomponente überfüllt und enthält sowohl vertikale als auch horizontale Bildlaufleisten.

      Seite, die im mobilen Formfaktor mit Listenkomponente angezeigt wird.

      Nehmen Sie einige einfache Konfigurationsänderungen vor, um die Anwenderfreundlichkeit und Darstellung des mobilen Formfaktors zu verbessern.

    12. Wählen Sie in der Inhaltsstruktur Liste 1 aus.
    13. Suchen Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren das Feld Anzahl der angezeigten Spalten, und geben Sie 1ein.
      Nur die Spalte Nummer wird angezeigt. Die horizontale Bildlaufleiste wurde entfernt.
    14. Scrollen Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren nach unten, um im Abschnitt Header die folgenden Änderungen vorzunehmen:
      1. Ändern Sie die Größe in Klein.
      2. Wählen Sie die Option Informationen zur letzten Aktualisierung ausblenden aus.
      3. Wählen Sie die Option Listenaktionen ausblenden aus.
        Header-Abschnitt der Registerkarte „Konfigurieren“ des Konfigurationsbereichs.
        Bei jeder Änderung wurde die Phase automatisch aktualisiert. Der Header ist kleiner, die Aktualisierungszeit wurde entfernt, und das Symbol „Listenaktionen“ wurde entfernt.
      4. Wählen Sie Speichern.
    15. Scrollen Sie in der Phase zum unteren Rand der mobilen Ansicht.
    16. Scrollen Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren nach unten, und nehmen Sie im Abschnitt Paginierung die folgenden Änderungen vor (wählen Sie ggf. Paginierung, um das Feld zu erweitern):
      1. Wählen Sie die Option Bereich ausblenden aus.
      2. Wählen Sie die Option Zeilenanzahl ausblenden aus.
      3. Wählen Sie die Auswahl Zeilen pro Seite ausblenden aus.
      4. Wählen Sie Speichern.
      Der Bereich, die Zeilenanzahl und die Zeilen pro Seitenauswahl wurden entfernt. (Die Zeilenanzahl ist weiterhin oben auf dem mobilen Bildschirm verfügbar.)

      Seite, die im Mobile-Formfaktor mit konfigurierter Listenkomponente angezeigt wird.

      Im Konfigurationsbereich sind die von Ihnen bearbeiteten Optionen und Felder mit dem Symbol für Mobile-Kaskadierung gekennzeichnet.

    17. Wählen Sie das Symbol „Mobile Kaskade“ neben einer Option oder einem Feld, um zu bestätigen, dass der Wert für den mobilen Formfaktor gilt.
      Konfigurationsbereich mit angezeigter Registerkarte „Konfigurieren“ und schwarzer Pfeil, der auf den Wert zeigt, ist eine bestimmte Nachricht.
    18. Wählen Sie oben die Symbole für den Tablet- und den Desktop-Formfaktor, um zu bestätigen, dass keine Änderungen an den größeren Formfaktoren vorgenommen wurden.