La mayoría de intranets de SharePoint necesitan una forma de mostrar mensajes urgentes — mantenimiento programado, interrupciones de sistemas, anuncios importantes. El requisito parece sencillo: mostrar un banner destacado en la parte superior de la página principal, permitir que el equipo de comunicación lo controle sin implicar a desarrolladores, y que desaparezca limpiamente cuando no hay nada que comunicar.
Las decisiones de implementación importan más de lo que parece a primera vista.
Por qué PnP Modern Search y no otras opciones
Cuando surgió este requisito en una intranet ya funcionando con PnP Modern Search, valió la pena pensar detenidamente en el enfoque de implementación.
Un web part SPFx personalizado era la alternativa obvia — control total, componente limpio, desplegable como paquete de solución. Pero para un banner de mensajes basado en una lista, supone una carga significativa. Cada cambio en el diseño de la tarjeta requiere un desarrollador, una compilación y un redespliegue. Para algo operativamente tan simple como un banner de notificaciones, puede ser la herramienta equivocada.
Un web part estático — un web part de texto o de contenido destacado — requeriría que un editor de páginas actualizara la página principal cada vez que hubiera que cambiar un mensaje. Eso significa dar a los equipos de comunicación acceso de edición a la página principal, o canalizar cada cambio de mensaje a través de alguien que lo tenga. Ninguna opción es aceptable en una intranet bien gobernada.
PnP Modern Search ya estaba desplegado en el sitio. Sin paquetes de solución adicionales que desplegar, sin nuevas dependencias que introducir, sin proceso de aprobación para un nuevo web part. Una lista de SharePoint como fuente de datos, una plantilla Handlebars personalizada para el renderizado, y una consulta KQL para filtrar los mensajes activos. El equipo de comunicación obtiene una interfaz de lista familiar para gestionar los mensajes. La solución está completamente basada en listas.
Las decisiones de diseño
La gestión basada en lista era el objetivo principal. La lista MessageBanner da al equipo de comunicación control total — crea un nuevo elemento, establece MessageStatus en Activo, y el banner aparece. Cámbialo a Inactivo y desaparece. Sin edición de páginas, sin implicación de desarrolladores, sin proceso de despliegue. Una columna ExpirationDate opcional significa que los mensajes pueden configurarse para expirar automáticamente sin que nadie tenga que recordar desactivarlos.
Los niveles de severidad como columna de opción — Bajo, Medio, Alto — mantienen la experiencia del editor simple mientras le dan a la plantilla todo lo que necesita para manejar la diferenciación visual. El valor de la opción fluye a través de una propiedad administrada a la plantilla Handlebars, donde establece un atributo data-warning-level en el contenedor de la tarjeta. Los selectores de atributo CSS se encargan del resto — diferentes colores de borde, tonos de fondo y colores de etiqueta para cada nivel, sin necesidad de JavaScript.
Dos web parts en lugar de detección del contexto de página para el requisito multilingüe. La página principal en inglés tiene un web part de PnP Search Results, la página principal en francés tiene otro. Ambos consultan la misma lista, pero los mapeos de slots del web part de PnP Search Results difieren — el web part en francés mapea su slot Title a la RefinableString mapeada desde TitleFR, y su slot Description a la RefinableString mapeada desde DescriptionFR. La plantilla Handlebars es casi idéntica en ambos web parts, con la única diferencia siendo el texto de la etiqueta en francés (Élevé/Moyen/Faible) codificado en la plantilla francesa.
Este enfoque es más explícito y más fácil de mantener que detectar pageContext.cultureInfo.currentUICultureName en la plantilla. Cada web part se configura, prueba y actualiza de forma independiente.
URL de plantilla externa en lugar de Handlebars en línea. La plantilla se almacena como un archivo .html en una biblioteca Site Assets (PnP_CustomTemplates/BannerEng.html y BannerFR.html) y se referencia a través de la opción External Template URL en el web part. Esto significa que los cambios en la plantilla se pueden hacer en un solo lugar — editar el archivo en Site Assets — sin tocar la configuración del web part en la página. También significa que la plantilla tiene historial de versiones a través del control de versiones de documentos de SharePoint.
Los problemas habituales
Mapeo de propiedades administradas y retraso del rastreo. La columna MessageStatus necesita mapearse a una propiedad administrada RefinableString antes de poder usarse en la consulta KQL. Después de crear la lista y mapear la propiedad, hay un retraso de rastreo antes de que la propiedad esté disponible en la configuración de slots de PnP Modern Search. Forzar una reindexación manual en la lista acelera esto, pero en SharePoint Online sigue dependiendo del siguiente ciclo de rastreo. Planifica esto al configurar en un entorno de producción.
El patrón de ocultación cuando no hay contenido. Esto funciona en combinación con la opción "Ocultar este web part si no hay nada que mostrar" en la configuración del web part. La opción gestiona el contenedor del web part; el wrapper totalItemsCount gestiona el contenido de la plantilla dentro de él. Ambos son necesarios. La opción sola deja un contenedor vacío con espacio mínimo en la página. El wrapper totalItemsCount solo aún deja visible el marco del web part. Juntos producen un resultado limpio — cuando no hay mensajes activos, el banner ocupa espacio mínimo y nada es visible para el usuario.
El patrón CSS de severidad. Establecer data-warning-level="{{slot item 'RefinableString101'}}" en el contenedor de la tarjeta y luego usar selectores de atributo CSS ([data-warning-level='High']) para manejar el estilo es más limpio que usar condicionales Handlebars para cambiar clases CSS. El valor de la propiedad administrada fluye directamente al atributo HTML, y CSS maneja todo lo demás. Sin JavaScript, sin lógica de cambio de clases en la plantilla.
El resultado
Un banner que los equipos de comunicación pueden gestionar completamente a través de una lista de SharePoint. Los mensajes aparecen en minutos tras establecerse como Activos, desaparecen cuando se establecen como Inactivos o cuando pasa la fecha de expiración, y se renderizan correctamente en inglés y francés sin necesidad de editar ninguna página.
El esquema completo de la lista, la configuración de slots y ambas plantillas Handlebars están en la página de ejemplo.