Flow-Panel öffnen

Überblick

Die Interaktion „Open Flow Panel“ hostet einen Screen-Flow inline innerhalb Ihrer dynamischen Komponente. Dies ist ideal für Szenarien, in denen Sie möchten:

• Ein geführter, schrittweiser Prozess, der Teil von dem Hauptseitenlayout ist, nicht ein separates Popup.

• Der Flow soll zusammen mit anderen Komponenten auf der Seite sichtbar sein.

• Eine stärker integrierte Erfahrung bietet als ein modaler Dialog.

Hauptunterschied zum „Open Flow Dialog“

Das „Open Flow Panel“ zeigt den Screen-Flow innerhalb des Komponenten-Layouts als Panel an. Der „Open Flow Dialog“ zeigt den Screen-Flow in einem modalen Dialogfenster über der Seite an. Beide sind für Screen-Flows (Flows mit UI), nicht für automatisch gestartete Flows.

Tutorials

Siehe praktische Beispiele und lernen Sie, wie Sie spezifische Szenarien mit dieser Interaktion implementieren:

Wie man mehrere ausgewählte Datensätze von einer Dynamic Component an einen Screen Flow übergibt

Funktionsweise

1. Benutzeraktion (optional): Der Benutzer kann mit einer Komponente interagieren (z. B. auf eine Schaltfläche klicken), um das Panel auszulösen. Sie können das Panel jedoch auch so konfigurieren, dass der Flow beim Laden.

2. angezeigt wird: Das Panel erscheint:

3. Die Interaktion „Open Flow Panel“ macht den Panel-Bereich innerhalb der Komponente sichtbar. Der Screen-Flow wird ausgeführt: innerhalb der Flow im Panel.

4. Benutzerinteraktion mit dem Flow: Der Benutzer interagiert mit den Screens des Screen-Flows, gibt Eingaben und trifft Entscheidungen, alles innerhalb des Panels.

5. Datenübergabe (optional): Sie können Daten aus der dynamischen Komponente an den Flow als Eingabevariablen.

6. übergeben. Ausgabe (optional): Der Flow kann Daten an die dynamische Komponente als.

7. Ausgabevariablen zurückgeben.

8. Panel bleibt offen/schließt sich: Das Panel bleibt offen, bis der Flow beendet ist, oder Sie können Aktionen konfigurieren, um seine Sichtbarkeit zu steuern.

Aktionen nach der Ausführung (optional):

Sie können Aktionen konfigurieren, die nach Abschluss des Flows ausgeführt werden (z. B. eine Toast-Nachricht anzeigen, Daten aktualisieren).

1. Konfiguration So konfigurieren Sie die Interaktion „Open Flow Panel":

2. Komponente auswählen: Wählen Sie die Avonni-Komponente, die das Flow-Panel hosten (oder dessen Anzeige auslösen) soll.

