> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/premiers-pas/quick-start-guide.md). # Guide de démarrage rapide Experience Builder vous donne le cadre d’un site : un thème, une navigation, des pages. Les Avonni Experience Components le remplissent avec plus de quarante composants (tableaux, cartes, calendriers, galeries, chronologies, métriques) qui lisent vos enregistrements Salesforce et communiquent entre eux sur la page, configurés dans le panneau des propriétés, sans code. Au cours des 15 prochaines minutes, vous allez créer une **Trouver un installateur certifié** page pour un portail client : un tableau des installateurs lu depuis vos Comptes, et une carte qui affiche les maisons déjà équipées par l’installateur sélectionné.

Ce que vous aurez à la fin : choisissez un installateur, et la carte affiche ses installations récentes.

{% hint style="success" %} **Ce que vous allez apprendre** * Comment trouver les composants AX dans Experience Builder et en déposer un sur une page * Comment pointer un composant vers vos enregistrements Salesforce avec une source de données Query * Comment faire réagir un composant à ce que le visiteur sélectionne dans un autre * Ce dont les membres de votre site ont besoin avant de voir la page {% endhint %} {% hint style="warning" %} **Avant de commencer** * Le [package Avonni Experience Components](https://appexchange.salesforce.com/appxListingDetail?listingId=2e584bb3-b5e0-415d-9347-d6567158d840) est installé. Activez **Lightning Web Security** d’abord, dans **Configuration** > **Paramètres de session** : sans cela, l’installation échoue avec `LWC1503 : les importations dynamiques ne sont pas autorisées`. * Sur un site Aura, activez aussi **Lightning Web Security** dans les **Paramètres** > **Sécurité et confidentialité**. * Vous avez un site sur lequel travailler, et quelques enregistrements à afficher. Ce guide utilise des Comptes de type *Partenaire d’installation* et leurs Contacts, chaque Contact contenant l’adresse d’une maison installée. {% endhint %} *** ## Créer le chercheur d’installateurs {% stepper %} {% step %} #### Ouvrez la page dans Experience Builder Dans **Configuration**, recherchez **Expériences numériques**, ouvrez **Tous les sites**, puis cliquez sur **Builder** à côté de votre site. Choisissez la page dans le menu en haut à gauche (ce guide utilise **Accueil**), puis ajoutez une section à deux colonnes où prendront place le tableau et la carte. {% endstep %} {% step %} #### Trouver les composants AX Cliquez sur l’icône **Composants** (l’éclair) dans la barre de gauche et saisissez `AX` dans la zone de recherche. Chaque composant Avonni est सूचीé sous **Composants personnalisés**, chacun avec le préfixe **AX -** .

Le panneau Composants, filtré sur AX.

{% hint style="info" %} Les composants Screen Flow s’appellent **Avonni** *Composant*, et ceux d’Experience **AX -** *Composant*. Les deux packages peuvent coexister dans la même org. {% endhint %} {% endstep %} {% step %} #### Déposez un AX - Data Table et nommez-le Glissez **AX - Data Table** dans la colonne de gauche. Son panneau des propriétés s’ouvre à droite. Deux réglages comptent pour cette page : * **Nom API**: `installers`. C’est le nom que les autres composants utiliseront pour lire la ligne sélectionnée par le visiteur. * **Sélection maximale de lignes**: `1`, afin que le visiteur choisisse un installateur à la fois.

The AX - Data Table selected on the canvas, and its property panel with API Name set to installers and Max Row Selection set to 1 — Le panneau des propriétés du tableau : Nom API et Sélection maximale de lignes.

{% endstep %} {% step %} #### Rattachez-le à vos Comptes Faites défiler le panneau des propriétés jusqu’à **Source de données** et cliquez sur **Requête**. 1. **Nom API de l’objet**: `Compte`. 2. **Filtres**: **Type de compte** égal à `Partenaire d’installation`, et **État/Province de facturation** égal à `CO`. 3. **Champs supplémentaires**: **Téléphone du compte**. Ce n’est pas une colonne, mais la page l’affichera. 4. Sous **Mappages de données**, cliquez sur **Ajouter des colonnes** et choisissez Nom du compte, Ville de facturation et Description du compte. Ouvrez chaque colonne pour lui donner une étiquette plus courte : Installateur, Ville, Spécialité. Le tableau se remplit immédiatement avec vos enregistrements, sur le canevas.

The Data Source section of the AX - Data Table with Query selected, Object API Name Account, two filters (Account Type equals Installation Partner, Billing State equals CO) and the table on the canvas listing six Colorado installers — Une source de données Query : l’objet, les filtres et les enregistrements sur le canevas.

{% endstep %} {% step %} #### Déposez une AX - Map qui suit le tableau Glissez **AX - Map** dans la colonne de droite et définissez son **Source de données** sur **Requête**: 1. **Nom API de l’objet**: `Contact`. 2. **Filtres**: **ID du compte** égal à `{{installers.selectedRecord.Id}}`. 3. Sous **Mappages de données**, définissez le **Titre** sur le Titre du Contact et sa localisation sur **Latitude postale** et **Longitude postale**. Ce filtre est toute l’astuce. `installers` est le Nom API du tableau, `selectedRecord` est la ligne choisie par le visiteur, et `Id` est le champ à lire dans cette ligne. Lorsque le visiteur choisit un autre installateur, la carte relance sa requête, sans code et sans rechargement de page.

The AX - Map selected, with its Data Source set to Query on Contact and a filter Account ID equals {{installers.selectedRecord.Id}}, and its Data Mappings below — La requête de la carte, filtrée sur la ligne sélectionnée dans le tableau.

{% endstep %} {% step %} #### Nommer l’installateur au-dessus de la carte Déposez un **AX - Text Block** au-dessus de la carte et écrivez son texte avec la même syntaxe : ``` Installations récentes {{installers.selectedRecord.Name}} {{installers.selectedRecord.Phone}} ``` Tout champ interrogé par le tableau peut être lu de cette façon, y compris le Téléphone que vous avez ajouté comme champ supplémentaire. {% endstep %} {% step %} #### Prévisualisez-le Cliquez sur **Prévisualiser** en haut à droite. Choisissez un installateur : son nom et son numéro de téléphone s’affichent, et la carte se déplace vers les maisons qu’il a équipées.

The same page with Pikes Peak Power selected in the table, its phone number above the map, and the map showing its installations around Colorado Springs — Un autre installateur, un autre ensemble d’épingles : la page répond au choix du visiteur.

{% endstep %} {% step %} #### Publiez et donnez l’accès à vos membres 1. Cliquez sur **Publiez**. 2. Donnez à vos membres du site une licence Avonni et le jeu d’autorisations, sur la page [Gestion des licences](/experience-cloud/experience-cloud-fr/premiers-pas/license-management.md) . 3. Assurez-vous que leur profil peut lire les enregistrements : Compte et Contact ici. Les composants Avonni respectent vos paramètres de partage et ne les contournent jamais, de sorte qu’un membre voit exactement les lignes que Salesforce lui autorise à voir. [Apprendre les bases](/experience-cloud/experience-cloud-fr/premiers-pas/learning-the-basics.md) contient les détails. {% endstep %} {% endstepper %} *** ## Ce que vous venez d’utiliser | Idée | Ici | Réutilisez-le pour | | ----------------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | **Composants AX dans Experience Builder** | Data Table, Map, Text Block | Plus de quarante composants : Calendar, Gallery, Timeline, Metric, Kanban et le reste | | **Source de données Query** | Installateurs depuis Account, installations depuis Contact | Tout objet que vos membres peuvent lire, avec filtres et tri | | **Composants réactifs** | `{{installers.selectedRecord.Id}}` dans le filtre de la carte | Un tableau qui alimente un deuxième tableau, une carte qui alimente un bloc de texte, une liste qui alimente une chronologie | | **Votre site, votre marque** | Le thème et la navigation SolarOps autour des composants | Chaque page d’un site Aura ou LWR | ## Si quelque chose semble incorrect | Ce que vous voyez | Cause probable | Correction | | ---------------------------------------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | Aucun composant AX dans le panneau Composants | Le package n’est pas installé, ou le niveau de sécurité du site les bloque | Vérifiez l’installation, puis le message en haut de **Composants personnalisés** | | Le tableau est vide | Les filtres ne correspondent à rien, ou le lecteur ne peut pas lire l’objet | Testez les filtres sur un enregistrement que vous connaissez, et vérifiez l’accès du profil | | La carte ne bouge pas lorsqu’une ligne est sélectionnée | Le Nom API dans le filtre ne correspond pas à celui du tableau | `installers` dans `{{installers.selectedRecord.Id}}` doit être exactement celui du tableau **Nom API** | | La carte affiche une zone par défaut avant toute sélection | Sa requête n’a pas encore de ligne sur laquelle se baser | C’est prévu. Elle se remplit dès que le visiteur sélectionne une ligne | Toujours bloqué ? [Composants réactifs](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md) explique le dépannage plus en détail. ## Continuez

		Image de couverture
Sources de données	Query, CMS Collection ou Manual : chaque façon d’alimenter un composant, et quand choisir laquelle.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FJKfTje5RpchEizxF30XE%2Fxp-quickstart-cover-query.png?alt=media	Sources de données
Composants réactifs	La syntaxe complète de selectedRecord, les composants qui la prennent en charge, et le dépannage.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FqzYl3awWaUu4HRWqiwau%2Fxp-quickstart-cover-reactive.png?alt=media	Composants réactifs
Lier un Data Table et une Map	Le même modèle tableau/carte, sur les Comptes, pas à pas.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FMmoOE8XAYZIOdgI60QN0%2Fxp-quickstart-cover-map.png?alt=media	Lier la table de données et la carte pour des emplacements dynamiques
Tous les composants	Parcourez chaque composant AX, de Accordion à Video, avec sa propre page.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FEE7PAy1DqgMswl2R1cUu%2Fxp-quickstart-cover-components.png?alt=media	Voir tous les composants
AX - Data Table	Tri, recherche, modification en ligne, fichiers sur chaque ligne : tout ce que le tableau peut faire pour vos membres.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FdYBnT69WbVXtAxk8Po6r%2Fwelcome-portal-data-table.png?alt=media	AX - Table de données
Portails et sites partenaires	Projets complets construits de bout en bout dans une vraie org, avec la configuration derrière chacun.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3KtJGDtgwDzuWVjJKH9n%2Fprojects-portals-and-partner-sites.png?alt=media	https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/premiers-pas/quick-start-guide.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.

Sources de données

Composants réactifs

Lier un Data Table et une Map

Tous les composants

AX - Data Table

Portails et sites partenaires