Cómo abrir enlaces en una ventana emergente en PnP Modern Search WebPart (SFx)

Mejora de la experiencia del usuario con enlaces emergentes personalizados en SPFx

En el desarrollo moderno de SharePoint, el uso del elemento web de búsqueda moderna PnP (SPFx) para proporcionar resultados de búsqueda configurables puede mejorar significativamente la experiencia del usuario. Controlar cómo se abren los enlaces es una característica popular entre los desarrolladores, especialmente con el diseño de "Lista detallada". Normalmente los enlaces se abren en una nueva pestaña, pero ¿y si queremos abrirlos en una ventana emergente?

En esta publicación, veremos cómo implementar esta funcionalidad cambiando el comportamiento del vínculo del elemento web de búsqueda moderna PnP. En lugar de abrir los resultados de la búsqueda en una nueva pestaña, mostraremos cómo forzar la apertura del enlace en una ventana emergente personalizada, lo que dará como resultado una experiencia de usuario más integrada.

El desafío surge cuando se utiliza una fórmula como ``, que por defecto es una nueva pestaña. Sin embargo, al usar JavaScript, podemos anular este comportamiento y abrir el enlace en una ventana emergente controlada. Esto permite una mayor flexibilidad a la hora de mostrar contenido dentro de la misma sesión de navegación.

Lo guiaremos a través de los pasos necesarios para desarrollar esta función, centrándonos en el uso de JavaScript y SPFx para mejorar el diseño de la lista detallada. Manténgase atento mientras analizamos la solución para garantizar que su sitio de SharePoint sea perfecto y fácil de usar.

Comprender la solución de ventana emergente en SPFx

Los scripts enumerados anteriormente ajustan el comportamiento predeterminado de los enlaces dentro de un WebPart de búsqueda moderna (SPFx) PnP. De forma predeterminada, los enlaces utilizan el objetivo="_en blanco" etiqueta para abrir en una nueva pestaña. Sin embargo, el propósito aquí es abrir estos enlaces en una ventana emergente, aumentando así la interacción del usuario. Para lograr esto, utilizamos el ventana.abierta() función, que permite a los desarrolladores abrir URL en una nueva ventana o ventana emergente del navegador. Esta función se puede ajustar con parámetros específicos, como ancho, alto y otros atributos (como barras de desplazamiento o cambio de tamaño), para garantizar que la ventana emergente funcione según lo previsto.

Anular el comportamiento de clic predeterminado de las etiquetas de anclaje es un componente vital del enfoque. Esto se hace con evento.preventDefault(), lo que impide que el enlace se abra en una nueva pestaña. En su lugar, adjuntamos un detector de eventos al enlace, que activa una función personalizada (en este caso, abrir en ventana emergente()) que maneja el evento de clic y abre la URL en una ventana emergente. Esto permite a los desarrolladores tener más control sobre el comportamiento del vínculo y da como resultado una experiencia de usuario más consistente dentro del elemento web de búsqueda moderna de PnP.

Además de abordar el comportamiento del front-end, también examinamos un enfoque de backend utilizando los decoradores integrados de SPFx como @anular. Este enfoque permite a los desarrolladores insertar JavaScript directamente en WebParts personalizados, modificando aún más el comportamiento de los resultados de búsqueda. Anular el proceso de renderizado en SPFx nos permite inyectar código JavaScript que maneja los clics en los enlaces y abre el material necesario en una ventana emergente. Esta técnica hace que la solución sea más modular y reutilizable en múltiples áreas de un entorno de SharePoint, mejorando así el mantenimiento.

Las pruebas unitarias son fundamentales para garantizar que la función emergente funcione correctamente en múltiples entornos y navegadores. Usando espiar() en un marco de pruebas de Jasmine valida que el ventana.abierta() El método se ejecuta con los argumentos correctos. Esta forma de prueba identifica problemas potenciales en las primeras etapas del proceso de desarrollo y garantiza que las ventanas emergentes funcionen según lo planeado. Esta solución fortalece las interacciones de los usuarios en el elemento web de búsqueda moderna PnP de SharePoint al integrar el manejo de eventos de front-end, la personalización de backend y las pruebas unitarias.

