Composant de mappage de données États-Unis interactif générique

Vue d’ensemble

Le mappage de données interactif générique pour les États-Unis est un composant Sites Adobe Experience Manager (AEM) réutilisable principalement conçu pour visualiser les envois de formulaires adaptatifs AEM par les États américains.

Le composant fournit une représentation géographique interactive de l’activité d’envoi de formulaire, ce qui permet aux utilisateurs de comprendre la distribution des envois à travers les États-Unis, d’identifier les États où le volume d’envois est le plus élevé et d’afficher le nombre d’envois au niveau de l’État.

Bien que son principal cas d’utilisation concerne l’affichage des envois de formulaire, le composant est indépendant de la source de données et peut visualiser d’autres mesures commerciales basées sur l’état, telles que les ventes, la distribution aux clients et les demandes de service.

Les auteurs de contenu peuvent configurer un point d’entrée d’API REST compatible via la boîte de dialogue du composant AEM sans modifier le JavaScript du composant ou l’implémentation principale.

Le composant utilise D3.js et TopoJSON pour effectuer le rendu d’un mappage interactif aux États-Unis, en coloriant dynamiquement les états en fonction des valeurs renvoyées par l’API REST configurée.

Fonctions clés

Cas d’utilisation Principal - Envois AEM Forms par état

Le composant est généralement utilisé dans le cadre d’un tableau de bord ​​pour visualiser la répartition géographique des envois de formulaires adaptatifs.

Lorsqu’un utilisateur envoie un formulaire adaptatif, les données d’envoi sont stockées dans un système principal tel qu’Azure SQL Database.

Une API REST récupère et agrège les envois par état et renvoie les résultats au format JSON attendu par le composant.

La carte des États-Unis utilise cette réponse d’API et affiche le nombre d’envois géographiquement.

Exemple

Si une organisation reçoit des demandes de la Californie, du Texas et de New York, la carte indique ces États en fonction du nombre de demandes reçues.

Les utilisateurs peuvent interagir avec la carte pour afficher le nombre d’envois associés à chaque état.

Cela permet de surveiller visuellement l’activité d’envoi de formulaire et d’identifier les tendances géographiques.

Contrat de données API REST

Le composant attend un point d’entrée HTTP GET qui renvoie des données agrégées au niveau de l’état au format JSON.

Exemple de réponse :

{
  "states": [
    { "state": "CA", "count": 150 },
    { "state": "TX", "count": 95 },
    { "state": "NY", "count": 70 }
  ]
}

Chaque enregistrement représente un État américain et son nombre d’envois correspondant.

Les noms des champs d’état et de valeur peuvent être configurés via la boîte de dialogue de création d’AEM.

Par exemple, une API REST renvoyant des stateCode et des totalSubmissions peut être prise en charge en mappant ces champs dans la configuration du composant.

L’API REST du serveur principal est chargée de récupérer, d’agréger et de formater les données d’envoi du formulaire dans la structure JSON au niveau de l’état attendue. Le composant n’interroge pas les bases de données ni n’agrège les envois individuels.

Configuration de création AEM

Le composant fournit une boîte de dialogue de l’interface utilisateur tactile d’AEM avec les options de configuration suivantes :

Les champs de configuration de sécurité n’appliquent pas indépendamment le contrôle d’accès. Les points d’entrée protégés doivent mettre en œuvre leur propre authentification et leur propre autorisation.

Intégration de la source de données

Le composant prend en charge deux modèles d’intégration REST.

Intégration de l’API REST directe

Le composant appelle directement une API REST compatible à partir du navigateur.

Le point d’entrée doit prendre en charge HTTPS, une configuration CORS appropriée et toutes les exigences de la politique de sécurité du contenu applicables.

Intégration de l’API REST protégée

Pour les services principaux nécessitant des clés API ou une authentification, le composant peut appeler un servlet Sling AEM ou un autre proxy principal sécurisé.

Cela garantit que les informations d’identification sensibles restent côté serveur.

Implémentations validées

Tableau de bord de soumission AEM Forms

Le composant a été implémenté pour afficher les nombres d’envois de formulaires adaptatifs stockés dans la base de données SQL d’Azure.

L’intégration utilise AEM Adaptive Forms, les fonctions Azure, Azure SQL et un servlet Sling AEM pour récupérer le nombre d’envois au niveau de l’état.

Intégration de l’API REST externe

Le composant a également été testé avec une API REST Node.js hébergée sur Render, renvoyant des exemples de données de vente par état américain.

Cela démontre que le composant peut visualiser les données de différents systèmes principaux sans avoir à modifier sa logique de rendu.

Pile Technologique

Réutilisation

Bien que le composant soit principalement destiné à visualiser les envois d’AEM Forms par état il peut également afficher d’autres mesures au niveau de l’état, notamment les ventes, la distribution aux clients, les conversions marketing, les demandes de service et l’activité des branches.

Pour réutiliser le composant, les auteurs configurent un point d’entrée REST compatible et les mappages de champs JSON appropriés.

Résumé

La carte de données interactive générique des États-Unis offre une fonctionnalité de visualisation géographique réutilisable pour AEM Sites, avec la surveillance de l’envoi de formulaires adaptatifs AEM comme principal cas d’utilisation.

Il permet aux entreprises de visualiser les volumes d’envoi de formulaire dans les différents États américains, d’identifier les tendances géographiques et d’explorer de manière interactive le nombre d’envois au niveau de l’État.

Son architecture indépendante de la source de données la rend également adaptée à d’autres scénarios de création de rapports d’entreprise, à condition que l’API REST configurée renvoie des données JSON au niveau de l’état compatibles.