Generische interaktive Komponente „USA Data Map“
Überblick
Die generische interaktive USA-Datenkarte ist eine wiederverwendbare Adobe Experience Manager (AEM)-Sites-Komponente, die in erster Linie Visualisierung von AEM-Übermittlungen adaptiver Formulare nach US-Bundesstaat).
Die Komponente bietet eine interaktive geografische Darstellung der Formularübermittlungsaktivität, sodass Benutzende die Verteilung der Übermittlungen in den USA verstehen, Bundesstaaten mit höheren Übermittlungsmengen identifizieren und die Anzahl der Übermittlungen auf Bundesstaatsebene anzeigen können.
Obwohl der primäre Anwendungsfall die Anzeige von Formularübermittlungen ist, ist die Komponente datenquellenunabhängig und kann andere statusbasierte Geschäftsmetriken wie Verkäufe, Kundenverteilung und Service-Anfragen visualisieren.
Inhaltsautoren können einen kompatiblen REST-API-Endpunkt über das AEM-Komponentendialogfeld konfigurieren, ohne die JavaScript- oder Backend-Implementierung der Komponente zu ändern.
Die Komponente verwendet D3.js und TopoJSON zum Rendern einer interaktiven USA-Zuordnung, wobei Status gemäß den von der konfigurierten REST-API zurückgegebenen Werten dynamisch eingefärbt werden.
Wichtigste Funktionen
- Visualisierung der Formularübermittlung: Zeigt aggregierte Zahlen der AEM-Übermittlung adaptiver Formulare nach US-Bundesstaat an.
- Interaktive geografische Karte: Färbt die einzelnen Zustände nach dem Volumen der Übermittlung.
- Statusauswahl: Ermöglicht Benutzern das Klicken auf einen Status, um den Namen, den Status-Code und die Anzahl der Übermittlungen anzuzeigen.
- Zusammenfassungsstatistiken: Zeigt die Gesamtzahl der Übermittlungen, die Anzahl der dargestellten Status und den Status mit dem höchsten Übermittlungsvolumen an.
- Konfigurierbare REST-Datenquelle: Unterstützt kompatible REST-APIs, die auf Azure, Render, AWS oder anderen Plattformen gehostet werden.
- Datenquellenunabhängigkeit: Erfordert keine spezielle Datenbank- oder Backend-Technologie.
- Konfigurierbare JSON-Feldzuordnung: Ermöglicht es Autoren, die JSON-Eigenschaften anzugeben, die Status-Codes und numerische Werte darstellen.
- Anpassbare Präsentation: Unterstützt konfigurierbare Zuordnungstitel, Metrikbeschriftungen, Zusammenfassungsstatistiken und QuickInfos.
- Responsives Design: passt sich an verschiedene Bildschirmgrößen an.
- Tastaturbedienung: Unterstützt die tastatusbasierte Auswahl.
Primärer Anwendungsfall: AEM Forms-Übermittlungen nach Bundesland
Die -Komponente wird im Allgemeinen als Teil eines AEM Forms-Dashboards verwendet, um die geografische Verteilung der Übermittlungen adaptiver Formulare zu visualisieren.
Wenn ein Benutzer ein adaptives Formular sendet, werden die Übermittlungsdaten in einem Backend-System wie der Azure SQL-Datenbank gespeichert.
Eine REST-API ruft die Übermittlungen nach Status ab und aggregiert sie und gibt die Ergebnisse in dem von der Komponente erwarteten JSON-Format zurück.
Die USA-Karte nutzt diese API-Antwort und zeigt die Anzahl der Übermittlungen geografisch an.
Beispiel
Erhält eine Organisation Einreichungen aus Kalifornien, Texas und New York, werden diese Bundesstaaten entsprechend der Anzahl der eingegangenen Einreichungen hervorgehoben.
Benutzende können mit der Zuordnung interagieren, um die mit jedem Status verknüpfte Sendeanzahl anzuzeigen.
Dies bietet eine visuelle Möglichkeit, die Formularübermittlungsaktivität zu überwachen und geografische Trends zu identifizieren.
REST API-Datenvertrag
Die Komponente erwartet, dass ein HTTP-GET-Endpunkt aggregierte Daten auf Zustandsebene im JSON-Format zurückgibt.
Beispielantwort:
{
"states": [
{ "state": "CA", "count": 150 },
{ "state": "TX", "count": 95 },
{ "state": "NY", "count": 70 }
]
}
Jeder Datensatz repräsentiert einen US-Bundesstaat und die entsprechende Anzahl von Einsendungen.
Die Namen der Felder „Status“ und „Wert“ können über das Authoring-Dialogfeld von AEM konfiguriert werden.
Beispielsweise kann eine REST-API, die stateCode und totalSubmissions zurückgibt, durch Zuordnen dieser Felder in der Komponentenkonfiguration unterstützt werden.
Die Backend-REST-API ist für das Abrufen, Aggregieren und Formatieren der Formularübermittlungsdaten in die erwartete JSON-Struktur auf Zustandsebene verantwortlich. Die Komponente fragt keine Datenbanken ab und aggregiert keine einzelnen Übermittlungen.
AEM Authoring-Konfiguration
Die Komponente bietet ein Dialogfeld für die AEM Touch-Benutzeroberfläche mit den folgenden Konfigurationsoptionen:
Sicherheitskonfigurationsfelder erzwingen keine unabhängige Zugriffssteuerung. Geschützte Endpunkte müssen ihre eigene Authentifizierung und Autorisierung implementieren.
Datenquellenintegration
Die Komponente unterstützt zwei REST-Integrationsmuster.
Direkte REST-API-Integration
Die Komponente ruft direkt aus dem Browser eine kompatible REST-API auf.
Der Endpunkt muss HTTPS, eine geeignete CORS-Konfiguration und alle anwendbaren Anforderungen der Content Security Policy unterstützen.
Geschützte REST-API-Integration
Bei Backend-Services, die API-Schlüssel oder Authentifizierung erfordern, kann die Komponente ein AEM Sling-Servlet oder einen anderen sicheren Backend-Proxy aufrufen.
Dadurch wird sichergestellt, dass vertrauliche Anmeldeinformationen Server-seitig bleiben.
Validierte Implementierungen
AEM Forms Submission Dashboard
Die Komponente ist implementiert, um die Anzahl der Übermittlungen adaptiver Formulare anzuzeigen, die in der Azure SQL-Datenbank gespeichert sind.
Die Integration verwendet AEM Adaptive Forms, Azure-Funktionen, Azure SQL und ein AEM Sling-Servlet, um die Anzahl der Übermittlungen auf Zustandsebene abzurufen.
Externe REST-API-Integration
Die Komponente wurde auch mit einer Node.js-REST-API getestet, die auf Render gehostet wird, und gibt Beispielverkaufsdaten nach US-Bundesstaat zurück.
Dies zeigt, dass die Komponente Daten aus verschiedenen Backend-Systemen visualisieren kann, ohne dass Änderungen an der Rendering-Logik erforderlich sind.
Technologie-Stack
- Adobe Experience Manager as a Cloud Service
- AEM HTL- und Granite-Benutzeroberfläche
- JavaScript und SCSS
- D3.js und TopoJSON
- Webpack- und AEM-Client-Bibliotheken
- JSON-REST-APIs
Wiederverwendbarkeit
Während die Komponente in erster Linie dazu dient, AEM Forms-Übermittlungen nach Bundesstaat zu visualisieren, kann sie auch andere Metriken auf Bundesstaatsebene anzeigen, einschließlich Verkauf, Kundenverteilung, Marketing-Konversionen, Service-Anfragen und Zweigstellenaktivitäten.
Um die Komponente wiederzuverwenden, konfigurieren Autoren einen kompatiblen REST-Endpunkt und die entsprechenden JSON-Feldzuordnungen.
Zusammenfassung
Die generische interaktive USA-Datenkarte bietet eine wiederverwendbare geografische Visualisierungsfunktion für AEM Sites, wobei die Überwachung der Übermittlung adaptiver AEM-Formulare als Hauptanwendungsfall gilt.
Unternehmen können damit die Anzahl der Formularübermittlungen in den US-Bundesstaaten visualisieren, geografische Trends identifizieren und die Anzahl der Übermittlungen auf Bundesstaatsebene interaktiv untersuchen.
Seine datenquellenunabhängige Architektur eignet sich auch für andere Szenarien des Unternehmens-Reportings, sofern die konfigurierte REST-API kompatible JSON-Daten auf Zustandsebene zurückgibt.