Panel für Dynamic Component öffnen

Das Open Dynamic Component Panel Interaktion ermöglicht es Ihnen, zu starten und anzuzeigen einer anderen Avonni Dynamic Component innerhalb eines Seitenbereichs oder eines festgelegten Bereichs neben dem aktuellen Inhalt, ausgelöst durch eine Interaktion innerhalb Ihrer ursprünglichen Dynamic Component. Dies ist hervorragend geeignet, um Master-Detail-Ansichten zu erstellen, kontextbezogene Informationen bereitzustellen oder Bearbeitungsfunktionen anzubieten, ohne die Hauptoberfläche vollständig wie bei einem Modal zu überlagern.

Übersicht

Diese Interaktion fördert Modularität und Wiederverwendbarkeit. Sie erstellen eine fokussierte Dynamic Component für eine bestimmte Aufgabe (z. B. Detailansicht, Bearbeitung eines zugehörigen Datensatzes) und verwenden dann diese Interaktion, um sie bei Bedarf in einem Panel anzuzeigen, oft ausgelöst durch einen Button-Klick oder die Auswahl einer Zeile.

Hauptvorteile

• Kontextuelle Anzeige: Zeigen Sie zugehörige Informationen oder Aktionen neben dem Hauptinhalt an.

• Modularität: Erstellen Sie kleinere, fokussierte Komponenten, die bei Bedarf angezeigt werden können.

• Wiederverwendbarkeit: Verwenden Sie dieselbe „Panel“-Komponente in mehreren Kontexten.

• Vereinfachte Interaktionen: Bieten Sie detaillierte Ansichten oder Bearbeitungsmöglichkeiten, ohne wegzunavigieren oder ein vollständiges Overlay-Modal zu verwenden.

Konfiguration

Um die Interaktion „Open Dynamic Component Panel“ zu konfigurieren:

1. Wählen Sie die auslösende Komponente: Wählen Sie die Komponente (z. B. einen Button, eine Zeilenaktion in der Data Table), die das Panel öffnen soll.

2. Greifen Sie auf Interaktionen zu: Gehen Sie im Eigenschaftenbereich zum Interaktionen Abschnitt.

3. Wählen Sie das Ereignis: Wählen Sie das Ereignis aus, das das Panel auslösen soll (z. B. Beim Klicken).

4. Aktion hinzufügen: Klicken Sie auf „Aktion hinzufügen“.

5. Aktionstyp festlegen: Wählen Sie Open Dynamic Component Panel aus der Liste.

6. Panel-Eigenschaften konfigurieren:

   6.1 Starten der Dynamic Component

   • API-Name der Dynamic Component: Wählen Sie die spezifische Dynamic Component, die Sie laden möchten innerhalb das Panel.

   6.2 Daten an die gestartete Komponente übergeben (Eingabeeigenschaften)

   • Eingabeeigenschaft / Name: Der API-Name der Eigenschaft (insbesondere eine Variable-Ressource) in der gestarteten Panel-Komponente in die Sie einen Wert setzen oder übergeben möchten.

     ❗ Wichtige Voraussetzung: Bevor Sie hier einen Namen auswählen können, muss führen Sie zuerst diese Schritte in der Dynamic Component aus, die Sie im Panel starten möchten:

     1. Erstellen Sie eine Variable-Ressource für jedes Datenelement, das Sie empfangen möchten (z. B. eine Textvariable, die eine Datensatz-ID empfängt).

     2. Für jede Variable-Ressource, stellen Sie sicher, dass das „Für Eingabe verfügbar“ Kontrollkästchen aktiviert in seiner Konfiguration. Nur Variablen, die in der Ziel-Panel-Komponente als „Available for Input“ markiert sind, erscheinen hier in der Dropdown-Liste „Eingabeeigenschaft / Name“.

   • Eingabeeigenschaft / Wert: Der Wert, den Sie übergeben möchten in an die ausgewählte Eingabeeigenschaft der Panel-Komponente. Dieser kann statisch, dynamisch (z. B. @MyDataTable.firstSelectedRow.Id), oder eine Ressource aus dem aktuellen Komponente ausgelöst.

   • Eingabeeigenschaft / Typ: Wählen Sie den Datentyp, der übergeben wird (Text, Zahl, Boolean, Datum, Datum/Uhrzeit, Benutzerdefiniert usw.).

   • Mehrere Werte zulassen (Sammlung): Aktivieren Sie dies, wenn Sie eine Liste von Werten übergeben.

   6.3 Konfiguration des Panel-Erscheinungsbildes

   • Panel-Header: (Text) Geben Sie einen Titel für das Panel ein, das die gestartete Komponente anzeigt. Der Titel kann statisch oder dynamisch sein.

   • Panel-Größe: (Auswahl) Wählen Sie die gewünschte Breite oder Größe des Panels (z. B. Klein, Mittel oder Groß — spezifische Optionen können variieren).

   6.4 Umgang mit Panel-Ergebnissen

   • Beim Schließen: (Interaktion) Definieren Sie eine Interaktion (z. B. Toast anzeigen, Datenquelle aktualisieren), die beim Schließen des Panels durch den Benutzer ausgeführt wird.

   Praktischer Tipp: Ursprungskomponente beim Schließen aktualisieren Aktivieren Sie die Alle Abfragen beim Schließen aktualisieren Option (oder eine ähnliche Einstellung), wenn Sie möchten, dass die Datenquellen innerhalb der ursprünglichen Dynamic Component (diejenige, die dieses Panel gestartet hat) automatisch aktualisiert werden sofort nachdem dieses Panel geschlossen wurde.

   • Zweck: Stellt sicher, dass Datenänderungen, die gemacht oder initiiert wurden innerhalb des Panels (wie das Erstellen oder Aktualisieren eines Datensatzes) sofort in der Anzeige der Ursprungskomponente reflektiert werden.

   • Beispiel: Wenn das Panel verwendet wird, um Details zu bearbeiten, die in einer Liste in der Originalkomponente angezeigt werden, sorgt das Aktivieren dieser Option dafür, dass die Liste beim Schließen des Panels automatisch aktualisiert wird.

