> 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/panneau-des-proprietes/interactions/navigate.md).

# Naviguer

Redirigez les utilisateurs vers une page — un enregistrement, une page d’objet, une page nommée, une URL externe, et plus encore — lorsqu’ils interagissent avec un composant.

## Aperçu

L’interaction Navigate vous permet de définir des actions de navigation lorsque les utilisateurs interagissent avec des composants, comme en cliquant sur un bouton. Cette fonctionnalité permet une redirection fluide vers différents types de pages, améliorant l’engagement des utilisateurs et offrant une expérience de navigation homogène sur votre site.

<figure><img src="/files/d2f1f8fd119577890fa93982f1d7a02fc1b228e6" alt="" width="563"><figcaption></figcaption></figure>

### **Fonctionnalités clés**

* Prend en charge plusieurs types de références de page
* Actions de navigation personnalisables
* Améliore le flux de navigation du site

### Cas d’utilisation

* **Page produit :** Rediriger vers une page de spécifications détaillées du produit.
* **Page d’assistance :** Naviguer vers un article d’aide ou un formulaire de contact.
* **Page Communauté :** Lien vers un profil de membre ou un fil de discussion.
* **Page événement :** Diriger vers un formulaire d’inscription à un événement.
* **Page d’atterrissage :** Guider vers une page de détails de campagne.
* **Page de profil :** Naviguer vers les enregistrements de contact associés.

## Configuration

Ajoutez l’interaction Navigate à un composant (par exemple, Button) sur une page de site Experience Cloud et configurez-la via l’onglet Interactions dans Experience Builder.

### **Types de navigation disponibles**

Ces types de références de page indiquent où les utilisateurs sont dirigés.

| Type de navigation                                   | Description                                                                       | Exemple de cas d’utilisation                    |
| ---------------------------------------------------- | --------------------------------------------------------------------------------- | ----------------------------------------------- |
| **Aura - Page d’enregistrement externe**             | Lien vers une page d’enregistrement spécifique à l’aide du framework Aura.        | Afficher les détails d’un contact.              |
| **Aura - Page de relation d’enregistrement externe** | Lien vers des enregistrements associés (par exemple, les contacts d’un compte).   | Voir les opportunités d’un compte.              |
| **Aura - Page de connexion**                         | Déclenche des actions de connexion ou de déconnexion.                             | Se connecter pour accéder au contenu restreint. |
| **Article de connaissances**                         | Dirige vers un article de connaissances spécifique.                               | Accéder à un article d’assistance.              |
| **Page de contenu géré**                             | Lien vers une page de contenu gérée par un CMS.                                   | Afficher un article d’actualité.                |
| **Page nommée**                                      | Redirige vers une page interne d’Experience Builder.                              | Aller à une page nommée « Support ».            |
| **Page d’objet**                                     | Navigue vers une vue de liste ou une page de nouvel enregistrement pour un objet. | Ouvrir la vue de liste des contacts.            |
| **Page d’enregistrement**                            | Lien vers la page de détail d’un enregistrement spécifique.                       | Afficher un enregistrement de compte.           |
| **Page de relation d’enregistrement**                | Navigue vers une liste associée (par exemple, les opportunités d’un contact).     | Voir les cas d’un compte.                       |
| **Page Web**                                         | Redirige vers une page Web externe ou interne.                                    | Lien vers un site partenaire.                   |

*<mark style="background-color:green;">**Bonne pratique**</mark>:* Choisissez le type en fonction de la cible (par exemple, Page d’enregistrement pour les enregistrements) ; testez la navigation en aperçu.

**Configuration de la navigation vers une page spécifique**

Pour configurer la navigation vers une page ou une ressource spécifique, suivez ces étapes en fonction de votre cas d’utilisation :

### **Naviguer vers une page nommée**

1. Ajoutez un composant Button et allez à l’onglet **Interactions** Tab.
2. Sélectionnez **Navigate** et choisissez **Page nommée**.
3. **Nom de la page :** Entrez le nom API de la page cible (par exemple, Content\_Document\_\_c).
4. *Pourquoi cela ?* Dirige les utilisateurs vers une page interne (par exemple, une page de document de contenu) définie dans Experience Builder.

