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.

Ukaz	Primer uporabe
window.open()	Ta ukaz odpre novo okno ali zavihek brskalnika. Ta metoda odpre pojavno okno z določenimi dimenzijami in lastnostmi, kot so širina, višina in drsni trakovi.
event.preventDefault()	Prepreči privzeto vedenje kliknjene povezave, to je odpiranje URL-ja v istem ali novem zavihku. To nam omogoča prilagoditev delovanja povezave, na primer odpiranje pojavnega okna.
querySelectorAll()	Atribut data-popup izbere vse sidrne elemente (). Ta metoda vrne NodeList, ki nam omogoča, da poslušalce dogodkov uporabimo za več komponent hkrati.
forEach()	Vsak vnos v NodeList, ki ga ustvari querySelectorAll(), prejme dejanje (na primer pripenjanje poslušalca dogodkov). To velja za upravljanje številnih elementov dinamične povezave v PnP Modern Search.
addEventListener()	Ta tehnika vsaki povezavi doda poslušalca dogodka klika, ki sproži funkcijo openInPopup(). Potreben je za preglasitev privzetega delovanja klika.
import { override }	Ta dekorator je del ogrodja SharePoint Framework (SPFx) in se uporablja za preglasitev privzetega vedenja spletnih delov SPFx. Omogoča posebne prilagoditve, kot je vstavljanje JavaScripta za zagotavljanje funkcionalnosti pojavnih oken.
@override	V SPFx dekorater označuje, da metoda ali lastnost preglasi funkcionalnost. To je potrebno pri spreminjanju vedenja komponent SharePoint.
spyOn()	Spremlja funkcijske klice med testiranjem enote z Jasmine. V tem scenariju se uporablja z window.open(), da se zagotovi, da se pojavno okno med testiranjem ustrezno zažene.
expect()	Ta ukaz se uporablja za testiranje enot v Jasmine. Preveri, ali je bil window.open() poklican s pravilnimi argumenti, kar zagotavlja, da se pojavi pojavno okno z želenimi nastavitvami.

Razumevanje rešitve pojavnih oken v SPFx

Zgoraj navedeni skripti prilagodijo privzeto vedenje povezav v PnP Modern Search WebPart (SPFx). Povezave privzeto uporabljajo 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 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 , 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 ), 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 . 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 v okviru testiranja Jasmine potrdi, da je 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 in 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.

1. Kako odprem povezavo v pojavnem oknu z JavaScriptom?
2. Lahko uporabite funkcijo v JavaScriptu. Ta funkcija vam omogoča, da odprete novo okno brskalnika ali pojavno okno s posebnimi lastnostmi, kot so velikost in drsni trakovi.
3. Kaj počne narediti?
4. The metoda prepreči, da bi dogodek izvedel privzeto dejanje. V tem primeru prepreči odpiranje povezave v novem zavihku, hkrati pa dovoli določena dejanja, kot je prikaz pojavnega okna.
5. Kako uporabim vedenje po meri za številne povezave v SPFx?
6. Uporaba v JavaScriptu lahko izberete več komponent in jim pripnete poslušalce dogodkov, s čimer zagotovite, da se vsi obnašajo enako.
7. Kako preglasim privzeto upodabljanje SPFx WebParts?
8. Če želite prilagoditi vedenje SPFx WebParts, uporabite dekorater. To vam omogoča, da JavaScript po meri vstavite neposredno v postopek upodabljanja spletnega dela.
9. Katera je najboljša tehnika za ugotavljanje, ali se pojavno okno pravilno odpre?
10. Uporaba testov enote v ogrodju, kot je Jasmine, lahko uporabite spremljati, če funkcija je ustrezno poklicana s pričakovanimi parametri.

Način odpiranja povezav v pojavnem oknu je mogoče prilagoditi z uporabo JavaScripta znotraj PnP Modern Search WebPart (SPFx). Ta sprememba izboljšuje interakcijo uporabnikov tako, da jih ohranja vključene na trenutnem zavihku, hkrati pa omogoča dostop do podrobne vsebine v nadzorovanem pojavnem oknu.

Če želite ohraniti dosledno vedenje, uporabite tehnike, kot je in dinamično vstavite JavaScript v SPFx WebParts. Poleg tega testiranje enot pomaga zagotoviti, da te spremembe dobro delujejo v številnih kontekstih, kar ima za posledico zanesljivo in uporabniku prijazno rešitev za prilagajanje rezultatov iskanja SharePoint.