Schritt-für-Schritt-Anleitung (konzeptionell)

1

Erstellen Sie die „Panel“-Komponente

Erstellen Sie die Dynamic Component, die Sie anzeigen möchten innerhalb im Panel. Falls erforderlich, stellen Sie sicher, dass sie Variablen hat, die als „Available for Input“ markiert sind. Aktivieren Sie sie.

2

Konfigurieren Sie die Interaktion

Wählen Sie das Auslöseelement in Ihrer ursprünglichen Dynamic Component (z. B. einen Button). Fügen Sie die Interaktion „Open Dynamic Component Panel“ für das gewünschte Ereignis hinzu (z. B. „On Click“).

3

Panel-Komponente auswählen

Wählen Sie den API-Namen der Komponente, die Sie in Schritt 1 erstellt haben

4

Eingabeeigenschaften konfigurieren

Ordnen Sie Werte aus der Ursprungskomponente den in der Panel-Komponente als „Available for Input“ markierten Variablen zu.

5

Panel-Einstellungen konfigurieren

Legen Sie den Panel-Header und die Größe fest

6

Ergebnis-Interaktionen definieren

Konfigurieren Sie das Verhalten „Beim Schließen“, insbesondere die Aktualisierungsoption, falls erforderlich.

Beispielszenario: Produktdetails anzeigen

Stellen Sie sich eine Data Table vor, die eine Liste von Produkten anzeigt. Wenn ein Benutzer auf eine Aktion „Details anzeigen“ in einer Produktzeile klickt, möchten Sie mehr Informationen in einem Seitenpanel anzeigen, ohne die Listenansicht zu verlassen.

1. Erstellen Sie ProductDetailPanel Komponente: Erstellen Sie eine Dynamic Component mit einem Zielobjekt von Product2. Fügen Sie Textkomponenten, eine Bildkomponente usw. hinzu, gebunden an $Component.record Felder. Stellen Sie sicher, dass diese Komponente eine inputProductId Variable (Text, Available for Input) hat und eine „On Load“ > „Get Records“-Aktion verwendet, um das Produkt anhand von inputProductId abzurufen und es in einer Record-Variable zu speichern, an die die Anzeige-Komponenten gebunden sind.

2. In der Hauptkomponente (mit Product List Data Table):

   • Fügen Sie eine Zeilenaktion hinzu (z. B. ein Button-Symbol) mit der Bezeichnung „Details anzeigen“.

   • Konfigurieren Sie die „On Click“-Interaktion für diese Zeilenaktion.

   • Aktionstyp: Open Dynamic Component Panel.

   • API-Name der Dynamic Component: Wählen Sie ProductDetailPanel.

   • Eingabeeigenschaften:

     • den Sie starten möchten. inputProductId

     • Wert: @YourProductTable.firstSelectedRow.Id (Übergeben Sie die ID des angeklickten Produkts).

   • Panel-Header: Könnte eine Formel verwenden wie "Details: " & @YourProductTable.firstSelectedRow.Name.

   • Panel-Größe: Mittel.

   • Beim Schließen: Wenn Details im Panel bearbeitet werden können, fügen Sie gegebenenfalls eine Aktion „Datenquelle aktualisieren“ hinzu, die auf die Hauptprodukt-Tabelle zielt.

Nun öffnet ein Klick auf die Aktion „Details anzeigen“ ein Panel, das die Details des ausgewählten Produkts neben der Hauptproduktliste anzeigt