<figure><img src="/files/236fe32a5492f482d8e9d5aae6e39506626959c3" alt=""><figcaption></figcaption></figure>

### **Naviguer vers une page d’enregistrement**

Utilisez cette option lorsque vous souhaitez qu’un bouton ou un composant ouvre la page de détail d’un enregistrement spécifique dans votre site Experience Cloud

#### Étapes de configuration

1. Sélectionnez **Navigate** et choisissez **Page d’enregistrement**.
2. **Nom API de l’objet :** Entrez l’objet (par exemple, Contact).
3. **ID d’enregistrement :** Sélectionnez le champ d’ID d’enregistrement correct pour la redirection ; en général, il s’agit de «**`Enregistrement : Id`**».
4. **Nom de l’action :** Définir sur Afficher (par défaut pour les détails).

*Pourquoi cela ?* Amène les utilisateurs à la page de détail d’un enregistrement spécifique (par exemple, un enregistrement de contact).

<figure><img src="/files/f335bfbe0dae4bc07fecc01251db0b8ca16cffce" alt="" width="304"><figcaption></figcaption></figure>

{% hint style="warning" %}

#### Important

Pour garantir le bon fonctionnement de la navigation vers une page d’enregistrement, créez d’abord la page d’objet sur votre site Experience où l’interaction Navigate doit aboutir. Si cette page n’existe pas, l’interaction Navigate vers une page d’enregistrement ne fonctionnera pas.
{% endhint %}

### **Naviguer vers une page Web externe**

Utilisez cette option lorsque vous souhaitez qu’un bouton ou un composant ouvre un site externe ou une autre ressource Web, comme votre site principal, un portail partenaire ou une page de documentation

#### Étapes de configuration

