Componente mappa dati interattiva generica per USA
Panoramica
La mappa dati interattiva generica per gli Stati Uniti è un componente di Adobe Experience Manager (AEM) Sites riutilizzabile progettato principalmente per visualizzare gli invii di moduli adattivi di AEM in base allo stato degli Stati Uniti.
Il componente fornisce una rappresentazione geografica interattiva dell’attività di invio dei moduli, che consente agli utenti di comprendere la distribuzione degli invii negli Stati Uniti, identificare gli stati con volumi di invio più elevati e visualizzare i conteggi di invio a livello di stato.
Anche se il caso d’uso principale è la visualizzazione degli invii di moduli, il componente è indipendente dall’origine dati e può visualizzare altre metriche aziendali basate sullo stato, come le richieste di vendita, distribuzione clienti e assistenza.
Gli autori di contenuti possono configurare un endpoint API REST compatibile tramite la finestra di dialogo del componente AEM senza modificare il JavaScript o l’implementazione back-end del componente.
Il componente utilizza D3.js e TopoJSON per eseguire il rendering di una mappa interattiva degli Stati Uniti, colorando dinamicamente gli stati in base ai valori restituiti dall’API REST configurata.
Funzioni principali
- Visualizzazione invio modulo: visualizza i conteggi aggregati per l’invio di moduli adattivi AEM in base allo stato USA.
- Mappa geografica interattiva: Colora i singoli stati in base al volume di invio.
- Selezione stato: consente agli utenti di fare clic su uno stato per visualizzarne il nome, il codice stato e il numero di invii.
- Statistiche di riepilogo: visualizza il totale degli invii, il numero di stati rappresentati e lo stato con il volume di invio più alto.
- Origine dati REST configurabile: supporta API REST compatibili ospitate su Azure, Render, AWS o altre piattaforme.
- Indipendenza origine dati: non richiede un database o una tecnologia di back-end specifica.
- Mapping campi JSON configurabile: Consente agli autori di specificare le proprietà JSON che rappresentano i codici di stato e i valori numerici.
- Presentazione personalizzabile: supporta titoli di mappa configurabili, etichette di metrica, statistiche di riepilogo e descrizioni comandi.
- Progettazione reattiva: si adatta a diverse dimensioni dello schermo.
- Accesso facilitato alla tastiera: supporta la selezione dello stato basata su tastiera.
Caso d’uso principale: invii di AEM Forms per stato
Il componente viene generalmente utilizzato come parte di un dashboard di AEM Forms per visualizzare la distribuzione geografica degli invii di moduli adattivi.
Quando un utente invia un modulo adattivo, i dati di invio vengono memorizzati in un sistema back-end come Azure SQL Database.
Un’API REST recupera e aggrega gli invii per stato e restituisce i risultati nel formato JSON previsto dal componente.
La mappa USA utilizza questa risposta API e visualizza i conteggi degli invii geograficamente.
Esempio
Se un’organizzazione riceve contributi da California, Texas e New York, la mappa evidenzia tali stati in base al numero di contributi ricevuti.
Gli utenti possono interagire con la mappa per visualizzare il conteggio degli invii associato a ciascuno stato.
Questo fornisce un modo visivo per monitorare l’attività di invio dei moduli e identificare le tendenze geografiche.
Contratto dati REST API
Il componente richiede che un endpoint HTTP GET restituisca dati aggregati a livello di stato in formato JSON.
Risposta di esempio:
{
"states": [
{ "state": "CA", "count": 150 },
{ "state": "TX", "count": 95 },
{ "state": "NY", "count": 70 }
]
}
Ogni record rappresenta uno stato degli Stati Uniti e il relativo conteggio di invio corrispondente.
I nomi dei campi stato e valore sono configurabili tramite la finestra di dialogo di authoring di AEM.
Ad esempio, un’API REST che restituisce stateCode e totalSubmissions può essere supportata mappando tali campi nella configurazione del componente.
L’API REST back-end è responsabile del recupero, dell’aggregazione e della formattazione dei dati di invio del modulo nella struttura JSON prevista a livello di stato. Il componente non esegue query sui database né aggrega singoli invii.
Configurazione authoring AEM
Il componente fornisce una finestra di dialogo dell’interfaccia utente touch di AEM con le seguenti opzioni di configurazione:
I campi di configurazione della protezione non impongono in modo indipendente il controllo degli accessi. Gli endpoint protetti devono implementare la propria autenticazione e autorizzazione.
Integrazione origine dati
Il componente supporta due modelli di integrazione REST.
Integrazione diretta API REST
Il componente chiama direttamente un’API REST compatibile dal browser.
L’endpoint deve supportare HTTPS, la configurazione CORS appropriata e tutti i requisiti Content Security Policy applicabili.
Integrazione API REST protetta
Per i servizi back-end che richiedono chiavi API o autenticazione, il componente può chiamare un servlet Sling di AEM o un altro proxy backend sicuro.
In questo modo le credenziali riservate rimangono sul lato server.
Implementazioni convalidate
Dashboard invio AEM Forms
Il componente è stato implementato per visualizzare i conteggi di invio dei moduli adattivi memorizzati nel database SQL di Azure.
L’integrazione utilizza AEM Adaptive Forms, Azure Functions, Azure SQL e AEM Sling Servlet per recuperare i conteggi degli invii a livello di stato.
Integrazione API REST esterna
Il componente è stato anche testato con un’API REST Node.js in hosting su Render, restituendo dati di vendita di esempio per stato degli Stati Uniti.
Questo dimostra che il componente può visualizzare dati da diversi sistemi back-end senza richiedere modifiche alla logica di rendering.
Stack di tecnologie
- Adobe Experience Manager as a Cloud Service
- Interfaccia utente di AEM per HTL e Granite
- JAVASCRIPT e SCSS
- D3.js e TopoJSON
- Webpack e librerie client di AEM
- API REST JSON
Riutilizzabilità
Anche se il componente è principalmente destinato a visualizzare gli invii di AEM Forms per stato, può anche visualizzare altre metriche a livello di stato, tra cui vendite, distribuzione dei clienti, conversioni di marketing, richieste di servizi e attività di filiale.
Per riutilizzare il componente, gli autori configurano un endpoint REST compatibile e le mappature dei campi JSON appropriate.
Riepilogo
La mappa dati interattiva generica per gli Stati Uniti fornisce una funzionalità di visualizzazione geografica riutilizzabile per AEM Sites, con il monitoraggio dell’invio di moduli adattivi di AEM come caso d’uso principale.
Consente alle organizzazioni di visualizzare i volumi di invio dei moduli negli Stati Uniti, identificare le tendenze geografiche ed esplorare in modo interattivo i conteggi di invio a livello di stato.
La sua architettura indipendente dall’origine dei dati lo rende adatto anche ad altri scenari di reporting aziendale, purché l’API REST configurata restituisca dati JSON compatibili a livello di stato.