Erstellen Sie Popover in UI Builder

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

    • Verwenden Sie Popover auf einer UI Builder-Seite, um kontextbezogene Informationen oder Funktionen zu überlagern und Benutzern beim Abschließen 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 im Zusammenhang mit dem Inhalt oder der Aufgabe enthält. Fügen Sie einem Popover Komponenten auf die gleiche Weise hinzu, wie Sie modale Elemente zu einer Seite hinzufügen.

    Sie können Popover überall auf einer UI Builder -Seite platzieren, wenn Sie der Meinung sind, dass zusätzliche Informationen den Benutzern helfen. Popover sollen kurze Informationen oder Links zu zugehörigen Inhalten bereitstellen. Daher sollten Sie die Menge der Informationen oder Funktionen innerhalb eines Popovers begrenzen, da das Popover nur angezeigt wird, wenn ein Benutzer damit interagiert.

    Sie können Popover mit Event-Zuordnung sichtbar machen oder ausblenden, z. B. ein Popover auslösen, wenn Sie auf eine Schaltfläche klicken oder auf einen Teil der Seite zeigen. Weitere Informationen finden Sie unter Definieren Sie Karten-Events.

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

    Popover zu einer UI Builder -Seite hinzufügen

    Erfahren Sie, wie Sie ein Popover in UI Builderhinzufü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 der Name einer Person in einer Liste ausgewählt wird.

    Vorbereitungen

    Erforderliche Rolle: admin

    Prozedur

    1. Navigieren zu Alle > Now Experience Framework > UI Builder.
    2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenwählen.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
    3. Öffnen oder erstellen Sie eine Seitenvariante.
      Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter Seiten in UI Builder erstellen.
    4. Fügen Sie Ihrer Seite eine Komponente hinzu, für die Sie ein Popover auslösen möchten, z. B. eine Schaltflächenkomponente.
      Weitere Informationen finden Sie unter Fügen Sie Komponenten hinzu, und konfigurieren Sie sie.
    5. Wechseln Sie im Konfigurationsbereich zur Registerkarte Events.
    6. Wählen Sie + Event-Handler hinzufügen.
      Pfeil, der auf den Link Event Handler hinzufügen für die Schaltflächenkomponente zeigt.
    7. Wählen Sie Popover öffnen aus.
    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 die Konfiguration des Popovers abgeschlossen haben, schließen Sie es.

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

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