Kako odpreti povezave v pojavnem oknu v PnP Modern Search WebPart (SFx)

Izboljšanje uporabniške izkušnje s pojavnimi povezavami po meri v SPFx

V sodobnem razvoju SharePointa lahko uporaba PnP Modern Search WebPart (SPFx) za zagotavljanje nastavljivih rezultatov iskanja bistveno izboljša uporabniško izkušnjo. Nadziranje odpiranja povezav je priljubljena funkcija med razvijalci, zlasti s postavitvijo »Podroben seznam«. Običajno se povezave odprejo v novem zavihku, kaj pa, če jih želimo odpreti v pojavnem oknu?

V tej objavi si bomo ogledali, kako implementirati to funkcionalnost s spreminjanjem vedenja povezave spletnega dela PnP Modern Search. Namesto odpiranja rezultatov iskanja v novem zavihku, bomo pokazali, kako prisilno odpreti povezavo v prilagojenem pojavnem oknu, kar ima za posledico bolj integrirano uporabniško izkušnjo.

Izziv nastane, ko uporabite formulo, kot je ``, ki privzeto nastavi nov zavihek. Vendar pa lahko z uporabo JavaScripta preglasimo to vedenje in odpremo povezavo v nadzorovanem pojavnem oknu. To omogoča večjo prilagodljivost pri prikazovanju vsebine znotraj iste seje brskanja.

Vodili vas bomo skozi korake, potrebne za razvoj te funkcije, s poudarkom na uporabi JavaScripta in SPFx za izboljšanje postavitve podrobnega seznama. Ostanite z nami, ko se bomo predstavili skozi rešitev, da zagotovimo, da bo vaše mesto SharePoint brezhibno in uporabniku prijazno.

Razumevanje rešitve pojavnih oken v SPFx

Zgoraj navedeni skripti prilagodijo privzeto vedenje povezav v PnP Modern Search WebPart (SPFx). Povezave privzeto uporabljajo target="_prazno" oznako za odpiranje v novem zavihku. Vendar je namen tukaj odpreti te povezave v pojavnem oknu in s tem povečati interakcijo uporabnika. Da bi to dosegli, smo uporabili window.open() funkcijo, ki razvijalcem omogoča odpiranje URL-jev v novem oknu ali pojavnem oknu brskalnika. To funkcijo je mogoče prilagoditi s posebnimi parametri, kot so širina, višina in drugi atributi (kot so drsni trakovi ali možnost spreminjanja velikosti), da zagotovite, da pojavno okno deluje, kot je predvideno.

Preglasitev privzetega vedenja klikov sidrnih oznak je pomembna sestavina pristopa. To se naredi z event.preventDefault(), ki prepreči odpiranje povezave v novem zavihku. Namesto tega na povezavo priložimo poslušalca dogodkov, ki aktivira funkcijo po meri (v tem primeru openInPopup()), ki obravnava dogodek klika in odpre URL v pojavnem oknu. To omogoča razvijalcem več nadzora nad vedenjem povezave in ima za posledico bolj dosledno uporabniško izkušnjo v spletnem delu PnP Modern Search.

Poleg obravnave sprednjega dela smo preučili tudi zaledni pristop z uporabo vgrajenih okrasiteljev SPFx, kot je @preglasi. Ta pristop omogoča razvijalcem, da neposredno vstavijo JavaScript v prilagojene WebParts in tako dodatno spremenijo obnašanje rezultatov iskanja. Preglasitev postopka upodabljanja v SPFx nam omogoča, da vstavimo kodo JavaScript, ki obravnava klike povezav in odpre potrebno gradivo v pojavnem oknu. Ta tehnika naredi rešitev bolj modularno in jo je mogoče ponovno uporabiti na več področjih okolja SharePoint, s čimer se izboljša vzdrževanje.

Testiranje enote je ključnega pomena za zagotovitev, da pojavna funkcija pravilno deluje v več okoljih in brskalnikih. Uporaba vohun() v okviru testiranja Jasmine potrdi, da je window.open() se izvede s pravimi argumenti. Ta oblika testiranja identificira morebitne težave zgodaj v razvojnem procesu in zagotavlja, da pojavna okna delujejo po načrtih. Ta rešitev krepi interakcije uporabnikov v SharePointovem PnP Modern Search WebPart z integracijo front-end obravnavanja dogodkov, prilagajanja backend-a in testiranja enot.

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

Raziskovanje obravnavanja dogodkov in dinamičnega vbrizgavanja JavaScripta v SPFx

Pri delu s PnP Modern Search WebPart (SPFx) je ena koristna funkcija za razvijalce zmožnost dinamičnega prilagajanja obnašanja elementov, kot so povezave. Uporaba obdelave dogodkov JavaScript ponuja obilico možnosti za prilagajanje uporabniških interakcij. Uporaba poslušalcev dogodkov za zajemanje in nadzor klikov povezav ustvarja bolj interaktivno izkušnjo. Z zajemanjem dogodkov klikov lahko preglasimo običajno vedenje in odpremo URL-je v nadzorovanem pojavnem oknu. To zagotavlja nemoten prehod, ne da bi motil trenutni zavihek ali okno uporabnika.

Prilagajanje povezav v SPFx WebParts prav tako zahteva dinamično vstavljanje kode JavaScript. SharePoint Framework (SPFx) ponuja metode, kot so @preglasi in render() za dosego tega. Z vstavitvijo JavaScripta po meri lahko razvijalci spremenijo vedenje elementov rezultatov iskanja, ne da bi morali narediti znatne spremembe v samem spletnem delu. Ta prilagodljivost omogoča enostavno globalno prilagajanje vseh povezav rezultatov iskanja, kar zagotavlja, da je želeno vedenje – kot je odpiranje v pojavnem oknu – enotno po vsej platformi.

Končno sta zmogljivost in uporabniška izkušnja kritična dejavnika v katerem koli spletnem sistemu in enako velja tudi tukaj. Z optimizacijo uporabe JavaScripta in omejevanjem dejavnosti, ki zahtevajo veliko virov, lahko zagotovimo, da te prilagoditve nimajo pomembnega vpliva na čas nalaganja strani ali odzivnost. Učinkovita uporaba JavaScripta v kombinaciji z zalednimi spremembami SPFx zagotavlja visoko stopnjo prilagodljivosti brez žrtvovanja zmogljivosti, kar ima za posledico brezhibno uporabniško izkušnjo na celotni platformi SharePoint.