Data LWC Container

Der Data LWC Container Komponente fungiert als leistungsstarke Brücke. Er kombiniert Avonnis benutzerfreundliche Datenverwaltungsfunktionen (wie Abfragen, Filtern, Suchen und Paginierung) mit den einzigartigen visuellen Anzeigeoptionen einer benutzerdefinierten Lightning Web Component (LWC), die von einem Entwickler erstellt wurde.

Überblick

Betrachten Sie den Data LWC Container als einen „intelligenten Rahmen“ für ein benutzerdefiniertes Bild. Avonni liefert den innovativen Rahmen:

• Er ruft Ihre Salesforce-Daten mithilfe einer vertrauten Query- oder Variable-Datenquelle ab.

• Er bietet integrierte Steuerungen für Filterung, Suche und Paginierung für diese Daten.

Die benutzerdefinierte LWC (vom Entwickler erstellt) fungiert als das „Bild“ im Rahmen:

• Sie empfängt die vom Avonni-Container verwalteten Daten.

• Sie zeigt Daten in einem benutzerdefinierten visuellen Format an, das mit Standard-Avonni-Komponenten möglicherweise nicht erreichbar ist.

Warum verwenden? (Die Vorteile)

• Benutzerdefinierte UI nutzen: Verwenden Sie einzigartige, hochspezialisierte UI-Komponenten, die von Entwicklern erstellt wurden, ohne dass dieser Entwickler zudem komplexe Logik für Datenabruf, Filterung, Suche und Paginierung implementieren muss. Avonni übernimmt die datenintensiven Aufgaben.

• Das Beste aus beiden Welten: Kombinieren Sie Avonnis No-Code-Datenkonfiguration und Bedienkomfort mit den grenzenlosen visuellen Möglichkeiten benutzerdefinierter LWCs.

• Konsistente Datenfunktionen: Wenden Sie standardisierte Avonni-Filter-, Such- und Paginierungssteuerungen auf jede benutzerdefinierte LWC an, die für die Arbeit mit diesem Container ausgelegt ist.

• Flexibilität: Integrieren Sie benutzerdefinierte LWC-Lösungen für Nischenanforderungen an die UI, während Sie den Avonni-Builder für die Gesamtstruktur und Datenverwaltung verwenden.

Hinzufügen des Data LWC Containers

Drag & Drop: Finden Sie die Komponente „Data LWC Container“ in der Komponentenbibliothek und ziehen Sie sie auf Ihre Leinwand.

Konfigurieren des Data LWC Containers

Wählen Sie die Data LWC Container-Komponente auf der Leinwand aus, um ihre Eigenschaften im Eigenschaftenfenster aufzurufen.

Datenquelle

Dies teilt dem Container mit, welche Daten abgerufen und verwaltet werden sollen.

• Datenquelle: Wählen Sie, wie die Daten bereitgestellt werden sollen:

  • Abfrage: Verwenden Sie eine Avonni Query-Datenquelle, um Datensätze direkt aus Salesforce abzurufen. Dies ist die gebräuchlichste Option.

  • Variable: Verwenden Sie eine Variable-Ressource (typischerweise eine Collection-Variable), die bereits die Liste der Datensätze enthält, die Sie anzeigen möchten.

LWC-Verbindung

Dies teilt dem Container mit, welche benutzerdefinierte LWC für die Anzeige verwendet werden soll und wie die Daten gesendet werden.

• LWC-Name: (Text) Der genaue API-Name der benutzerdefinierten Lightning Web Component (vom Entwickler erstellt), die die Daten anzeigen wird (z. B. c/myCustomCardList, namespace/specialDisplay). Diesen Namen erhalten Sie vom LWC-Entwickler.

• Record-IDs-Attribut: (Text) Der Name der spezifischen Variable innerhalb der benutzerdefinierten LWC, an die Avonni die Liste der Salesforce-Record-IDs senden soll. Ihr LWC-Entwickler liefert den genauen Namen dieses Attributs.

• Records-Attribut: (Text) Der Name der spezifischen Variable innerhalb der benutzerdefinierten LWC, an die Avonni die eigentlichen Datensatzdaten (die abgerufene Liste der Datensätze) senden soll. Ihr LWC-Entwickler liefert den genauen Namen dieses Attributs.

• Fehler-Attribut: (Text) Der Name der spezifischen Variable innerhalb der benutzerdefinierten LWC, an die Avonni etwaige Fehlermeldungen senden soll, falls die Abfrage fehlschlägt. Ihr LWC-Entwickler liefert den genauen Namen dieses Attributs.

(Betrachten Sie diese Attribut-Einstellungen wie die Adressierung eines Pakets – Sie benötigen den korrekten Namen, der vom LWC-Entwickler bereitgestellt wird, damit Avonni weiß, wohin die Daten innerhalb der benutzerdefinierten Komponente geliefert werden sollen.)

Standardfunktionen

Der Container stellt diese vertrauten Avonni-Funktionen zur Verfügung und arbeitet mit den Daten, bevor sie an die benutzerdefinierte LWC gesendet werden. Sie können sie aktivieren und konfigurieren wie bei einer Standard-Avonni-Datentabelle:

