Come aprire i collegamenti in una finestra popup nella WebPart di ricerca moderna PnP (SFx)

Miglioramento dell'esperienza utente con collegamenti popup personalizzati in SPFx

Nello sviluppo moderno di SharePoint, l'uso della WebPart di ricerca moderna PnP (SPFx) per fornire risultati di ricerca configurabili può migliorare significativamente l'esperienza dell'utente. Il controllo della modalità di apertura dei collegamenti è una funzionalità popolare tra gli sviluppatori, in particolare con il layout "Elenco dettagliato". Normalmente i collegamenti si aprono in una nuova scheda, ma cosa succede se vogliamo aprirli in una finestra popup?

In questo post esamineremo come implementare questa funzionalità modificando il comportamento del collegamento della webpart Ricerca moderna PnP. Invece di aprire i risultati della ricerca in una nuova scheda, mostreremo come forzare l'apertura del collegamento in una finestra popup personalizzata, ottenendo un'esperienza utente più integrata.

La sfida sorge quando utilizzi una formula come ``, che per impostazione predefinita indica una nuova scheda. Tuttavia, utilizzando JavaScript, possiamo ignorare questo comportamento e aprire il collegamento in una finestra popup controllata. Ciò consente una maggiore flessibilità nella visualizzazione dei contenuti all'interno della stessa sessione di navigazione.

Ti guideremo attraverso i passaggi necessari per sviluppare questa funzionalità, concentrandoci sull'utilizzo di JavaScript e SPFx per migliorare il layout dell'elenco dettagliato. Resta sintonizzato mentre esaminiamo la soluzione per garantire che il tuo sito SharePoint sia fluido e facile da usare.

Comprendere la soluzione della finestra popup in SPFx

Gli script elencati sopra modificano il comportamento predefinito dei collegamenti all'interno di una WebPart di ricerca moderna PnP (SPFx). Per impostazione predefinita, i collegamenti utilizzano l'estensione destinazione="_vuoto" tag per aprire in una nuova scheda. Tuttavia, lo scopo qui è aprire questi collegamenti in una finestra popup, aumentando così l'interazione dell'utente. Per raggiungere questo obiettivo, abbiamo utilizzato il file finestra.aperta() funzione, che consente agli sviluppatori di aprire gli URL in una nuova finestra o popup del browser. Questa funzione può essere regolata con parametri specifici, come larghezza, altezza e altri attributi (come barre di scorrimento o ridimensionabilità), per garantire che il popup funzioni come previsto.

Sostituire il comportamento di clic predefinito dei tag di ancoraggio è una componente vitale dell'approccio. Questo è fatto evento.preventDefault(), che impedisce l'apertura del collegamento in una nuova scheda. Alleghiamo invece al collegamento un ascoltatore di eventi, che attiva una funzione personalizzata (in questo caso, openInPopup()) che gestisce l'evento clic e apre l'URL in una finestra popup. Ciò consente agli sviluppatori un maggiore controllo sul comportamento del collegamento e garantisce un'esperienza utente più coerente all'interno della webpart Ricerca moderna PnP.

Oltre a occuparci del comportamento front-end, abbiamo anche esaminato un approccio backend utilizzando i decoratori integrati di SPFx come @override. Questo approccio consente agli sviluppatori di inserire direttamente JavaScript in WebPart personalizzate, modificando ulteriormente il comportamento dei risultati di ricerca. Sovrascrivere il processo di rendering in SPFx ci consente di iniettare codice JavaScript che gestisce i clic sui collegamenti e apre il materiale necessario in una finestra popup. Questa tecnica rende la soluzione più modulare e riutilizzabile in più aree di un ambiente SharePoint, migliorando quindi la manutenzione.

Il test unitario è fondamentale per garantire che la funzionalità popup funzioni correttamente su più ambienti e browser. Utilizzando spia() in un framework di test Jasmine convalida che il finestra.aperta() il metodo viene eseguito con gli argomenti giusti. Questa forma di test identifica potenziali problemi nelle prime fasi del processo di sviluppo e garantisce che le finestre popup funzionino come previsto. Questa soluzione rafforza le interazioni degli utenti nella WebPart di ricerca moderna PnP di SharePoint integrando la gestione degli eventi front-end, la personalizzazione del back-end e i test unitari.

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

Esplorazione della gestione degli eventi e dell'inserimento dinamico di JavaScript in SPFx

Quando si lavora con PnP Modern Search WebPart (SPFx), una funzionalità utile per gli sviluppatori è la possibilità di regolare dinamicamente il comportamento degli elementi, ad esempio i collegamenti. L'utilizzo della gestione degli eventi JavaScript fornisce numerose opzioni per personalizzare le interazioni dell'utente. L'utilizzo dei listener di eventi per acquisire e controllare i clic sui collegamenti crea un'esperienza più interattiva. Acquisendo gli eventi di clic, potremmo ignorare il comportamento normale e aprire gli URL in una finestra popup controllata. Ciò garantisce una transizione fluida senza disturbare la scheda o la finestra corrente dell'utente.

La personalizzazione dei collegamenti in SPFx WebParts richiede anche l'inserimento dinamico del codice JavaScript. SharePoint Framework (SPFx) fornisce metodi come @override E rendere() per realizzare questo. Inserendo JavaScript personalizzato, gli sviluppatori possono modificare il comportamento degli elementi dei risultati di ricerca senza dover apportare modifiche significative alla WebPart stessa. Questa flessibilità semplifica l'esecuzione di modifiche globali a tutti i collegamenti dei risultati di ricerca, garantendo che il comportamento desiderato, come l'apertura in una finestra popup, sia uniforme su tutta la piattaforma.

Infine, le prestazioni e l’esperienza dell’utente sono fattori critici in qualsiasi sistema basato sul web, e lo stesso vale in questo caso. Ottimizzando l'uso di JavaScript e limitando le attività ad uso intensivo di risorse, possiamo garantire che queste personalizzazioni non abbiano un'influenza significativa sui tempi di caricamento o sulla reattività della pagina. L'uso efficiente di JavaScript, combinato con le modifiche SPFx del backend, offre un elevato livello di flessibilità senza sacrificare le prestazioni, garantendo un'esperienza utente fluida in tutta la piattaforma SharePoint.