Erstellen Sie Popover in UI Builder

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

    • Verwenden Sie Popovers auf einer UI Builder-Seite, um kontextbezogene Informationen oder Funktionen zu überlagern und Anwendern beim Ausführen von Aufgaben zu helfen.

    Ein Popover ist ein kleines Fenster oder Dialogfeld, das über einer Seite UI Builder angezeigt wird und zusätzliche Informationen, Optionen oder Aktionen enthält, die sich auf den aktuellen Inhalt oder die aktuelle Aufgabe beziehen. Fügen Sie einem Popover Komponenten auf die gleiche Weise hinzu, wie Sie einer Seite modale Elemente hinzufügen.

    Sie können Popovers überall auf einer Seite UI Builder platzieren, wo Sie denken, dass zusätzliche Informationen den Anwendern helfen. Popovers sollen kleine Informationen oder Links zu zugehörigen Inhalten bereitstellen. Sie sollten daher die Menge der Informationen oder Funktionen in einem Popover begrenzen, da das Popover nur angezeigt wird, wenn ein Anwender damit interagiert.

    Sie können Popovers mit Ereigniszuordnung sichtbar machen oder ausblenden, z. B. das Anzeigen eines Popovers auslösen, wenn Sie eine Schaltfläche auswählen oder auf einen Teil der Seite zeigen. Weitere Informationen finden Sie unter Definieren Sie Kartenereignisse.

    Abbildung : 1. Informations-Popover
    Seite mit Tooltip-Textlink, der ausgewählt wurde, um ein Popover mit zusätzlichen Informationen anzuzeigen.

    Fügt ein Popover zu einer Seite UI Builder hinzu

    Erfahren Sie, wie Sie in UI Builderein Popover hinzufügen. Ein Popover ist ein Container, der über einer Seite angezeigt wird, wenn Sie auf eine Komponente klicken. Beispielsweise kann ein Popover Kontaktinformationen anzeigen, wenn Sie den Namen einer Person in einer Liste auswählen.

    Vorbereitungen

    Erforderliche Rolle: 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. Öffnen oder erstellen Sie eine Seitenvariante.
      Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter Seite in UI Builder erstellen.
    4. Fügen Sie Ihrer Seite eine Komponente hinzu, für die ein Popover ausgelöst werden soll, z. B. eine Schaltflächenkomponente.
      Weitere Informationen finden Sie unter Komponenten hinzufügen und konfigurieren.
    5. Wählen Sie im Konfigurationsbereich die Registerkarte Ereignisse.
    6. Wählen Sie + Ereignishandler hinzufügen aus.
      Pfeil, der auf den Link „Ereignishandler hinzufügen“ für die Schaltflächenkomponente zeigt.
    7. Wählen Sie Popover öffnen.
    8. Wählen Sie Neues Popover erstellen aus.
      Pfeil, der auf die Option „Neues Popover erstellen“ zeigt.
    9. Wählen Sie Hinzufügen.
      Das Popover wird über der Phase angezeigt.
    10. Fügen Sie dem Popover Komponenten hinzu, indem Sie das Symbol + auswählen.
      Pfeil, der auf das + zeigt, um Inhalt hinzuzufügen.
    11. Wenn Sie mit der Konfiguration des Popovers fertig sind, schließen Sie es.

      Beachten Sie, dass sich die von Ihnen erstellten Popovers in der Inhaltsstruktur über dem Textkörper Ihrer Seitenstruktur befinden.

      Pfeil, der auf das anwenderdefinierte Popover in der Inhaltsstruktur zeigt.
    12. Klicken Sie auf Speichern.
    13. Wählen Sie im Header UI BuilderVorschau aus.
    14. Klicken Sie auf die Schaltfläche, um das Popover zu testen.