Anpassung der Transparenz von Komponenten beim reaktionsfähigen Authoring

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 4 Minuten Lesedauer

    • Erfahren Sie beim Erstellen von Seiten mit Responsive Authoring für verschiedene Formfaktoren, wie Sie Komponenten ein- oder ausblenden, indem Sie die Schritte zum Ausblenden eines Bildes in der Mobile-Größe ausführen.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Eine Methode zur Verbesserung der Anwenderfreundlichkeit einer Seite besteht darin, Komponenten auszublenden oder eine andere Komponente über Haltepunkte hinweg anzuzeigen. Es gibt zahllose Möglichkeiten, die Transparenz von Komponenten zu nutzen. Einige Beispiele sind:
    • Verwenden Sie mehrere Schaltflächenkomponenten horizontal am oberen Rand einer Seite für die Desktop- und Tablet-Größe. Bei der mobilen Größe blenden Sie die Schaltflächen aus und zeigen die Dropdown-Komponente an.
    • Verwenden Sie eine kleinere Schaltflächengröße für die Mobile-Größe, aber überprüfen Sie, ob die Schaltflächen groß genug sind, damit Anwender sie mit dem Daumen drücken können. Erwägen Sie, die Platzierung der Schaltflächen auch für Mobilgeräte zu ändern.
    • Verwenden Sie Bilder auf Desktop- und Tablet-Seiten, blenden Sie jedoch Bilder, insbesondere größere, auf Mobilgeräten aus.

    In diesem Verfahren werden für die Formfaktoren Desktop und Tablet Schaltflächen im oberen Bereich angezeigt, für Mobilgeräte jedoch die Schaltflächen ausgeblendet und die Dropdown-Komponente verwendet.

    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. Fügen Sie ein Spaltenlayout hinzu, indem Sie in der Inhaltsstruktur unter Textkörperdie Option + Inhalt hinzufügen auswählen.
    6. Wählen Sie auf der Registerkarte Layouts die Option Einzelne Spalteaus.
    7. Fügen Sie die erste Schaltflächenkomponente hinzu.
      1. Wählen Sie in der Mitte der neuen Spalte in der Phase das Symbol + aus.
      2. Suchen Sie auf der Registerkarte Komponenten nach der Komponente Schaltfläche, und wählen Sie sie aus.
      3. Wählen Sie im Konfigurationsbereich Keines - Komponente manuell konfigurieren aus.
      4. Ersetzen Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren den Standardtext im Feld Bezeichnung, indem Sie Aufgabeneingeben.
        Registerkarte zum Konfigurieren der Schaltflächenkomponente mit schwarzen Pfeil, der auf das Beschriftungsfeld zeigt.
      5. Wählen Sie Speichern.
    8. Fügen Sie zwei weitere Schaltflächen hinzu, indem Sie Schritt 7 zweimal wiederholen. Benennen Sie die Schaltflächen in 7 Tagen mit Incidents und Changes.
      Hinweis:
      Um die Schaltflächen hinzuzufügen, zeigen Sie in der Inhaltsstruktur auf Schaltfläche 1, wählen Sie das Menüsymbol und dann Hinzufügen nach aus.

      Hinzufügen nach

    9. Überprüfen Sie, ob die Inhaltsstruktur und die Seite korrekt sind.
      Inhaltsstruktur und -seite mit Spaltenlayout, Spalten- und Schaltflächenkomponenten hinzugefügt.
    10. Fügen Sie etwas Platz um jede Schaltfläche hinzu.
      1. Wählen Sie in der Inhaltsstruktur Schaltfläche 1aus.
      2. Wählen Sie im Konfigurationsbereich die Registerkarte Stile.
      3. Wählen Sie unter Abstanddie Option Randaus.
      4. Wählen Sie im Menü XS (extra klein) aus.
        Konfigurationsbereich mit schwarzen Pfeilen, die auf die Randoption und die Option für die extra kleine Größe zeigen.
      5. Wählen Sie Speichern.
    11. Fügen Sie Platz um die anderen beiden Schaltflächen hinzu, indem Sie Schritt 10 für jede wiederholen.
    12. Ändern Sie die Schaltflächen von der vertikalen Richtung in die horizontale Richtung.
      1. Wählen Sie in der Inhaltsstruktur Spalte 1 aus.
      2. Wählen Sie im Konfigurationsbereich unter Richtungdas Zeilensymbol aus.

        Konfigurationsbereich für Spalte 1 mit schwarzen Pfeil, der auf das Zeilensymbol für die Richtungsoption zeigt.

      3. Wählen Sie Speichern.
      Die Seite sieht in Desktopbreite gut aus.

      Schaltflächen, die im Desktop-Formfaktor in horizontalem Layout angezeigt werden.

    13. Wählen Sie das Symbol für den Tablet-Formfaktor.

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

      Der Abstand und die Position der Schaltflächen sehen auch bei der Tablet-Breite gut aus.

      Schaltflächen, die im horizontalen Layout im Tablet-Formfaktor angezeigt werden.

    14. Wählen Sie das Symbol für Responsive Authoring auf Mobilgeräten.

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

      Die Schaltflächen belegen bei geringerer Größe fast den gesamten horizontalen Platz.

      Schaltflächen, die im horizontalen Layout im Mobile-Formfaktor angezeigt werden.

    15. Fügen Sie die Dropdown-Komponente hinzu.
      1. Wählen Sie oben in der Phase den Desktop-Formfaktor aus.
      2. Zeigen Sie in der Inhaltsstruktur auf Schaltfläche 3, wählen Sie das Menüsymbol und dann Hinzufügen nach aus.
      3. Suchen Sie auf der Registerkarte Komponenten nach der Komponente Dropdown, und wählen Sie sie aus.
      4. Wählen Sie im Konfigurationsbereich Keines - Komponente manuell konfigurieren aus.
      5. Entfernen Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren den Standardtext in Platzhaltertext, und wählen Sie Menügliederung in Symbolaus.
        Dropdown-Komponentenkonfigurationsoptionen.
      6. Wählen Sie Speichern.
    16. Blenden Sie die Dropdown-Komponente bei den Formfaktoren Desktop und Tablet aus.
      1. Wählen Sie in der Inhaltsstruktur Dropdown 1aus.
      2. Wählen Sie im Konfigurationsbereich auf der Registerkarte Konfigurierendie Option Komponentensichtbarkeit aus, um die Optionen anzuzeigen.
      3. Wählen Sie Komponente ausblendenaus.
      4. Wählen Sie Speichern.
    17. Blenden Sie beim mobilen Formfaktor die Schaltflächenkomponenten aus.
      1. Wählen Sie das Symbol „Formfaktor für mobile Geräte“ oben in der Phase aus.
      2. Wählen Sie in der Inhaltsstruktur Schaltfläche 1aus.
      3. Wählen Sie im Konfigurationsbereich auf der Registerkarte Konfigurierendie Option Komponente ausblendenaus.
      4. Wiederholen Sie die Schritte bc für Schaltfläche 2 und Schaltfläche 3.
      5. Wählen Sie Speichern.
      Zwei Positionen zeigen, dass die Schaltflächenkomponenten in mobiler Größe ausgeblendet sind. Wählen Sie zuerst im Konfigurationsbereich neben der Option Komponente ausblenden das Mobilsymbol aus. Es wird eine Meldung angezeigt, um zu bestätigen, dass der Wert (Ausgewählte Komponente ausblenden) für die Größe des Mobilgeräts gilt.

      Konfigurationsbereich mit angezeigter Registerkarte „Konfigurieren“ und schwarzen Pfeil, der auf die Nachricht zeigt.

      Zweitens werden in der Inhaltsstruktur die drei Schaltflächenkomponenten mit dem ausgeblendeten Symbol Ausgeblendetes Symbol angezeigt.
    18. Zeigen Sie beim mobilen Formfaktor die Dropdown-Komponente an.
      1. Wählen Sie in der Inhaltsstruktur Dropdown 1aus.
      2. Wählen Sie im Konfigurationsbereich auf der Registerkarte Konfigurierendie Option Komponente ausblenden aus, um das Feld zu löschen.
      3. Wählen Sie Speichern.
    19. Wählen Sie Vorschau.
      Der mobile Formfaktor wird mit dem Menüsymbol angezeigt. Wenn Sie den Pfeil auswählen, werden die Standardoptionen angezeigt (Listenelement 1, Listenelement 2 usw.). Konfigurieren Sie die Dropdown-Komponente so, dass Aufgaben, Incidentsund Changes genau wie die horizontalen Schaltflächen angezeigt werden, die bei den Tablet- und Desktop-Formfaktoren verfügbar sind.

      Mobiler Formfaktor, der in der Vorschauüberlagerung angezeigt wird.

    20. Wählen Sie oben die Symbole für den Desktop- und Tablet-Formfaktor.
      Bei den Formfaktoren Desktop und Tablet werden nur die horizontalen Schaltflächen angezeigt, nicht das Menüsymbol.
    21. Schließen Sie die Vorschaueinblendung, indem Sie Xwählen.