Mit “Lightning Web Chart.js Component” gibt es seit Januar 2021 eine Lösung aus dem Salesforce AppExchange, mit der man kostenlos beliebige Diagramme erstellen kann. Nach der Installation ermöglicht es die Komponente, mithilfe des Diagram-Builders, an beliebiger Stelle Diagramme anzulegen. So lassen sich die Grafiken zum Beispiel auf der Startseite platzieren oder direkt auf der Oberfläche von Datensätzen wie Accounts oder Kontakten.

Das Besondere

Neben der hohen Anpassbarkeit gibt es die Möglichkeit, Daten direkt aus der Datenbank anzuzeigen. Dabei werden diese per SOQL-Abfrage ausgelesen und für die Darstellung verwendet. So ist es möglich, unabhängig von Berichten und Dashboards, eigene Diagramme anzulegen, die beliebige Daten vereinen können. Im folgenden Beispiel werden die Mitarbeiterzahlen von Accounts abhängig vom Rechnungsland dargestellt. Dazu kann man folgende SOQL-Abfrage hinterlegen:

select BillingCountry label, SUM(NumberOfEmployees) value from Account WITH SECURITY_ENFORCED GROUP BY BillingCountry ORDER BY BillingCountry LIMIT 20

Über die SOQL-Abfrage werden zum einen die Labels des Diagramms definiert (BillingCountry) und zum anderen die Values, also die anzuzeigenden Werte (hier die Summe der NumberOfEmployees, demzufolge die Summe der Mitarbeiter). “WITH SECURITY_ENFORCED” stellt dabei sicher, dass nur Werte herangezogen werden, auf die der Nutzer Zugriff hat.

Für jeden das richtige dabei

Steht die Datenbasis, so kann die Darstellung beliebig angepasst werden. Vom Diagrammtyp (Balken, Kreis, …) über die Farbgebung hin zu Titeln und Platzierung der Legende lässt sich hier sehr viel einstellen. Die dabei entstandenen Diagramme sehen optisch ansprechend aus und lassen Interaktionen wie das Filtern der dargestellten Werte zu. So können zum Beispiel die Länder “USA” und “Italy” in der Darstellung abgewählt werden, wodurch sich die Diagramme live umformen und die Darstellung nur noch zwischen den verbleibenden Ländern erfolgt.

Im folgenden Video können Sie sehen, wie das oben genannte Beispiel angezeigt und angepasst werden kann:

Über die manuelle Platzierung und Einstellung der Diagramme hinaus lässt sich die Komponente auch für Entwickler sehr gut weiter anpassen. Der Quellcode ist auf GitHub verfügbar, dadurch kann er in eigene Projekte eingebunden werden, um die Darstellung noch weiter abzuändern oder auch die darzustellenden Daten noch freier aufbereiten zu können.

Beide Varianten (die einfach Einbettung per Diagramm-Builder und die benutzerdefinierte Entwicklung im Code) konnten durch intuitive Bedienung und gute Anpassbarkeit überzeugen.

Beitrag von Oliver

Sie haben Fragen dazu? Kontaktieren Sie unsere abilex Saleforce Spezialisten.