Kako otvoriti veze u skočnom prozoru u PnP Modern Search WebPart (SFx)

Poboljšanje korisničkog iskustva s prilagođenim skočnim vezama u SPFx-u

U modernom razvoju sustava SharePoint korištenje PnP modernog web-dijela za pretraživanje (SPFx) za pružanje konfigurabilnih rezultata pretraživanja može značajno poboljšati korisničko iskustvo. Kontroliranje otvaranja veza popularna je značajka među programerima, posebno s izgledom "Detaljni popis". Obično se veze otvaraju u novoj kartici, ali što ako ih želimo otvoriti u skočnom prozoru?

U ovom ćemo postu pogledati kako implementirati ovu funkcionalnost promjenom ponašanja veze PnP modernog web-dijela za pretraživanje. Umjesto otvaranja rezultata pretraživanja u novoj kartici, pokazat ćemo kako prisilno otvoriti vezu u prilagođenom skočnom prozoru, što rezultira integriranijim korisničkim iskustvom.

Izazov nastaje kada koristite formulu poput ``, koja prema zadanim postavkama postavlja novu karticu. Međutim, korištenjem JavaScripta možemo nadjačati ovo ponašanje i otvoriti vezu u kontroliranom skočnom prozoru. To omogućuje veću fleksibilnost u prikazivanju sadržaja unutar iste sesije pregledavanja.

Provest ćemo vas kroz korake potrebne za razvoj ove značajke, s fokusom na korištenje JavaScripta i SPFx-a za poboljšanje izgleda detaljnog popisa. Ostanite s nama dok prolazimo kroz rješenje kako bismo osigurali da vaša SharePoint stranica bude besprijekorna i laka za korištenje.

Razumijevanje rješenja za skočni prozor u SPFx-u

Gore navedene skripte prilagođavaju zadano ponašanje veza unutar PnP modernog web-dijela za pretraživanje (SPFx). Veze prema zadanim postavkama koriste target="_prazno" oznaku za otvaranje u novoj kartici. Međutim, ovdje je svrha otvoriti ove veze u skočnom prozoru, čime se povećava interakcija korisnika. Da bismo to postigli, upotrijebili smo window.open() koja programerima omogućuje otvaranje URL-ova u novom prozoru preglednika ili skočnom prozoru. Ova se funkcija može prilagoditi određenim parametrima, kao što su širina, visina i drugi atributi (kao što su trake za pomicanje ili mogućnost promjene veličine), kako bi se osiguralo da skočni prozor radi kako je predviđeno.

Nadjačavanje zadanog ponašanja klikova oznaka sidra vitalna je komponenta pristupa. Ovo se radi sa event.preventDefault(), što sprječava otvaranje veze u novoj kartici. Umjesto toga, vezu prilažemo slušatelja događaja koji aktivira prilagođenu funkciju (u ovom slučaju, openInPopup()) koji upravlja događajem klika i otvara URL u skočnom prozoru. To programerima omogućuje veću kontrolu nad ponašanjem veze i rezultira dosljednijim korisničkim iskustvom unutar PnP modernog web-dijela za pretraživanje.

Osim rada s front-end ponašanjem, također smo ispitali backend pristup koristeći SPFx-ove ugrađene dekoratore kao što su @nadjačati. Ovaj pristup omogućuje programerima da izravno umetnu JavaScript u prilagođene WebParts, dodatno modificirajući ponašanje rezultata pretraživanja. Nadjačavanje procesa renderiranja u SPFx-u omogućuje nam ubacivanje JavaScript koda koji obrađuje klikove na veze i otvara potreban materijal u skočnom prozoru. Ova tehnika čini rješenje modularnijim i višekratnim u više područja okruženja SharePoint, čime se poboljšava održavanje.

Jedinično testiranje ključno je za osiguravanje ispravnog rada značajke skočnih prozora u više okruženja i preglednika. Korištenje špijun() u okviru Jasmine testiranja potvrđuje da window.open() metoda se izvodi s pravim argumentima. Ovaj oblik testiranja identificira potencijalne probleme rano u procesu razvoja i jamči da skočni prozori funkcioniraju prema planu. Ovo rješenje jača korisničku interakciju u SharePointovom PnP modernom web-dijelu za pretraživanje integracijom front-end rukovanja događajima, pozadinske prilagodbe i jediničnog testiranja.

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

Istraživanje rukovanja događajima i dinamičkog JavaScript ubacivanja u SPFx

Kada radite s PnP Modern Search WebPart (SPFx), jedna korisna značajka za programere je mogućnost dinamičke prilagodbe ponašanja elemenata, kao što su veze. Korištenje JavaScript rukovanja događajima pruža mnoštvo opcija za personalizaciju korisničkih interakcija. Korištenje slušatelja događaja za hvatanje i kontrolu klikova na veze stvara interaktivnije iskustvo. Hvatanjem klikova možemo nadjačati normalno ponašanje i otvoriti URL-ove u kontroliranom skočnom prozoru. Ovo osigurava gladak prijelaz bez ometanja korisnikove trenutne kartice ili prozora.

Prilagodba veza u SPFx WebParts također zahtijeva dinamičko umetanje JavaScript koda. SharePoint Framework (SPFx) pruža metode poput @nadjačati i render() za postizanje ovoga. Umetanjem prilagođenog JavaScripta, programeri mogu promijeniti ponašanje stavki rezultata pretraživanja bez potrebe za značajnim izmjenama samog WebParta. Ova fleksibilnost olakšava globalne prilagodbe svih poveznica rezultata pretraživanja, osiguravajući da je željeno ponašanje - poput otvaranja u skočnom prozoru - jednolično na cijeloj platformi.

Naposljetku, izvedba i korisničko iskustvo kritični su čimbenici u svakom sustavu temeljenom na webu, a isto vrijedi i ovdje. Optimiziranjem upotrebe JavaScripta i ograničavanjem aktivnosti koje zahtijevaju velike resurse, možemo osigurati da ove prilagodbe nemaju značajan utjecaj na vrijeme učitavanja stranice ili odziv. Učinkovita upotreba JavaScripta, u kombinaciji s pozadinskim SPFx izmjenama, pruža visoku razinu fleksibilnosti bez žrtvovanja performansi, što rezultira besprijekornim korisničkim iskustvom na cijeloj SharePoint platformi.