Fügen Sie Ihrer Experience ein modales Viewport-Element hinzu

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 1 Minute Lesedauer

    • Fügen Sie einen Viewport innerhalb eines modalen Elements in Ihrer Experience hinzu.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Verwenden Sie Viewport-Modale, um Unterseiten oder andere Experiences innerhalb eines Modals auf Ihrer übergeordneten Seite oder Experience einzubetten. Viewport-Modals können über Ereignisse oder Skripts geöffnet werden. Viewport-Modals sind auf eine Unterroute pro Viewport-Modal beschränkt. Sie können zusätzliche Viewport-Modale für zusätzliche Routen erstellen.
    Hinweis:
    Veraltete Viewport-Dialogfelder können nicht aktualisiert werden und müssen neu erstellt werden, um die neuen Funktionen nutzen zu können.

    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 finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
    3. Öffnen oder erstellen Sie eine Seite.
      Wenn Sie eine vorhandene Seite öffnen, vergewissern Sie sich, dass Sie sich im selben Bereich wie die ursprüngliche Seite befinden. Wenn nicht, ändern Sie den Bereich, bevor Sie mit der Bearbeitung der Seite beginnen. Die Anwendungsumfangsdefinition schützen Anwendungen, indem der Zugriff auf Anwendungsdateien und -daten identifiziert und eingeschränkt wird. Administratoren legen den Bereich fest, um anzugeben, welche Teile einer Anwendung für andere Anwendungen zugänglich sind. Der Anwendungsbereich schützt Daten und Anwendungsdateien. Weitere Informationen zum Anwendungsbereich finden Sie unter Informationen zu Sicherheit und Rollen.
    4. Wählen Sie in der Inhaltsstruktur die Option + Inhalt hinzufügen aus.
    5. Wählen Sie ein Einzelspalten- Layout aus.
    6. Wählen Sie in der Inhaltsstruktur neben Modals (Modale) die Option + aus.
    7. Wählen Sie Viewport-Modal in der Liste aus.
      Abbildung : 1. Viewport-Modal
      Zeiger, der das Viewport-Modal in der Modalliste auswählt.
      Über Ihrer Seite wird ein Viewport-Modell angezeigt.
    8. Klicken Sie auf Speichern.
    9. Wählen Sie den Viewport in der Inhaltsstruktur aus.
      Pfeil, der auf den im vorherigen Schritt hinzugefügten Viewport zeigt.
    10. Wählen Sie auf der Registerkarte „Konfigurieren“ neben Seitensammlungen die Option + Hinzufügen aus.
      Pfeil, der auf + Hinzufügen im Bereich Konfigurieren zeigt
    11. Wählen Sie eine Seitensammlung aus, oder erstellen Sie eine neue.
      Weitere Informationen finden Sie unter Erstellen Sie eine Seitensammlung über mehrere UI-Seiten hinweg.

      Auswahlbildschirm für Seitensammlung mit Option zum Erstellen einer Sammlung.

    12. Klicken Sie auf Hinzufügen.
    13. Klicken Sie auf Speichern.
    14. Fügen Sie eine Komponente hinzu, die das Viewport-Modal öffnet.

      Im folgenden Beispiel wird das Viewport-Modal mithilfe einer Schaltfläche geöffnet.

      Pfeil, der auf eine Schaltflächenkomponente zeigt, die zum Öffnen eines Viewport-Modals verwendet wird.

    15. Wählen Sie die Registerkarte Events aus.
    16. Wählen Sie + Ereignishandler hinzufügen aus.
      Pfeil, der auf + Ereignis-Handler hinzufügen auf der Registerkarte „Ereignisse“ einer Schaltflächenkomponente zeigt.
    17. Wählen Sie Modalen Dialog öffnen oder schließen aus.
    18. Aktivieren Sie den modalen Dialog öffnen.
    19. Wählen Sie das Viewport-Modal aus, das Sie in der Dropdown-Liste „ Modal “ erstellt haben.
      Konfigurieren Sie den Ereignishandler für Ihr Viewport-Modal.
      Die Viewport-ID wird automatisch ausgefüllt.
    20. Wählen Sie Hinzufügen.
    21. Wählen Sie Speichern.
    22. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie die Schaltfläche Vorschau wählen, die die Seitenvariante öffnet..