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.
| Naredba | Primjer upotrebe |
|---|---|
| window.open() | Ova naredba će otvoriti novi prozor preglednika ili karticu. Ova metoda otvara skočni prozor s određenim dimenzijama i svojstvima, kao što su širina, visina i trake za pomicanje. |
| event.preventDefault() | Sprječava zadano ponašanje kliknute veze, a to je otvaranje URL-a u istoj ili novoj kartici. To nam omogućuje da prilagodimo način na koji veza djeluje, kao što je otvaranje skočnog prozora. |
| querySelectorAll() | Atribut data-popup odabire sve elemente sidra (). Ova metoda vraća NodeList, koji nam omogućuje primjenu slušatelja događaja na nekoliko komponenti istovremeno. |
| forEach() | Svaki unos u NodeList koji proizvodi querySelectorAll() prima akciju (na primjer, prilaganje slušatelja događaja). Ovo se odnosi na upravljanje mnogim elementima dinamičke veze u PnP Modern Search. |
| addEventListener() | Ova tehnika dodaje slušatelja događaja klika svakoj vezi koja pokreće funkciju openInPopup(). Neophodno je za nadjačavanje zadanog ponašanja klika. |
| import { override } | Ovaj dekorater dio je SharePoint Framework (SPFx) i koristi se za nadjačavanje zadanog ponašanja SPFx WebParts. Omogućuje specifične prilagodbe, kao što je umetanje JavaScripta za pružanje funkcionalnosti skočnih prozora. |
| @override | U SPFxu dekorater označava da metoda ili svojstvo nadjačava funkcionalnost. Ovo je neophodno kada mijenjate ponašanje komponenti sustava SharePoint. |
| spyOn() | Prati pozive funkcija tijekom testiranja jedinice s Jasmine. U ovom scenariju koristi se s window.open() kako bi se jamčilo da se skočni prozor ispravno pokreće tijekom testiranja. |
| expect() | Ova se naredba koristi za testiranje jedinica u Jasmineu. Provjerava je li window.open() pozvan s ispravnim argumentima, jamčeći da se skočni prozor pojavljuje sa željenim postavkama. |
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 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 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 , š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, ) 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 . 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 u okviru Jasmine testiranja potvrđuje da 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.
1. rješenje: korištenje JavaScripta `window.open` za stvaranje skočnog prozora
Ovaj pristup koristi JavaScript za zamjenu zadanog ponašanja otvaranja veze u novoj kartici sa skočnim prozorom, što je idealno za dinamička front-end rješenja izgrađena sa SPFx-om u kontekstu SharePointa.
<script>function openInPopup(url) {// Define popup window featuresconst features = 'width=800,height=600,resizable=yes,scrollbars=yes';// Open URL in popupwindow.open(url, '_blank', features);}// Override link behaviordocument.querySelectorAll('a[data-popup="true"]').forEach(function (link) {link.addEventListener('click', function (event) {event.preventDefault(); // Prevent default link behavioropenInPopup(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>
Rješenje 2: Dodavanje ugrađenog JavaScripta izravno u oznaku veze
Ova metoda ugrađuje JavaScript ugrađen unutar HTML oznake veze, što je čini idealnom za lagani dinamički front-end sustav koji ima nekoliko vanjskih ovisnosti.
<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.
Rješenje 3: Pozadinski pristup koji koristi SPFx s JavaScript injekcijom
Ovaj pristup koristi SharePoint Framework (SPFx) za ubacivanje JavaScripta u prilagođeni WebPart, dopuštajući otvaranje veza u skočnom prozoru pomoću JavaScript metoda.
import { override } from '@microsoft/decorators';import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';export default class PopupWebPart extends BaseClientSideWebPart {@overridepublic 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');}
Jedinični test za ponašanje JavaScript skočnih prozora
Jedinični testovi mogu jamčiti da je funkcionalnost skočnih prozora dosljedna u svim preglednicima i okruženjima. Evo osnovnog Jasmine testa za front-end provjeru valjanosti.
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 i 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.
- Kako mogu otvoriti vezu u skočnom prozoru s JavaScriptom?
- Možete koristiti funkcija u JavaScriptu. Ova vam funkcija omogućuje otvaranje novog prozora preglednika ili skočnog prozora s određenim svojstvima kao što su veličina i trake za pomicanje.
- Što znači učiniti?
- The metoda sprječava događaj da izvrši zadanu radnju. U tom slučaju sprječava otvaranje veze u novoj kartici, a dopušta određene radnje, poput prikazivanja skočnog prozora.
- Kako mogu primijeniti prilagođeno ponašanje na brojne veze u SPFx-u?
- Korištenje u JavaScriptu možete odabrati više komponenti i priložiti im slušatelje događaja, jamčeći da svi slijede isto ponašanje.
- Kako mogu nadjačati zadano prikazivanje SPFx WebParts?
- Da biste prilagodili ponašanje SPFx WebParts, koristite dekorater. To vam omogućuje da umetnete prilagođeni JavaScript izravno u proces iscrtavanja WebParta.
- Koja je najbolja tehnika za određivanje otvara li se skočni prozor ispravno?
- Korištenje jediničnih testova u okviru kao što je Jasmine, možete koristiti pratiti je li funkcija se poziva na odgovarajući način s predviđenim parametrima.
Način na koji se poveznice otvaraju u skočnom prozoru može se prilagoditi korištenjem JavaScripta unutar PnP Modern Search WebPart (SPFx). Ova promjena poboljšava korisničku interakciju držeći ih angažiranima na trenutnoj kartici, dok istovremeno omogućuje pristup detaljnom sadržaju u kontroliranom skočnom prozoru.
Za održavanje dosljednog ponašanja koristite tehnike poput i dinamički umetnuti JavaScript u SPFx WebParts. Nadalje, jedinično testiranje pomaže osigurati da ove promjene dobro funkcioniraju u mnogim kontekstima, što rezultira pouzdanim rješenjem prilagođenim korisniku za prilagodbu rezultata pretraživanja SharePointa.
- Informacije o PnP modernom web-dijelu za pretraživanje (SPFx) i prilagodbi ponašanja veze dobivene su iz službene dokumentacije. Za više detalja posjetite PnP moderno pretraživanje GitHub repozitorija .
- Smjernice za korištenje JavaScript metoda kao što su i slušatelja događaja referencirao je iz MDN web dokumenti za JavaScript.
- Pojedinosti o prilagodbama SharePoint Framework (SPFx), uključujući JavaScript injekciju i , možete pronaći u Pregled SharePoint Frameworka .