> 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-es/panel-de-propiedades/interactions/navigate.md).

# Navegar

## Resumen

La interacción Navigate te permite definir acciones de navegación cuando los usuarios interactúan con componentes, como al hacer clic en un botón. Esta función permite redirigir sin problemas a varios tipos de páginas, mejorando la participación del usuario y creando una experiencia de navegación fluida en todo tu sitio.

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

### **Características clave**

* Admite múltiples tipos de referencia de página
* Acciones de navegación personalizables
* Mejora el flujo de navegación del sitio

### Casos de uso

* **Página de producto:** Redirige a una página detallada de especificaciones del producto.
* **Página de soporte:** Navega a un artículo de ayuda o a un formulario de contacto.
* **Página de comunidad:** Enlaza a un perfil de miembro o a un hilo de discusión.
* **Página de evento:** Dirige a un formulario de registro de eventos.
* **Página de destino:** Lleva a una página de detalles de campaña.
* **Página de perfil:** Navega a registros de contacto relacionados.

## Configuración

Añade la interacción Navigate a un componente (p. ej., Button) en una página de sitio de Experience Cloud y configúrala mediante la pestaña Interactions en Experience Builder.

### **Tipos de navegación disponibles**

Estos tipos de referencia de página especifican a dónde se dirige a los usuarios.

| Tipo de navegación                                | Descripción                                                                  | Caso de uso de ejemplo                               |
| ------------------------------------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------- |
| **Aura - Página de registro externo**             | Enlaza a una página de registro específica mediante el framework Aura.       | Ver los detalles de un contacto.                     |
| **Aura - Página de relación de registro externo** | Enlaza a registros relacionados (p. ej., contactos de una cuenta).           | Ver oportunidades de una cuenta.                     |
| **Aura - Página de inicio de sesión**             | Desencadena acciones de inicio o cierre de sesión.                           | Inicia sesión para acceder al contenido restringido. |
| **Artículo de conocimiento**                      | Dirige a un artículo de conocimiento específico.                             | Accede a un artículo de soporte.                     |
| **Página de contenido administrado**              | Enlaza a una página de contenido administrada por CMS.                       | Ver un artículo de noticias.                         |
| **Página con nombre**                             | Redirige a una página interna de Experience Builder.                         | Ir a una página con nombre "Support".                |
| **Página de objeto**                              | Navega a una vista de lista o a una página de nuevo registro para un objeto. | Abrir la vista de lista de Contactos.                |
| **Página de registro**                            | Enlaza a la página de detalles de un registro específico.                    | Ver un registro de Cuenta.                           |
| **Página de relación de registro**                | Navega a una lista relacionada (p. ej., Oportunidades de un contacto).       | Ver casos de una cuenta.                             |
| **Página web**                                    | Redirige a una página web externa o interna.                                 | Enlazar a un sitio de socios.                        |

*<mark style="background-color:green;">**Buena práctica**</mark>:* Elige el tipo según el destino (p. ej., Página de registro para registros); prueba la navegación en la vista previa.

**Configuración de la navegación a una página específica**

Para configurar la navegación a una página o recurso específico, sigue estos pasos según tu caso de uso:

### **Navegar a una página con nombre**

1. Añade un componente Button y ve a la **Interacciones** pestaña.
2. Selecciona **Navegar** y elige **Página con nombre**.
3. **Nombre de la página:** Introduce el nombre de API de la página de destino (p. ej., Content\_Document\_\_c).
4. *¿Por qué?* Dirige a los usuarios a una página interna (p. ej., una página de documento de contenido) definida en Experience Builder.

<figure><img src="/files/1269d58d5965543e70d2cabfce7b07e1f956c513" alt=""><figcaption></figcaption></figure>

### **Navegar a una página de registro**

Usa esta opción cuando quieras que un botón o componente abra la página de detalles de un registro específico en tu sitio de Experience Cloud

#### Pasos de configuración

1. Selecciona **Navegar** y elige **Página de registro**.
2. **Nombre de API del objeto:** Introduce el objeto (p. ej., Contact).
3. **ID del registro:** Selecciona el campo correcto de ID de registro para la redirección; normalmente es “**`Registro: Id`**”.
4. **Nombre de la acción:** Establécelo en Ver (predeterminado para los detalles).

*¿Por qué?* Lleva a los usuarios a la página de detalles de un registro específico (p. ej., un registro de Contacto).

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

{% hint style="warning" %}

#### Importante

Para asegurarte de que la navegación a una página de registro funcione correctamente, primero crea la página de objeto en tu sitio Experience, donde debe llegar la interacción Navigate. Si esta página no existe, la interacción Navigate to Record Page no funcionará.
{% endhint %}

### **Navegar a una página web externa**

Usa esta opción cuando quieras que un botón o componente abra un sitio externo u otro recurso web, como tu sitio principal, un portal de socios o una página de documentación

#### Pasos de configuración

