Carte réactive et tableau de données

Aperçu

Cet exemple démontre un cas d'utilisation courant des composants réactifs : connecter un Avonni Tableau de données et un Avonni Carte pour créer une visualisation interactive. Vous verrez comment la sélection d'un enregistrement dans la table de données peut automatiquement mettre à jour la Carte pour afficher l'emplacement correspondant.

Ce que nous allons construire

Nous allons créer un composant simple avec deux éléments principaux :

• Table de données : Affiche une liste de Comptes.

• Carte : Affiche l'emplacement du Compte actuellement sélectionné dans la table de données.

Comment ça fonctionne

La clé de cette interaction est un filtre réactif sur la source de données du composant Carte :

1. Table de données : La table de données est configurée avec une source de données (par ex., une requête) qui récupère les enregistrements de Comptes, y compris les informations d'adresse/emplacement (par ex., Billing Street, Billing City, Billing State/Province, Billing Zip/Postal Code, Billing Country).

2. Sélection de l'utilisateur : L'utilisateur sélectionne un Compte dans la table de données.

3. firstSelectedRow Mise à jour : La propriété firstSelectedRow de la table de données reflète automatiquement le Compte nouvellement sélectionné.

4. Filtre réactif : La source de données du composant Carte est configurée avec un filtre qui référence la firstSelectedRow.Id propriété de la table de données. Ceci est le lien réactif.

5. Mise à jour automatique de la carte : En raison du filtre réactif, lorsque firstSelectedRow change, la source de données de la Carte relance la requête vers Salesforce, récupère les données de localisation pour le Compte nouvellement sélectionné, et met à jour l'affichage de la Carte automatiquement.

Cela crée une expérience utilisateur fluide où la sélection d'un Compte met instantanément à jour la Carte pour afficher son emplacement.

---

Étapes guidées

Pour créer une connexion réactive entre une table de données et une Carte, suivez ces étapes :

1

Préparez la mise en page

Mise en page à deux colonnes : Ajoutez un composant de mise en page à deux colonnes à votre composant dynamique. Cela vous permettra de placer la table de données et la Carte côte à côte.

2

Ajouter et configurer la table de données (Maître)

• Ajouter une table de données : Faites glisser un composant Avonni Data Table dans la gauche colonne de votre mise en page.

• Configurer la source de données :

  • Cliquez sur le composant Data Table pour ouvrir son panneau de propriétés.

  • Sélectionnez Avonni Query Data Source en tant que type de source de données.

  • Cliquez sur Créer une requête, ou sélectionnez une requête existante.

  • Objet : Sélectionnez Compte.

  • Filtres (facultatif) : Ajoutez tous les statique filtres dont vous avez besoin (par ex., pour afficher uniquement les Comptes d'un certain type). Ne pas pas ajouter le filtre réactif ici.

  • Ajoutez des colonnes à votre table de données via la section "Colonnes" dans le panneau de propriétés. Pour chaque colonne, cliquez sur "Ajouter une colonne", sélectionnez un "Champ source", et configurez les autres paramètres souhaités (Étiquette, Modifiable, etc.).

• Limiter la sélection de lignes :

  • Dans les propriétés de la table de données, trouvez le paramètre pour Sélection maximale de lignes (ou similaire).

  • Réglez-le sur 1. Cela garantit qu'un seul Compte peut être sélectionné à la fois, ce qui est nécessaire pour notre Carte réactive.

3

Ajouter et configurer la Carte (Détail)

• Ajouter une Carte : Faites glisser un composant Avonni Map dans la droite colonne de votre mise en page.

• Configurer la source de données :

  • Cliquez sur la carte pour ouvrir les propriétés.

  • Sélectionnez Avonni Query Data Source.

  • Objet : Sélectionnez Compte.

• Créer le filtre réactif :

  • Ouvrez l'éditeur de filtre pour la source de données de requête de la Carte.

  • Ajoutez une condition de filtre :

    • Champ : Sélectionnez le Id champ (ou le champ qui identifie de manière unique les Comptes).

    • Opérateur : Choisissez égal.

    • Valeur : Utilisez le référencement direct d'attributs pour lier à la ligne sélectionnée dans la table de données :

      !AccountsTable.firstSelectedRow.Id

      @RangeSliderName.value AccountsTable RangeSliderName nom de votre composant de table de données).

• Sélectionner les champs de localisation de la Carte

  • Dans les propriétés de la Carte, sélectionnez le champ qui correspond aux champs d'emplacement.

  • Configurer les champs d'emplacement de la Carte : Dans les propriétés du composant Carte, trouvez la section pour configurer les données de localisation (elle peut être intitulée « Emplacement », « Paramètres de la carte » ou similaire). Vous devez indiquer au composant Carte quels champs dans votre source de données contiennent l'adresse ou les coordonnées. Par exemple, vous pouvez mapper :

    • BillingStreet au champ "Street" dans les paramètres de la Carte.

    • BillingCity au champ "City".

    • BillingState au champ "State/Province".

    • BillingPostalCode au champ "Zip/Postal Code".

    • BillingCountry au champ "Country".

    Sélectionnez les champs corrects de votre source de données correspondant à chaque partie de l'adresse. Si vous utilisez la latitude/longitude, mappez ces champs en conséquence.

4

Tester la réactivité

• Aperçu : Prévisualisez votre composant dynamique.

• Sélectionnez un Compte : Cliquez sur une ligne dans la table de données.

• Observez la Carte : La Carte devrait se mettre à jour automatiquement pour afficher l'emplacement du Compte sélectionné