3. Fügen Sie die Interaktion hinzu:

   • Finden Sie im Eigenschaftenfeld der Komponente „Actions“ oder „Interactions“. Fügen Sie eine neue Aktion hinzu und wählen Sie „Open Flow Panel“. Einstellungen konfigurieren: Flow-API-Name: Wählen Sie den API-Namen des

   • Screen-Flows

     • aus, den Sie einbetten möchten. Flow-Eingabevariablen (optional): Name:

     • Der API-Name der Eingabevariablen in Ihrem Screen-Flow. Diese Liste zeigt Variablen, die bereits in Ihrem Screen-Flow definiert und als „Available for Input“ markiert sind. Sie müssen diese Eingabevariablen in Ihrem Flow erstellen, bevor Sie diese Interaktion konfigurieren.

   • Wert:

     • aus, den Sie einbetten möchten. Der Wert, der an die ausgewählte Eingabevariable übergeben wird. Dieser kann statisch, dynamisch (aus der Komponente) oder eine Ressource sein.

     • Ausgabevariablen (optional): Der API-Name der Ausgabevariablen in Ihrem Screen-Flow. Ressourcenname: Der Name der Ressource (Variable) in Ihrer

   • dynamischen Komponente zum Speichern des zurückgegebenen Werts.

   • Panel-Header (optional): Legen Sie den Header des Flow-Panels fest.

   • Zugängliche Beschreibung (optional): Geben Sie eine Beschreibung für Screenreader an. Bei Abschluss (optional):).

   • Konfigurieren Sie Aktionen, die ausgeführt werden, wenn der Flow erfolgreich abgeschlossen ist (z. B. eine Toast-Nachricht anzeigen, Daten aktualisieren, das Panel ausblenden

   • Beim Schließen (optional): Konfigurieren Sie Aktionen, die ausgeführt werden, wenn der Benutzer das Panel schließt (dies kann je nach Konfiguration des Panels und Flows möglich oder nicht möglich sein).

Bei Fehler (optional):

Konfigurieren Sie Aktionen, die ausgeführt werden, wenn der Flow auf einen Fehler stößt.

Beispielanwendung Kontaktinformationen inline aktualisieren Stellen Sie sich vor, Sie haben eine Datentabelle, die Kontakte anzeigt. Sie möchten, dass Benutzer den

1. Status

   • eines Kontakts direkt aus der Tabelle aktualisieren können, ohne zu einer separaten Bearbeitungsseite zu navigieren.

   • Erstellen Sie den Screen-Flow: Erstellen Sie einen neuen Screen-Flow. Fügen Sie eine Eingabevariable mit dem Namen

   • ContactId Erstellen Sie einen neuen Screen-Flow..

   • (Texttyp) hinzu. Kontaktinformationen inline aktualisieren.

   • Fügen Sie ein „Get Records“-Element hinzu, um den Kontaktdatensatz basierend auf Kontaktinformationen inline aktualisieren abzurufen.

   • Fügen Sie ein Screen-Element mit einer Auswahlliste (oder einer anderen Eingabe) hinzu, damit der Benutzer einen neuen

2. auswählen kann. Fügen Sie ein „Update Records“-Element hinzu, um das

3. Feld des Kontakts zu aktualisieren. Aktivieren Sie den Flow. Notieren Sie sich den API-Namen des Flows. Fügen Sie eine Datentabelle-Komponente hinzu: Fügen Sie Ihrer dynamischen Komponente eine Avonni-Datentabelle hinzu, die so konfiguriert ist, dass Kontakte angezeigt werden.

4. Fügen Sie eine Schaltfläche hinzu (Zeilenaktion):

   • Fügen Sie eine Schaltflächenkomponente als

   • Zeilenaktion

   • Finden Sie im Eigenschaftenfeld der Komponente „Actions“ oder „Interactions“. Fügen Sie eine neue Aktion hinzu und wählen Sie „Open Flow Panel“. zur Datentabelle hinzu. Diese Schaltfläche löst das Flow-Panel aus.

   • Konfigurieren Sie die Interaktion „Open Flow Panel":

     • aus, den Sie einbetten möchten. Erstellen Sie einen neuen Screen-Flow.

     • Der API-Name der Eingabevariablen in Ihrem Screen-Flow. Wählen Sie die Schaltflächenkomponente (die Zeilenaktion) aus. Fügen Sie eine Interaktion „Open Flow Panel“ hinzu.

   • Geben Sie den API-Namen Ihres Screen-Flows ein. Flow-Eingabevariablen:

5. @ThisItem.Id (Dies übergibt die ID des ausgewählten Kontakts an den Flow).

Bei Abschluss:

• Fügen Sie Aktionen hinzu, um eine Erfolgsmeldung (Toast anzeigen) anzuzeigen und die Datentabelle zu aktualisieren, damit der aktualisierte Status angezeigt wird. Test: Speichern und testen Sie. Ein Klick auf die Schaltfläche in einer Datentabellen-Zeile sollte nun Ihren Screen-Flow in einem Panel anzeigen und es dem Benutzer ermöglichen, den Status des Kontakts direkt im Kontext der Datentabelle zu aktualisieren..

• Wichtige Überlegungen Nur Screen-Flows:

• Die Interaktion „Open Flow Panel“ funktioniert nur mit Screen-Flows

• Namen von Ein-/Ausgabevariablen: Die API-Namen müssen exakt übereinstimmen.

Sichtbarkeit des Panels:

Überlegen Sie sorgfältig, wie die Sichtbarkeit des Panels gesteuert wird. Sie möchten möglicherweise die Aktion „Bei Abschluss“ verwenden, um das Panel nach Abschluss des Flows auszublenden. Layout: Berücksichtigen Sie das Layout Ihrer dynamischen Komponente und wie das Panel darin Platz finden wird.