1. Elige la **Navegar** interacción y selecciona la **Página web** opción.
2. **URL de destino:** Puedes:
   * Seleccionar un campo (p. ej., un campo de fórmula en el registro que almacena la URL) para establecer dinámicamente el destino de la redirección.
   * O bien, elige **Personalizada** e introduce manualmente una URL externa (p. ej., <https://www.example.com>).
3. **¿Por qué?** Esta opción redirige a los usuarios a un sitio web o recurso externo, mejorando la conectividad del sitio.
4. **Solución de problemas:** Si la navegación no funciona, comprueba que la URL o el valor del campo seleccionado sean válidos y asegúrate de que el usuario tenga los permisos necesarios para acceder al sitio de destino.

### **Pasar parámetros de URL con Navegar a una página con nombre**

Esta función te permite enviar datos dinámicos (p. ej., un ID de registro) a una página de destino, personalizando su contenido según el contexto del usuario. Es perfecta para crear experiencias personalizadas, como mostrar detalles de un registro específico en una nueva página.

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

{% stepper %}
{% step %}

#### **Configurar la página de destino**

Añade un componente como Avonni Record Detail a la página de destino (p. ej., CustomerDetails). En su atributo "Record ID", usa la expresión {!Route.recordId} para capturar un parámetro de URL llamado recordId.

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

{% step %}

#### **Configurar el botón**

En la página de origen (p. ej., la página de inicio), añade un botón Avonni. En los **Navegar** ajustes, elige **Página con nombre** e introduce el nombre de API (p. ej., CustomerDetails).
{% endstep %}

{% step %}

#### **Añadir parámetros**

* **Nombre:** Introduce recordId (que coincida con el atributo del componente de destino).
* **Valor:** Selecciona un campo (p. ej., {!Record.Id}) o introduce un ID de registro específico para pasar.

<figure><img src="/files/2dea6aa3ab44698497c5321d576d63c05e1fa95b" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
*Por qué esto es útil*

Esta función te permite enviar datos dinámicos (p. ej., un ID de registro) a la página de destino, personalizando su contenido. Por ejemplo, al hacer clic en un botón de la página de inicio, los usuarios pueden ir a una página CustomerDetails que muestra la información de un contacto específico según el recordId pasado.
{% endstep %}

{% step %}
*Analogía*

Piensa en ello como si estuvieras dirigiendo una carta: Navegar a una página con nombre es el sobre, y el parámetro de URL (p. ej., recordId) es la dirección, que le indica al sistema a dónde ir y qué datos traer
{% endstep %}

{% step %}
*Solución de problemas*

Si la página de destino no se carga correctamente, asegúrate de que el parámetro recordId coincida con el atributo del componente de destino y de que el ID sea válido.
{% endstep %}
{% endstepper %}

### **Navegar a un artículo de conocimiento**

1. Selecciona **Navegar** y elige **Artículo de conocimiento**.
2. **Nombre de URL:** Introduce la expresión `{{Record.UrlName}}` para vincular dinámicamente al artículo de conocimiento asociado con el registro actual.
3. *¿Por qué?* Dirige a los usuarios a una página de artículo de conocimiento específica según el `UrlName` campo del registro actual, simplificando el acceso al contenido de soporte.
4. *Consejo:* La `{{Record.UrlName}}` La expresión usa la sintaxis LWR para extraer el nombre de URL único del artículo de conocimiento (p. ej., desde un registro relacionado). Asegúrate de que el registro tenga un `UrlName` campo rellenado.
5. *Solución de problemas:* Si la navegación falla, verifica que el `UrlName` campo exista y contenga un segmento de URL válido del artículo de conocimiento (p. ej., article-title); comprueba los permisos del usuario para acceder al artículo.

***

## Ejemplos

### **Ejemplo 1: Navegar a la página de soporte**

Este ejemplo añade un botón para navegar a una página de soporte en un sitio de Experience Cloud.

1. **Configurar el botón:**
   * **Etiqueta:** "Get Support"
   * **Nombre del icono:** utility:help
   * **Variante:** neutral
   * *¿Por qué?* Crea un botón de ayuda para asistir al usuario.
2. **Establecer enlace a la interacción:**
   * **Navegar:**
     * **Tipo:** Página con nombre
     * **Nombre de la página:** Customer\_Support\_\_c
     * *¿Por qué?* Redirige a la página CustomerSupport definida en Experience Builder.

**Resultado:** Los usuarios hacen clic en el botón desde cualquier página y navegan a la página de soporte.

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

***

## Consideraciones clave

* **Precisión del destino:** Asegúrate de que los nombres o IDs de las páginas coincidan exactamente.
* **Rendimiento:** Mantén ligeros los destinos de navegación.
* **Accesibilidad:** Prueba el enfoque y el contraste del botón.
* **Seguridad:** Valida las URL externas para evitar problemas.

***

## Solución de problemas comunes

* **La navegación no funciona:** Comprueba el tipo y el destino seleccionados (p. ej., el Nombre de la página o el ID del registro correctos); verifica los permisos.
* **Página no encontrada:** Asegúrate de que la página con nombre o el objeto exista en Experience Builder.
* **El ID dinámico falla:** Confirma que la fuente del ID de registro (p. ej., {!Record.Id}) sea válida.
* **Si los problemas persisten:** Contacta a nuestro equipo de soporte en <support@avonni.com> para obtener ayuda.

***

## Resumen

El componente Avonni Navigate mejora los sitios de Experience Cloud con acciones de navegación personalizables. Es perfecto para guiar a los usuarios a páginas o recursos


---

# 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-es/panel-de-propiedades/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.