• Kopfzeile: Passen Sie die Kopfzeile des Containers mit Titel, Beschriftung, Symbol und Header-Aktionsschaltflächen an.

• Paginierung: Aktivieren Sie die Paginierung, um große Datensätze zu verwalten, und steuern Sie Elemente pro Seite sowie Navigationssteuerungen.

• Filter: Konfigurieren Sie integrierte Filteroptionen (horizontal, Popover, Seitenpanel) basierend auf Feldern in Ihrer Datenquelle.

• Suche: Aktivieren Sie eine Suchleiste, damit Benutzer die vom Container verwalteten Daten durchsuchen können.

• Seitenpanel: Konfigurieren Sie das Seitenpanel.

Styling

Diese Einstellungen steuern das Erscheinungsbild des Containers selbst, nicht die benutzerdefinierte LWC darin (das Styling innerhalb der LWC wird vom Entwickler gehandhabt).

• Außenabstand: Platz außerhalb des Containers.

• Innenabstand: Platz innerhalb des Containers, rund um den Bereich, in dem die LWC platziert wird.

• Rahmen: Gestalten Sie den Rahmen des Containers.

• Größe: Steuern Sie die Abmessungen des Containers.

• Kopfzeilenstile: Passen Sie das Erscheinungsbild der Header-Elemente des Containers (Titel, Beschriftung, Symbol) an.

• Paginierungs-Schaltflächen: Passen Sie die Paginierungs-Schaltflächen an.

Sichtbarkeit

• Sichtbar: (Boolean) Steuert, ob die gesamte Data LWC Container-Komponente sichtbar ist.

Beispielanwendungsfall

Stellen Sie sich vor, Ihr Unternehmen möchte Projektaufgaben auf eine einzigartige Weise visualisieren – nicht als Standardtabelle oder Liste, sondern als benutzerdefinierte interaktive Karten mit spezifischen Fortschrittsanzeigen.

1. Entwickler erstellt LWC: Ein Entwickler erstellt eine benutzerdefinierte LWC namens c__projectTaskCardDisplay, die dafür ausgelegt ist, eine Liste von Aufgaben-Datensätzen zu empfangen und diese als spezielle Karten anzuzeigen. Der Entwickler teilt mit, dass die LWC die Datensätze in einem Attribut namens taskData und die Record-IDs in einem Attribut namens taskIds erwartet.

2. Admin konfiguriert Data LWC Container:

• Sie fügen den Data LWC Container zu Ihrer dynamischen Komponente hinzu.

• Sie setzen die Datenquelle auf eine Query, die Project_Task__c-Datensätze abruft.

• Sie setzen den LWC-Namen auf c/projectTaskCardDisplay.

• Sie setzen das Records-Attribut auf taskData.

• Sie setzen das Record-IDs-Attribut auf taskIds.

• Sie aktivieren und konfigurieren die Filterfunktion innerhalb des Data LWC Containers, damit Benutzer Aufgaben nach Status filtern können.

• Sie aktivieren und konfigurieren die Paginierung.

Ergebnis: Benutzer sehen die vom Entwickler erstellten benutzerdefinierten Aufgaben-Karten, können jedoch die innerhalb dieser Karten angezeigten Daten mithilfe der vertrauten Avonni-Filter- und Paginierungssteuerungen des Containers verwalten.

Speichern und testen Sie. Ein Klick auf die Schaltfläche in einer Zeile der Datentabelle sollte nun Ihren Screen Flow in einem Panel anzeigen, sodass der Benutzer den Status des Kontakts direkt im Kontext der Datentabelle aktualisieren kann.

Wichtiger Hinweis

• Erfordert eine benutzerdefinierte LWC: Diese Komponente erfordert eine separate, benutzerdefinierte Lightning Web Component, die von einem Entwickler erstellt wird. Der Entwickler muss seine LWC so gestalten, dass sie die Daten (insbesondere die Listen records und recordIds) über die von Ihnen konfigurierten Attributnamen akzeptiert.

• Scrollen: Implementieren Sie keine benutzerdefinierte Scrollbehandlung innerhalb der LWC, die Sie in den Container einfügen. Der Data LWC Container verwaltet das unendliche Scrollen/Laden intern. Eigenes Scrollen in Ihrer LWC stört dies.

• isBuilder- und isPreview-Attribute: Ihr LWC-Entwickler kann diese Attribute (die Avonni automatisch an die LWC übergibt) verwenden, um Platzhalter anzuzeigen oder das Laden von Daten zu verhindern, wenn die Komponente im Komponenten-Builder oder im Vorschaumodus angezeigt wird, und so die Leistung während der Designzeit zu optimieren.

Zusammenfassend

Der Data LWC Container ist eine Brückenkomponente, die Avonnis No-Code-Funktionen für Datenabfragen, Filterung, Suche und Paginierung mit den einzigartigen visuellen Darstellungsmöglichkeiten einer von einem Entwickler erstellten benutzerdefinierten Lightning Web Component kombiniert.