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.

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 target="_blank" 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 window.open() 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 event.preventDefault(), 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 openInPopup()), 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. @override. 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 spyOn() egy Jasmine tesztelési keretrendszerben érvényesíti, hogy a window.open() 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 @override és render() 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.