Hivatkozások megnyitása felugró ablakban a PnP Modern Search WebPartban (SFx)

A felhasználói élmény fokozása az SPFx egyéni előugró hivatkozásaival

A modern SharePoint fejlesztésben a PnP Modern Search WebPart (SPFx) használata konfigurálható keresési eredmények biztosítására jelentősen javíthatja a felhasználói élményt. A linkek megnyitásának szabályozása népszerű funkció a fejlesztők körében, különösen a "Részletes lista" elrendezés esetén. Általában a hivatkozások új lapon nyílnak meg, de mi van akkor, ha egy felugró ablakban szeretnénk megnyitni?

Ebben a bejegyzésben megvizsgáljuk, hogyan lehet megvalósítani ezt a funkciót a PnP Modern Search WebPart hivatkozási viselkedésének megváltoztatásával. Ahelyett, hogy új lapon nyitnánk meg a keresési eredményeket, megmutatjuk, hogyan kényszeríthetjük ki a linket egy testreszabott felugró ablakban, ami integráltabb felhasználói élményt eredményez.

A kihívás akkor merül fel, ha olyan képletet használ, mint a ``, amely alapértelmezés szerint új lapra vált. A JavaScript használatával azonban felülírhatjuk ezt a viselkedést, és megnyithatjuk a hivatkozást egy ellenőrzött felugró ablakban. Ez nagyobb rugalmasságot tesz lehetővé a tartalom ugyanazon böngészési munkameneten belüli megjelenítésében.

Végigvezetjük a funkció fejlesztéséhez szükséges lépéseken, különös tekintettel a JavaScript és az SPFx használatára a Részletes lista elrendezésének javítására. Maradjon velünk, miközben végigjárjuk a megoldást, hogy SharePoint-webhelye zökkenőmentes és felhasználóbarát legyen.

Parancs	Használati példa
window.open()	Ez a parancs egy új böngészőablakot vagy lapot nyit meg. Ez a módszer egy felugró ablakot nyit meg bizonyos méretekkel és tulajdonságokkal, például szélességgel, magassággal és görgetősávokkal.
event.preventDefault()	Megakadályozza a kattintott hivatkozások alapértelmezett viselkedését, azaz az URL megnyitását ugyanazon vagy új lapon. Ez lehetővé teszi számunkra, hogy személyre szabjuk a link működését, például nyisson meg helyette egy felugró ablakot.
querySelectorAll()	A data-popup attribútum kijelöli az összes horgonyelemet (). Ez a metódus egy NodeList-et ad vissza, amely lehetővé teszi, hogy eseményfigyelőket alkalmazzunk több komponensre egyidejűleg.
forEach()	A querySelectorAll() által előállított NodeList minden bejegyzése műveletet kap (például eseményfigyelő csatolása). Ez a PnP Modern Search számos dinamikus hivatkozási elemének kezelésére vonatkozik.
addEventListener()	Ez a technika minden hivatkozáshoz hozzáad egy kattintási eseményfigyelőt, amely elindítja az openInPopup() függvényt. Az alapértelmezett kattintási viselkedés felülbírálásához szükséges.
import { override }	Ez a dekorátor a SharePoint-keretrendszer (SPFx) része, és az SPFx WebParts alapértelmezett viselkedésének felülbírálására szolgál. Lehetővé teszi bizonyos testreszabások elvégzését, például JavaScript beillesztését a popup funkció biztosításához.
@override	Az SPFx-ben a dekorátor azt jelzi, hogy egy módszer vagy tulajdonság felülírja a funkcionalitást. Erre a SharePoint-összetevők viselkedésének módosításakor van szükség.
spyOn()	Figyeli a funkcióhívásokat a Jasmine készülék tesztelése során. Ebben a forgatókönyvben a window.open() függvényben használatos annak biztosítására, hogy a felugró ablak megfelelően elinduljon a tesztelés során.
expect()	Ez a parancs a Jasmine egység tesztelésére szolgál. Ellenőrzi, hogy a window.open() a megfelelő argumentumokkal lett-e meghívva, garantálva, hogy az előugró ablak a kívánt beállításokkal jelenik meg.

Az SPFx felugró ablak megoldásának megértése

A fent felsorolt ​​szkriptek beállítják a hivatkozások alapértelmezett viselkedését a PnP Modern Search WebParton (SPFx) belül. Alapértelmezés szerint a hivatkozások a címkét, hogy új lapon nyissa meg. A cél azonban az, hogy ezeket a hivatkozásokat egy felugró ablakban nyissa meg, ezáltal növelve a felhasználói interakciót. Ennek megvalósításához a funkció, amellyel a fejlesztők új böngészőablakban vagy felugró ablakban nyithatnak meg URL-eket. Ez a funkció meghatározott paraméterekkel állítható be, mint például a szélesség, magasság és egyéb attribútumok (például görgetősávok vagy átméretezhetőség), így biztosítva, hogy az előugró ablak a kívánt módon működjön.

A horgonycímkék alapértelmezett kattintási viselkedésének felülbírálása a megközelítés létfontosságú összetevője. Ez azzal történik , amely megakadályozza, hogy a hivatkozás új lapon nyíljon meg. Ehelyett egy eseményfigyelőt csatolunk a hivatkozáshoz, amely aktivál egy egyéni funkciót (ebben az esetben ), amely kezeli a kattintási eseményt, és megnyitja az URL-t egy felugró ablakban. Ez lehetővé teszi a fejlesztők számára, hogy jobban kontrollálják a link viselkedését, és következetesebb felhasználói élményt biztosítanak a PnP Modern Search WebParton belül.

