Com obrir enllaços en una finestra emergent a PnP Modern Search WebPart (SFx)

Millora de l'experiència de l'usuari amb enllaços emergents personalitzats a SPFx

En el desenvolupament modern de SharePoint, l'ús de PnP Modern Search WebPart (SPFx) per proporcionar resultats de cerca configurables pot millorar significativament l'experiència de l'usuari. Controlar com s'obren els enllaços és una característica popular entre els desenvolupadors, especialment amb el disseny "Llista detallada". Normalment, els enllaços s'obren en una pestanya nova, però què passa si els volem obrir en una finestra emergent?

En aquesta publicació, veurem com implementar aquesta funcionalitat canviant el comportament de l'enllaç de la part web de cerca moderna PnP. En lloc d'obrir els resultats de la cerca en una pestanya nova, mostrarem com forçar l'enllaç a obrir-se en una finestra emergent personalitzada, donant lloc a una experiència d'usuari més integrada.

El repte sorgeix quan utilitzeu una fórmula com ``, que per defecte és una pestanya nova. Tanmateix, utilitzant JavaScript, podem anul·lar aquest comportament i obrir l'enllaç en una finestra emergent controlada. Això permet més flexibilitat a l'hora de mostrar contingut dins de la mateixa sessió de navegació.

Us explicarem els passos necessaris per desenvolupar aquesta funció, centrant-vos en l'ús de JavaScript i SPFx per millorar el disseny de la llista detallada. Estigueu atents mentre passem per la solució per garantir que el vostre lloc de SharePoint sigui perfecte i fàcil d'utilitzar.

Entendre la solució de la finestra emergent a SPFx

Els scripts enumerats anteriorment ajusten el comportament predeterminat dels enllaços dins d'una part web de cerca moderna PnP (SPFx). De manera predeterminada, els enllaços utilitzen target="_blank" etiqueta per obrir-lo en una pestanya nova. Tanmateix, el propòsit aquí és obrir aquests enllaços en una finestra emergent, augmentant així la interacció de l'usuari. Per aconseguir-ho, hem utilitzat el window.open() funció, que permet als desenvolupadors obrir URL en una finestra o finestra emergent del navegador. Aquesta funció es pot ajustar amb paràmetres específics, com ara l'amplada, l'alçada i altres atributs (com ara barres de desplaçament o redimensionament), per assegurar-se que la finestra emergent funciona com es pretén.

La substitució del comportament de clic predeterminat de les etiquetes d'ancoratge és un component vital de l'enfocament. Això es fa amb event.preventDefault(), que impedeix que l'enllaç s'obri en una pestanya nova. En lloc d'això, adjuntem un oient d'esdeveniments a l'enllaç, que activa una funció personalitzada (en aquest cas, openInPopup()) que gestiona l'esdeveniment de clic i obre l'URL en una finestra emergent. Això permet als desenvolupadors més control sobre el comportament de l'enllaç i es tradueix en una experiència d'usuari més coherent a la part web de cerca moderna PnP.

A més de tractar amb el comportament del front-end, també vam examinar un enfocament del backend utilitzant els decoradors integrats de SPFx com ara @override. Aquest enfocament permet als desenvolupadors inserir directament JavaScript a les WebParts personalitzades, modificant encara més el comportament dels resultats de la cerca. La substitució del procés de representació a SPFx ens permet injectar codi JavaScript que gestiona els clics d'enllaç i obre el material necessari en una finestra emergent. Aquesta tècnica fa que la solució sigui més modular i reutilitzable en diverses àrees d'un entorn de SharePoint, per tant, millora el manteniment.

Les proves unitàries són fonamentals per garantir que la funció emergent funcioni correctament en diversos entorns i navegadors. Utilitzant spyOn() en un marc de proves de Jasmine valida que el window.open() El mètode s'executa amb els arguments adequats. Aquesta forma de prova identifica problemes potencials al principi del procés de desenvolupament i garanteix que les finestres emergents funcionin com estava previst. Aquesta solució reforça les interaccions dels usuaris a la part web de cerca moderna PnP de SharePoint integrant la gestió d'esdeveniments de front-end, la personalització de backend i les proves d'unitat.

<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));
   });
});

Explorant la gestió d'esdeveniments i la injecció dinàmica de JavaScript a SPFx

Quan es treballa amb PnP Modern Search WebPart (SPFx), una característica útil per als desenvolupadors és la capacitat d'ajustar dinàmicament com es comporten els elements, com ara els enllaços. L'ús de la gestió d'esdeveniments de JavaScript ofereix una gran quantitat d'opcions per personalitzar les interaccions dels usuaris. L'ús d'oients d'esdeveniments per capturar i controlar els clics d'enllaços crea una experiència més interactiva. En capturar esdeveniments de clic, podem anul·lar el comportament normal i obrir URL en una finestra emergent controlada. Això garanteix una transició suau sense pertorbar la pestanya o finestra actual de l'usuari.

La personalització dels enllaços a SPFx WebParts també requereix la inserció dinàmica de codi JavaScript. El SharePoint Framework (SPFx) proporciona mètodes com @override i render () per aconseguir això. En inserir JavaScript personalitzat, els desenvolupadors poden canviar el comportament dels elements de resultats de la cerca sense haver de fer modificacions significatives a la WebPart. Aquesta flexibilitat facilita la realització d'ajustos globals a tots els enllaços de resultats de la cerca, assegurant que el comportament desitjat, com ara obrir-se en una finestra emergent, sigui uniforme a tota la plataforma.

Finalment, el rendiment i l'experiència de l'usuari són factors crítics en qualsevol sistema basat en web, i el mateix passa aquí. En optimitzar l'ús de JavaScript i limitar les activitats que consumeixen molts recursos, podem assegurar-nos que aquestes personalitzacions no tenen cap influència significativa en els temps de càrrega de la pàgina o la capacitat de resposta. L'ús eficient de JavaScript, combinat amb les modificacions SPFx de fons, proporciona un alt nivell de flexibilitat sense sacrificar el rendiment, donant lloc a una experiència d'usuari perfecta a tota la plataforma SharePoint.