1. Choisissez l’ **Navigate** interaction et sélectionnez l’ **Page Web** option.
2. **URL cible :** Vous pouvez soit :
   * Sélectionner un champ (par exemple, un champ de formule sur l’enregistrement qui stocke l’URL) pour définir dynamiquement la cible de redirection.
   * Ou choisir **Personnalisé** et saisir manuellement une URL externe (par exemple, <https://www.example.com>).
3. **Pourquoi cela ?** Cette option redirige les utilisateurs vers un site Web ou une ressource externe, améliorant la connectivité du site.
4. **Dépannage :** Si la navigation ne fonctionne pas, vérifiez que l’URL ou la valeur du champ sélectionné est valide et assurez-vous que l’utilisateur dispose des autorisations nécessaires pour accéder au site cible.

### **Transmission de paramètres d’URL avec Navigate vers une page nommée**

Cette fonctionnalité vous permet d’envoyer des données dynamiques (par exemple, un ID d’enregistrement) vers une page cible, en personnalisant son contenu selon le contexte de l’utilisateur. Elle est idéale pour créer des expériences personnalisées, comme l’affichage des détails d’un enregistrement spécifique sur une nouvelle page.

<figure><img src="/files/e6d4b851a48f51e01daa7175c8a9dbaf9268c4f2" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

#### **Configurer la page cible**

Ajoutez un composant tel que Avonni Record Detail à la page cible (par exemple, CustomerDetails). Dans son attribut "Record ID", utilisez l’expression {!Route.recordId} pour capturer un paramètre d’URL nommé recordId.

<figure><img src="/files/19f5c14b983390697113c3594e2c2907fc680030" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Configurer le bouton**

Sur la page source (par exemple, la page d’accueil), ajoutez un bouton Avonni. Dans les **Navigate** paramètres, choisissez **Page nommée** et saisissez le nom API (par exemple, CustomerDetails).
{% endstep %}

{% step %}

#### **Ajouter des paramètres**

* **Nom :** Entrez recordId (correspondant à l’attribut du composant cible).
* **Valeur :** Sélectionnez un champ (par exemple, {!Record.Id}) ou saisissez un ID d’enregistrement spécifique à transmettre.

<figure><img src="/files/77c557c06ca9c360a9eb15621392da3347e5358a" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
*Pourquoi est-ce utile*

Cette fonctionnalité vous permet d’envoyer des données dynamiques (par exemple, un ID d’enregistrement) vers la page cible, en personnalisant son contenu. Par exemple, cliquer sur un bouton sur la page d’accueil peut amener les utilisateurs vers une page CustomerDetails affichant les informations d’un contact spécifique en fonction du recordId transmis.
{% endstep %}

{% step %}
*Analogie*

Pensez-y comme à l’adressage d’une lettre — Navigate vers une page nommée est l’enveloppe, et le paramètre d’URL (par exemple, recordId) est l’adresse, indiquant au système où aller et quelles données apporter
{% endstep %}

{% step %}
*Dépannage*

Si la page cible ne se charge pas correctement, assurez-vous que le paramètre recordId correspond à l’attribut du composant cible et que l’ID est valide.
{% endstep %}
{% endstepper %}

### **Naviguer vers un article de connaissances**

1. Sélectionnez **Navigate** et choisissez **Article de connaissances**.
2. **Nom de l’URL :** Entrez l’expression `{{Record.UrlName}}` pour créer dynamiquement un lien vers l’article de connaissances associé à l’enregistrement actuel.
3. *Pourquoi cela ?* Dirige les utilisateurs vers une page d’article de connaissances spécifique en fonction du `UrlName` champ de l’enregistrement actuel, simplifiant l’accès au contenu d’assistance.
4. *Conseil :* L’ `{{Record.UrlName}}` expression utilise la syntaxe LWR pour récupérer le nom d’URL unique de l’article de connaissances (par exemple, à partir d’un enregistrement associé). Assurez-vous que l’enregistrement comporte un `UrlName` champ renseigné.
5. *Dépannage :* Si la navigation échoue, vérifiez que le `UrlName` champ existe et contient un segment d’URL d’article de connaissances valide (par exemple, article-title) ; vérifiez les autorisations de l’utilisateur pour accéder à l’article.

***

## Exemple

### **Exemple 1 : Naviguer vers la page d’assistance**

Cet exemple ajoute un bouton pour naviguer vers une page d’assistance sur un site Experience Cloud.

1. **Configurer le bouton :**
   * **Libellé :** « Obtenir de l’aide »
   * **Nom de l’icône :** utility:help
   * **Variante :** neutre
   * *Pourquoi cela ?* Crée un bouton d’aide pour assister les utilisateurs.
2. **Définir le lien vers l’interaction :**
   * **Navigate :**
     * **Type :** Page nommée
     * **Nom de la page :** Customer\_Support\_\_c
     * *Pourquoi cela ?* Redirige vers la page CustomerSupport définie dans Experience Builder.

**Résultat :** Les utilisateurs cliquent sur le bouton depuis n’importe quelle page et sont redirigés vers la page d’assistance.

<figure><img src="/files/f22fecc90463f09eebd1e366cbe7054e1d4a880e" alt="" width="375"><figcaption></figcaption></figure>

***

## Considérations importantes

* **Précision de la cible :** Assurez-vous que les noms ou IDs de page correspondent exactement.
* **Performances :** Gardez les cibles de navigation légères.
* **Accessibilité :** Testez le focus et le contraste du bouton.
* **Sécurité :** Validez les URL externes pour éviter les problèmes.

***

## Dépannage

* **La navigation ne fonctionne pas :** Vérifiez le type et la cible sélectionnés (par exemple, le bon nom de page ou ID d’enregistrement) ; vérifiez les autorisations.
* **Page introuvable :** Assurez-vous que la page nommée ou l’objet existe dans Experience Builder.
* **L’ID dynamique échoue :** Confirmez que la source de l’ID d’enregistrement (par exemple, {!Record.Id}) est valide.
* **Si les problèmes persistent :** Contactez notre équipe d’assistance à <support@avonni.com> pour obtenir de l’aide.


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