Amellett, hogy a front-end viselkedésével foglalkoztunk, megvizsgáltunk egy backend megközelítést is az SPFx beépített dekorátoraival, mint pl. . Ezzel a megközelítéssel a fejlesztők közvetlenül beilleszthetik a JavaScriptet az egyéni webrészekbe, tovább módosítva a keresési eredmények viselkedését. A renderelési folyamat felülbírálása az SPFx-ben lehetővé teszi számunkra, hogy olyan JavaScript kódot szúrjunk be, amely kezeli a hivatkozáskattintásokat, és egy felugró ablakban megnyitja a szükséges anyagot. Ez a technika modulárisabbá és újrafelhasználhatóbbá teszi a megoldást a SharePoint-környezet több területén, ezáltal javítva a karbantartást.

Az egységtesztelés kritikus fontosságú annak biztosításához, hogy a felugró ablak megfelelően működjön több környezetben és böngészőben. Használata egy Jasmine tesztelési keretrendszerben érvényesíti, hogy a metódus a megfelelő argumentumokkal kerül végrehajtásra. Ez a tesztelési forma a fejlesztési folyamat korai szakaszában azonosítja a lehetséges problémákat, és garantálja, hogy a felugró ablakok a tervek szerint működjenek. Ez a megoldás megerősíti a felhasználói interakciókat a SharePoint PnP Modern Search WebPartjában azáltal, hogy integrálja a front-end eseménykezelést, a backend testreszabását és az egységtesztet.

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

Az eseménykezelés és a dinamikus JavaScript-injekció felfedezése az SPFx-ben

A PnP Modern Search WebPart (SPFx) használata során a fejlesztők számára hasznos funkció az elemek, például a hivatkozások viselkedésének dinamikus módosítása. A JavaScript eseménykezelés használata rengeteg lehetőséget kínál a felhasználói interakciók személyre szabására. Az eseményfigyelők használata a linkkattintások rögzítésére és szabályozására interaktívabb élményt biztosít. A kattintási események rögzítésével felülbírálhatjuk a normál viselkedést, és megnyithatjuk az URL-eket egy ellenőrzött felugró ablakban. Ez biztosítja a zökkenőmentes átmenetet a felhasználó aktuális lapjának vagy ablakának megzavarása nélkül.

Az SPFx WebParts hivatkozásainak testreszabásához JavaScript-kód dinamikus beillesztése is szükséges. A SharePoint-keretrendszer (SPFx) olyan módszereket biztosít, mint és ennek megvalósításáért. Egyéni JavaScript beillesztésével a fejlesztők anélkül módosíthatják a keresési eredményelemek viselkedését, hogy jelentős módosításokat kellene végrehajtaniuk magán a WebParton. Ez a rugalmasság megkönnyíti az összes keresési eredmény hivatkozásának globális módosítását, biztosítva, hogy a kívánt viselkedés – például a felugró ablakban való megnyitás – egységes legyen az egész platformon.

Végül, a teljesítmény és a felhasználói élmény kritikus tényező minden webalapú rendszerben, és ez itt is igaz. A JavaScript használatának optimalizálásával és az erőforrás-igényes tevékenységek korlátozásával biztosíthatjuk, hogy ezek a testreszabások nincsenek jelentős hatással az oldalak betöltési idejére vagy válaszkészségére. A hatékony JavaScript-használat a háttér SPFx-módosításaival kombinálva nagyfokú rugalmasságot biztosít a teljesítmény feláldozása nélkül, ami zökkenőmentes felhasználói élményt eredményez az egész SharePoint platformon.

1. Hogyan nyithatok meg hivatkozást egy felugró ablakban JavaScript segítségével?
2. Használhatja a függvény JavaScriptben. Ez a funkció lehetővé teszi, hogy új böngészőablakot vagy előugró ablakot nyisson meg bizonyos tulajdonságokkal, például mérettel és görgetősávokkal.
3. Mit tesz csinálni?
4. A metódus megakadályozza, hogy egy esemény végrehajtsa az alapértelmezett műveletet. Ebben az esetben megakadályozza, hogy a hivatkozás új lapon nyíljon meg, miközben bizonyos műveleteket tesz lehetővé, például előugró ablak megjelenítését.
5. Hogyan alkalmazhatok egyéni viselkedést számos hivatkozásra az SPFx-ben?
6. Használata JavaScriptben több összetevőt is kiválaszthat, és eseményfigyelőket csatolhat hozzájuk, garantálva, hogy mindegyik ugyanazt a viselkedést kövesse.
7. Hogyan bírálhatom felül az SPFx WebParts alapértelmezett megjelenítését?
8. Az SPFx WebParts viselkedésének beállításához használja a lakberendező. Ez lehetővé teszi az egyéni JavaScript beillesztését közvetlenül a WebPart megjelenítési folyamatába.
9. Mi a legjobb technika annak meghatározására, hogy egy felugró ablak megfelelően nyílik-e meg?
10. Egységtesztek használatával olyan keretrendszerben, mint a Jasmine, használhatja figyelni, ha a függvényt megfelelően hívják meg a várt paraméterekkel.

A hivatkozások felugró ablakban való megnyitásának módja testreszabható a JavaScript használatával a PnP Modern Search WebPart (SPFx) segítségével. Ez a változtatás javítja a felhasználói interakciót azáltal, hogy leköti őket az aktuális lapon, miközben hozzáférést biztosít a részletes tartalomhoz egy ellenőrzött előugró ablakban.

A következetes viselkedés fenntartásához használjon olyan technikákat, mint pl és dinamikusan beillesztheti a JavaScriptet az SPFx WebPartsba. Ezenkívül az egységteszt segít abban, hogy ezek a változtatások számos környezetben jól működjenek, és megbízható, felhasználóbarát megoldást eredményezve a SharePoint keresési eredményeinek testreszabásához.