<script>
function openInPopup(url) {
   // Define popup window features
   const features = 'width=800,height=600,resizable=yes,scrollbars=yes';
   // Open URL in popup
   window.open(url, '_blank', features);
}
// Override link behavior
document.querySelectorAll('a[data-popup="true"]').forEach(function (link) {
   link.addEventListener('click', function (event) {
      event.preventDefault(); // Prevent default link behavior
      openInPopup(this.href); // Open in popup
   });
});
</script>
// HTML for the link:
<a href="{{slot item @root.slots.PreviewUrl}}" data-popup="true" style="color: {{@root.theme.semanticColors.link}}">
   {{slot item @root.slots.Destination}}
</a>

<a href="{{slot item @root.slots.PreviewUrl}}"
   onclick="event.preventDefault(); window.open(this.href, '_blank', 'width=800,height=600');"
   style="color: {{@root.theme.semanticColors.link}}">
   {{slot item @root.slots.Destination}}
</a>
// The window.open parameters define the size and behavior of the popup.

import { override } from '@microsoft/decorators';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
export default class PopupWebPart extends BaseClientSideWebPart {
   @override
   public render(): void {
      this.domElement.innerHTML = `
         <a href="{{slot item @root.slots.PreviewUrl}}" onclick="openPopup(this.href)">
            {{slot item @root.slots.Destination}}
         </a>
      `;
   }
}
function openPopup(url: string): void {
   window.open(url, '_blank', 'width=800,height=600,resizable=yes');
}

describe('Popup Functionality', function() {
   it('should open the link in a popup window', function() {
      spyOn(window, 'open');
      const testUrl = 'http://example.com';
      openInPopup(testUrl);
      expect(window.open).toHaveBeenCalledWith(testUrl, '_blank', jasmine.any(String));
   });
});

Explorando el manejo de eventos y la inyección dinámica de JavaScript en SPFx

Cuando se trabaja con PnP Modern Search WebPart (SPFx), una característica útil para los desarrolladores es la capacidad de ajustar dinámicamente cómo se comportan los elementos, como los enlaces. El uso del manejo de eventos de JavaScript proporciona una gran cantidad de opciones para personalizar las interacciones del usuario. El uso de detectores de eventos para capturar y controlar los clics en enlaces crea una experiencia más interactiva. Al capturar eventos de clic, podemos anular el comportamiento normal y abrir las URL en una ventana emergente controlada. Esto garantiza una transición fluida sin alterar la pestaña o ventana actual del usuario.

La personalización de enlaces en SPFx WebParts también requiere la inserción dinámica de código JavaScript. SharePoint Framework (SPFx) proporciona métodos como @anular y prestar() por lograr esto. Al insertar JavaScript personalizado, los desarrolladores pueden cambiar el comportamiento de los elementos de los resultados de búsqueda sin tener que realizar modificaciones significativas en el propio WebPart. Esta flexibilidad facilita la realización de ajustes globales en todos los enlaces de resultados de búsqueda, lo que garantiza que el comportamiento deseado (como abrir en una ventana emergente) sea uniforme en toda la plataforma.

Finalmente, el rendimiento y la experiencia del usuario son factores críticos en cualquier sistema basado en web, y lo mismo ocurre aquí. Al optimizar el uso de JavaScript y limitar las actividades que consumen muchos recursos, podemos asegurar que estas personalizaciones no tengan una influencia significativa en los tiempos de carga de la página ni en la capacidad de respuesta. El uso eficiente de JavaScript, combinado con modificaciones de SPFx de backend, proporciona un alto nivel de flexibilidad sin sacrificar el rendimiento, lo que da como resultado una experiencia de usuario perfecta en toda la plataforma SharePoint.