Cum să deschideți linkuri într-o fereastră pop-up în PnP Modern Search WebPart (SFx)

Îmbunătățirea experienței utilizatorului cu linkuri pop-up personalizate în SPFx

În dezvoltarea SharePoint modernă, utilizarea PnP Modern Search WebPart (SPFx) pentru a oferi rezultate de căutare configurabile poate îmbunătăți semnificativ experiența utilizatorului. Controlul modului în care se deschid linkurile este o caracteristică populară în rândul dezvoltatorilor, în special cu aspectul „Lista detaliată”. În mod normal, linkurile se deschid într-o filă nouă, dar dacă vrem să le deschidem într-o fereastră pop-up?

În această postare, ne vom uita la modul de implementare a acestei funcționalități prin schimbarea comportamentului link-ului al PnP Modern Search WebPart. În loc să deschidem rezultatele căutării într-o filă nouă, vom arăta cum să forțați deschiderea linkului într-o fereastră pop-up personalizată, rezultând o experiență de utilizator mai integrată.

Provocarea apare atunci când utilizați o formulă precum ``, care este implicit la o filă nouă. Cu toate acestea, folosind JavaScript, putem suprascrie acest comportament și deschide linkul într-o fereastră pop-up controlată. Acest lucru permite mai multă flexibilitate în afișarea conținutului în cadrul aceleiași sesiuni de navigare.

Vă vom ghida prin pașii necesari pentru a dezvolta această funcție, cu accent pe utilizarea JavaScript și SPFx pentru a îmbunătăți aspectul Listei detaliate. Rămâneți la curent în timp ce parcurgem soluția pentru a vă asigura că site-ul dvs. SharePoint este perfect și ușor de utilizat.

Înțelegerea soluției ferestrei pop-up în SPFx

Scripturile enumerate mai sus ajustează comportamentul implicit al legăturilor dintr-o parte Web PnP Modern Search (SPFx). În mod implicit, linkurile folosesc target="_blank" etichetă pentru a se deschide într-o filă nouă. Totuși, scopul aici este de a deschide aceste legături într-o fereastră pop-up, crescând astfel interacțiunea utilizatorului. Pentru a realiza acest lucru, am folosit window.open() funcție, care le permite dezvoltatorilor să deschidă adrese URL într-o nouă fereastră sau pop-up de browser. Această funcție poate fi ajustată cu parametri specifici, cum ar fi lățimea, înălțimea și alte atribute (cum ar fi barele de defilare sau redimensionarea), pentru a se asigura că pop-up-ul funcționează conform intenției.

Ignorarea comportamentului de clic implicit al etichetelor de ancorare este o componentă vitală a abordării. Acest lucru se face cu event.preventDefault(), care împiedică deschiderea linkului într-o filă nouă. În schimb, atașăm un ascultător de evenimente la link, care activează o funcție personalizată (în acest caz, openInPopup()) care gestionează evenimentul clic și deschide adresa URL într-o fereastră pop-up. Acest lucru permite dezvoltatorilor mai mult control asupra comportamentului link-ului și are ca rezultat o experiență de utilizator mai consistentă în cadrul PnP Modern Search WebPart.

Pe lângă faptul că ne ocupăm de comportamentul front-end, am examinat și o abordare backend folosind decoratorii încorporați SPFx, cum ar fi @override. Această abordare permite dezvoltatorilor să insereze direct JavaScript în WebParts personalizate, modificând în continuare comportamentul rezultatelor căutării. Suprascrierea procesului de randare în SPFx ne permite să injectăm cod JavaScript care gestionează clicurile pe link și deschide materialul necesar într-o fereastră pop-up. Această tehnică face soluția mai modulară și mai reutilizabilă în mai multe zone ale unui mediu SharePoint, îmbunătățind astfel întreținerea.

Testarea unitară este esențială pentru a ne asigura că funcția pop-up funcționează corect în mai multe medii și browsere. Folosind spyOn() într-un cadru de testare Jasmine validează faptul că window.open() metoda este executată cu argumentele potrivite. Această formă de testare identifică probleme potențiale la începutul procesului de dezvoltare și garantează că ferestrele pop-up funcționează conform planului. Această soluție întărește interacțiunile utilizatorilor în PnP Modern Search WebPart de la SharePoint, integrând gestionarea evenimentelor front-end, personalizarea backend și testarea unitară.

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

Explorând gestionarea evenimentelor și injecția dinamică JavaScript în SPFx

Când lucrați cu PnP Modern Search WebPart (SPFx), o caracteristică utilă pentru dezvoltatori este capacitatea de a ajusta dinamic modul în care se comportă elementele, cum ar fi linkurile. Utilizarea gestionării evenimentelor JavaScript oferă o multitudine de opțiuni pentru personalizarea interacțiunilor utilizatorului. Utilizarea ascultătorilor de evenimente pentru a captura și controla clicurile pe linkuri creează o experiență mai interactivă. Prin capturarea evenimentelor de clic, este posibil să depășim comportamentul normal și să deschidem adrese URL într-o fereastră pop-up controlată. Acest lucru asigură o tranziție lină fără a perturba fila sau fereastra curentă a utilizatorului.

Personalizarea linkurilor în SPFx WebParts necesită, de asemenea, inserarea dinamică a codului JavaScript. SharePoint Framework (SPFx) oferă metode precum @override şi face() pentru realizarea acestui lucru. Prin inserarea JavaScript personalizat, dezvoltatorii pot schimba comportamentul elementelor rezultate ale căutării fără a fi nevoie să facă modificări semnificative la WebPart în sine. Această flexibilitate facilitează efectuarea de ajustări globale la toate link-urile rezultatelor căutării, asigurându-se că comportamentul dorit, cum ar fi deschiderea într-o fereastră pop-up, este uniform pe toată platforma.

În cele din urmă, performanța și experiența utilizatorului sunt factori critici în orice sistem bazat pe web și același lucru este valabil și aici. Prin optimizarea utilizării JavaScript și prin limitarea activităților consumatoare de resurse, ne putem asigura că aceste personalizări nu au nicio influență semnificativă asupra timpilor de încărcare a paginii sau a capacității de răspuns. Utilizarea eficientă a JavaScript, combinată cu modificările SPFx de backend, oferă un nivel ridicat de flexibilitate fără a sacrifica performanța, rezultând o experiență de utilizator fără probleme în întreaga platformă SharePoint.