Umbruch für Playbook Komponenten

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 2 Minuten Lesedauer

    • Wenden Sie den Umbruch auf sofort einsatzbereite eigenständige und benutzerdefinierte Layoutkomponenten Playbook-Experience an, damit sich die Benutzeroberfläche anpasst, wenn Sie die Fenstergröße oder den Zoom ändern.

    Reflow ist eine Funktion von konfigurierbarer Arbeitsbereich, mit der Seiten und Inhalte über die Browsereinstellungen um bis zu 400 % vergrößert werden können. In einem Playbook mit aktiviertem Umbruch wechselt der Playbook in den Kompaktmodus, wenn er auf 200 % Browserzoom vergrößert wird, und verlässt den Kompaktmodus, wenn er wieder verkleinert wird.

    Wenn Sie möchten, dass Reflow für Ihre Playbook-Experience -Komponenten funktioniert, finden Sie weitere Informationen unter Wenden Sie Reflow auf Playbook Komponenten an.

    Weitere Informationen zu Reflow finden Sie unter Reflow for Configurable Workspace.

    Wenden Sie Reflow auf Playbook Komponenten an

    Wenden Sie den Umbruch auf sofort einsatzbereite eigenständige und benutzerdefinierte Layoutkomponenten Playbook-Experience an, damit sich die Benutzeroberfläche anpasst, wenn Sie die Fenstergröße oder den Zoom ändern.

    Vorbereitungen

    Erforderliche Rolle: admin

    Prozedur

    1. Erstellen Sie den Datensatz sys_ux_auto_reflow_rule.
      1. Öffnen Sie das Menü Alle.
      2. Geben Sie in der Filterleiste sys_ux_auto_reflow_rule.listein.

      Die Liste der UX-Regeln für automatischen Umbruch wird erstellt und angezeigt.

      Für jede der eigenständigen und benutzerdefinierten Layoutkomponenten Playbook gibt es eine Regel. Unter einer bestimmten Seitengröße von UI Builder verwenden diese Regeln die standardmäßige Reflow-Engine, um Macroponent-Eigenschaften in der Liste der UX-Macroponent-Definitionen (sys_ux_macroponent.list) und bestimmte CSS-Werte zu überschreiben. Die in den Store-Apps Playbook-Experience bereitgestellten Regeln verwenden eine Seitenbreite von 640 px, um die Eigenschaft „ compactMode “ der Komponenten umzuschalten, sowie eine Höhe von 100 vh, um sicherzustellen, dass die Größe der Komponenten an den Platz angepasst wird.

      Wenn Sie die eigenständige Komponente verwenden, sind Sie fertig. Wenn Sie mit benutzerdefinierten Layoutkomponenten arbeiten, fahren Sie mit dem nächsten Schritt fort.

    2. Navigieren zu Alle > UI Builder.
    3. Öffnen Sie das Layout, auf das Sie den Umbruch anwenden möchten, in Playbook-Experience Builder.
    4. Wählen Sie in der linken unteren Ecke das Datensymbol aus, und öffnen Sie den UI-Controller für das benutzerdefinierte Playbook-Layout.
    5. Aktualisieren Sie im Feld Aktivitätsansichtsmodus den Wert für die Ausgabeeigenschaft stagePickerVisible auf true.
    6. Wählen Sie die Komponente aus, für die die Reflow-Regel gelten soll.
    7. Fügen Sie auf der Registerkarte Ereignisse den Ereignishandler „Kompaktmodus geändert “ hinzu.
      Dadurch wird der Kompaktmodus gemäß der Reflow-Regel automatisch ein- und ausgeschaltet, indem der Wert der Ausgabeeigenschaft „compactMode“ in „true“ oder „false“ geändert wird. Dies wird dann auf die anderen Komponenten Ihres Playbook angewendet, sodass auch alles automatisch angepasst wird.
    8. Wahlweise: Wählen Sie Größenanpassbare Bereiche aus.
      1. Aktualisieren Sie die Position der Bereiche so, dass sie links und rechts oder als obere und untere Bereiche angezeigt werden.
      2. Öffnen Sie auf der Registerkarte Konfiguration den Wert der geskripteten Eigenschaft im Feld Standardmäßig angezeigter Bereich.
      3. Aktualisieren Sie den Wert für die Rückgabe if(!api.data.playbook_custom_layout.compactMode), um nur den Bereich „links“/„oben“, nur den Bereich „rechts“/„unten“ oder „beide“ anzuzeigen, wenn Sie sich nicht im Kompaktmodus befinden .
      4. Aktualisieren Sie für den Kompaktmodus den ersten Wert für die Rückgabe (api.data.playbook_custom_layout. selectedItem || ()).stageContextId ?, um den Aktivitätsbereich „links“/„oben“ oder „rechts“/„unten“ anzuzeigen, wenn eine Phase ausgewählt wird.
        Der zweite Wert gibt an, welcher Bereich angezeigt werden soll, wenn keine Phase ausgewählt ist.