Soluciones de navegación para los portales de SharePoint Online
Cada proyecto del portal debe implementar una solución de navegación. En función de los requisitos del proyecto, la solución de navegación podría optar por aprovechar solo los componentes de navegación listos para usar, solo los componentes de navegación personalizados o una combinación de ambos.
En este artículo se describe cómo crear un sistema de navegación con un buen rendimiento en SharePoint Online.
Nota:
Aunque esta guía está destinada principalmente a SharePoint Online, la mayor parte también se aplica a portales alojados en un entorno de SharePoint local.
Qué debe evitar
La siguiente lista contiene las acciones clave que no debe hacer al diseñar la solución de navegación.
No debe:
- Usar una navegación de sitio estructural lista para usar cuando las colecciones de sitios del portal tengan una estructura compleja (varios niveles de sitios o permisos únicos).
- Usar una solución de navegación personalizada que solicite todos los nodos de navegación para todos los controles de navegación personalizados en cuanto se cargue la página, incluso para los controles que están contraídos u ocultos inicialmente.
- Usar una solución de navegación personalizada que no almacene en caché los nodos de navegación que recibe.
- Usar una solución de navegación personalizada que tenga como destino el servicio web de listas heredado (SOAP); para problemas adicionales, agregue algunas consultas CAML mal formadas.
- Obtener un almacén de términos haciendo referencia por nombre o id. (p. ej.,
var termStores = taxSession.get_termStores();var termStore = termStores.getByName("Taxonomy_Dmxzz8tIBzk8wNVKQpJ+xA==");); se recomienda obtener la palabra clave predeterminada o el almacén de términos de colección de sitios (p. ej.,var termStore = taxSession.getDefaultSiteCollectionTermStore();ovar termStore = taxSession.DefaultKeywordsTermStore()).
Justificación de una solución de navegación personalizada
Hay muchas razones por las que un arquitecto de portales podría decidir adoptar una solución de navegación personalizada. La mayoría de los motivos están relacionados con el hecho de que los diseños de portales modernos responden por naturaleza y suelen incluir un sistema de navegación con muchas características; como tal, los intentos de asignar el diseño propuesto a SharePoint finalmente producen un error porque los controles de navegación del lado servidor listos para usar no se pueden configurar para cumplir uno o varios requisitos del diseño propuesto. A continuación, se muestran ejemplos específicos.
El control listo para usar:
- Y su experiencia del usuario de administración no admite un diseño de interfaz de usuario con capacidad de respuesta.
- No muestra los comportamientos necesarios (como control flotante/mantener el puntero, megamenú, medios enriquecidos, carga diferida).
- No admite los atributos de jerarquía de navegación deseados (como encabezados, agrupación, profundidad, límite de vínculos).
- No admite los atributos de vínculo de navegación deseados (como miniatura, vínculo de imagen, inicio/fin de publicación, énfasis).
- No está disponible o ya no está disponible (como pie de página o ruta de navegación).
- No se integra con almacenes de datos de navegación personalizados o heredados.
- La experiencia del usuario de administración es incoherente en los controles de navegación y no es fácil de usar.
Cuando se suman suficientes motivos, considere usar una solución de navegación personalizada.
Uso de una solución de navegación lista para usar
Ha evaluado la justificación de una solución de navegación personalizada y ha decidido que no se aplica ninguna de esas razones. La buena noticia es que puede aprovechar patrones probados para una solución de navegación lista para usar.
En esencia, una solución de navegación consta de un conjunto de controles de navegación que reciben los datos de un almacén de navegación. Al elegir una solución de navegación lista para usar, la navegación administrada (que se describe más adelante en este artículo) suele ser la opción preferida para un almacén de navegación porque ofrece un mejor rendimiento de carga de página.
La otra opción, la navegación estructural lista para usar (que se describe más adelante en este artículo), puede hacer fácilmente un uso intensivo de recursos (especialmente para estructuras complejas de colección de sitios) y puede dar lugar a un rendimiento de carga de página significativamente más lento.
Uso de una solución de navegación personalizada
Ha evaluado la justificación de una solución de navegación personalizada y ha decidido que se aplican suficientes de esas razones. La buena noticia es que puede aprovechar patrones probados para desarrollar una solución de navegación personalizada.
En el diagrama siguiente se muestra la arquitectura lógica de una solución de navegación personalizada.
En las secciones siguientes se describen los componentes principales de la arquitectura lógica.
Control de visualización de navegación
Se trata de un control personalizado de visualización de JavaScript del lado cliente que reside en la página.
En general, el control consulta el almacén de navegación cuando se carga la página, procesa la respuesta de datos de navegación y representa el componente de navegación (presentación, información y comportamiento). En la práctica, el control debe observar un patrón de carga diferida: ejecute la solicitud de datos de navegación solo cuando sea necesario y pospóngala el mayor tiempo posible.
El control de visualización se puede agregar a la definición estática de la página en tiempo de diseño (a través de una página principal, un diseño de página o un elemento web) o se puede agregar al estado dinámico de la página en tiempo de ejecución (mediante la técnica de incrustación de JavaScript).
El control de visualización aprovecha la capa de acceso a datos del lado cliente (que se describe más adelante en este artículo) para optimizar el rendimiento de la página.
De manera opcional, el control de visualización puede proporcionar un vínculo de configuración para su página de administración de navegación, que proporciona una interfaz de usuario para administrar la configuración del control de navegación.
A continuación, se muestran algunas instrucciones generales para los distintos tipos de controles de navegación que se usan normalmente en una solución de navegación personalizada.
Controles de visualización de navegación típicos
- Navegación global: implemente un control personalizado destinado a una entidad de configuración de navegación central específica del portal. Use una memoria caché pública para los nodos de navegación. Considere la página de administración lista para usar.
- Navegación de pie de página: implemente un control personalizado destinado a una entidad de configuración de navegación central específica del portal. Use una memoria caché pública para los nodos de navegación. Considere la página de administración lista para usar.
- Mapa del sitio: implemente un control personalizado destinado a una entidad de configuración de navegación central específica del portal.
- Navegación actual (es decir, izquierda): implemente un control personalizado destinado a una entidad de configuración de navegación local específica de la web. Use una memoria caché pública para los nodos de navegación. Considere la página de administración lista para usar.
- Ruta de navegación: evite implementar este control personalizado; la construcción de la cadena primaria de objetos web, basada en la dirección URL de la web actual, es una operación costosa.
- Vínculos útiles: implemente un control personalizado destinado a una entidad de configuración de navegación local específica de la web. Use una memoria caché pública para los nodos de navegación. Considere la página de administración lista para usar.
- Mis vínculos: implemente un control personalizado destinado a una entidad de configuración de navegación específica del usuario privada. Use una memoria caché privada para los nodos de navegación. Proporcione una página de administración personalizada.
Almacén de navegación
El almacén de navegación conserva la configuración del control de navegación personalizado. Puede elegir que el control de navegación personalizado use un almacén de navegación personalizado o un almacén de navegación listo para usar.
Almacén de navegación personalizado
El almacén de navegación personalizado más usado, una lista personalizada de SharePoint, logra un equilibrio entre extensibilidad, manejabilidad y rendimiento (cuando se consulta a través de la búsqueda). El esquema de lista se puede extender fácilmente con tipos de contenido personalizados que representan encabezados o grupos de navegación y vínculos de navegación, y columnas de sitio que definen los atributos personalizados deseados (por ejemplo, el orden de visualización). Las propiedades rastreadas de estas columnas de sitio se pueden asignar a propiedades administradas dentro de la búsqueda de SharePoint. Los datos de navegación se administran fácilmente a través de las páginas de administración de listas listas para usar conocidas. Se puede acceder a los datos de navegación de forma remota a través de la API de REST de búsqueda de SharePoint.
Nota:
La navegación basada en búsqueda tiene una dependencia en el índice de búsqueda. SharePoint rastrea continuamente el contenido del portal; sin embargo, todavía hay un pequeño retraso antes de que los cambios en la lista de SharePoint aparezcan en el índice de búsqueda.
El almacén de navegación personalizado más sencillo y con el mejor rendimiento es un archivo de recursos de JavaScript (por ejemplo, nav.js) que declara una variable de configuración específica del componente (por ejemplo, footerNav) que se inicializa con una cadena JSON. El explorador descarga automáticamente el archivo y lo almacena en caché para su uso posterior. Los datos de configuración están listos para su uso después de cargarse en el entorno de tiempo de ejecución de JavaScript. La principal compensación de este enfoque re relaciona con la interfaz de usuario de administración: como mínimo, un administrador debe editar manualmente una cadena JSON en un archivo JavaScript. Se necesitaría una interfaz de usuario personalizada para abstraer el almacén del administrador y hacer que las cosas sean un poco más fáciles de usar.
En el otro extremo del espectro de almacenes de navegación personalizados se encuentra la base de datos personalizada. Esta opción proporciona lo último en flexibilidad, pero también requiere el desarrollo más personalizado. Además, se necesita un entorno de hospedaje para la base de datos, la API web personalizada y la página de administración de navegación.
Nota:
Para obtener un ejemplo excelente que muestra cómo implementar un almacén de navegación personalizado que usa la capa de acceso a datos del lado cliente, consulte Ejemplo de capa de acceso a datos del lado cliente (DAL) en el repositorio PnP de SharePoint.
Almacén de navegación listo para usar
Navegación administrada lista para usar (MMS): la navegación administrada le permite usar un conjunto de términos de servicio de metadatos administrados (MMS) para configurar los nodos de navegación de una colección de sitios determinada. Los controles de visualización de navegación listos para usar consumen automáticamente estos datos. La página de administración de navegación lista para usar proporciona una interfaz de usuario fácil de usar para administrar los nodos de navegación dentro de una jerarquía sin restricciones (profundidad ilimitada). Los controles de visualización de navegación personalizados también pueden consumir estos datos, pero deben hacerlo a través de JSOM, ya que actualmente no hay ninguna API de REST disponible para trabajar con la navegación administrada.
Nota:
Es bastante complicado configurar y mantener una definición de navegación global a través de la navegación administrada. A medida que se crea cada nueva colección de sitios, debe duplicar la configuración de la colección de sitios y su conjunto de términos asociado. Tenga en cuenta también que la navegación administrada no se recorta por seguridad, por lo que los usuarios podrían ver vínculos a los que no pueden acceder.
Navegación estructural lista para usar (Sitio): la navegación estructural le permite usar la estructura nativa de la colección de sitios (sus webs y páginas), así como títulos y vínculos creados, para configurar los nodos de navegación para una colección de sitios determinada. La página de administración de navegación lista para usar proporciona una interfaz de usuario para administrar los nodos de navegación dentro de una jerarquía sin restricciones (profundidad limitada). Los controles de visualización de navegación personalizados también pueden consumir estos datos, pero deben hacerlo a través de JSOM porque actualmente no hay ninguna API de REST disponible para trabajar con la navegación estructural.
Nota:
Los controles de visualización de navegación listos para usar usan consultas de base de datos (es decir, contenido por consulta) para obtener los datos de navegación. Lo hacen para cada carga de página, que consume muchos recursos para estructuras de colección de sitios complejas. El uso de la navegación estructural solo se recomienda para portales pequeños con estructuras de colección de sitios simples. La navegación estructural siempre devuelve resultados recortados por seguridad.
Índice de búsqueda listo para usar (Búsqueda): la navegación controlada por búsqueda le permite consultar el índice de búsqueda de SharePoint para sitios y páginas mediante la construcción de la consulta de búsqueda adecuada. No hay ninguna página de administración de navegación lista para usar específica y debe implementar controles de visualización de navegación personalizados para consumir los datos recuperados de las consultas de búsqueda.
Nota:
Al usar la navegación por búsqueda, es importante almacenar en la caché los resultados de la búsqueda obtenidos porque no desea tener acceso al servidor para cada carga de página. Más adelante en este artículo, se explica la capa de acceso a datos del lado cliente, que es el modelo que se va a usar en combinación con la navegación por búsqueda. Al igual que la navegación estructural, la navegación por búsqueda está recortada por seguridad, por lo que los usuarios no los verán vínculos inaccesibles. La desventaja de la navegación por búsqueda es que es difícil controlar el orden de los elementos de navegación devueltos.
Página de administración de navegación
La página de administración de navegación proporciona una interfaz de usuario para administrar la configuración del control de navegación de una manera fácil de usar. Se puede acceder a la página directamente, así como desde un vínculo opcional presente en el control de navegación (por ejemplo, un vínculo a Configuración). La página usa las API de almacén de navegación adecuadas para que el almacén de navegación elegido administre la configuración del control de navegación.
Puede elegir que el control de navegación personalizado use una página de administración de navegación personalizada o una página de administración de navegación lista para usar.
En muchos casos, la página de administración de navegación lista para usar predeterminada (por ejemplo, la vista de lista de SharePoint o la página de administración de conjunto de términos) asociada al almacén de navegación elegido debería ser suficiente. Cuando una página predeterminada no está disponible, obviamente debe desarrollar una página personalizada. Al decidir si la página predeterminada existente es aceptable o no, asegúrese de tener en cuenta el costo total de desarrollar una página de administración personalizada (diseño, desarrollo/mantenimiento, hospedaje y aprendizaje de los usuarios).
Como regla general, busque páginas de administración personalizadas solo cuando no existe una opción predeterminada, cuando la página debe admitir una interfaz de usuario con capacidad de respuesta o cuando la página está pensada para consumirse a través de la vista de usuario front-end del portal (en lugar de la vista de administrador de back-end).
API del almacén de navegación
La API del almacén de navegación proporciona una interfaz de programación para administrar la configuración del control de navegación de forma coherente y segura. Puede optar por que el control de navegación personalizado use una API de almacén de navegación personalizada o una API de almacén de navegación lista para usar.
Si desea desarrollar e implementar una API de almacén de navegación personalizada, tenga en cuenta las siguientes directrices:
- Implemente usando la pila de tecnología que prefiera (ASP.NET Web API 2.0, Node.js,...).
- Hospede la API en un entorno accesible desde Internet.
- Use DNS público para la resolución de nombres.
- Requiera SSL y obtenga el certificado SSL de una entidad de certificación pública.
- Habilite el acceso anónimo y proteja la API con Azure AD.
- Implemente la compatibilidad con recursos entre orígenes (CORS).
Para entornos de cliente .NET:
- Las API de SharePoint de destino a través del modelo de objetos del lado cliente de SharePoint (CSOM o REST).
- Establezca como destino las API web personalizadas a través de REST.
- Establezca como destino las API de terceros a través de REST (use SOAP solo si es necesario).
Para entornos de cliente de explorador:
- Las API de SharePoint de destino a través de las API de REST de SharePoint (use JSOM solo si es necesario).
- Use la biblioteca entre dominios si tiene como destino una colección de sitios diferente.
- Establezca como destino las API web personalizadas a través de REST.
- Use la biblioteca de autenticación de Microsoft para JavaScript y el flujo de OAuth implícito.
- Establezca como destino las API de terceros a través de REST (o SOAP si es necesario).
Capa de acceso a datos del lado cliente
La capa de acceso a datos del lado cliente es un marco de JavaScript del lado cliente personalizado que está disponible para todos los controles de visualización del lado cliente personalizados, incluidos los controles de visualización de navegación personalizados. Admite patrones de carga de datos inteligentes, abstrae los detalles de las solicitudes de cliente a servidor, proporciona funcionalidad de almacenamiento en caché de datos para minimizar el tráfico de solicitudes de cliente a servidor y mejora el rendimiento de las páginas percibidas.
Para más información sobre la Capa de acceso a datos del lado cliente, vea Guía de rendimiento para los portales de SharePoint Online.