Ako otvárať odkazy vo vyskakovacom okne v PnP Modern Search WebPart (SFx)

Zlepšenie používateľskej skúsenosti pomocou vlastných kontextových odkazov v SPFx

V modernom vývoji SharePointu môže používanie PnP Modern Search WebPart (SPFx) na poskytovanie konfigurovateľných výsledkov vyhľadávania výrazne zlepšiť používateľskú skúsenosť. Ovládanie otvárania odkazov je obľúbenou funkciou medzi vývojármi, najmä s rozložením „Podrobný zoznam“. Normálne sa odkazy otvárajú na novej karte, ale čo ak ich chceme otvoriť v kontextovom okne?

V tomto príspevku sa pozrieme na to, ako implementovať túto funkciu zmenou správania odkazu webovej časti PnP Modern Search WebPart. Namiesto otvárania výsledkov vyhľadávania na novej karte si ukážeme, ako vynútiť otvorenie odkazu v prispôsobenom kontextovom okne, čo vedie k integrovanejšej používateľskej skúsenosti.

Problém nastáva, keď použijete vzorec ako ``, ktorý je predvolene nastavený na novú kartu. Pomocou JavaScriptu však môžeme toto správanie prepísať a odkaz otvoriť v kontrolovanom vyskakovacom okne. To umožňuje väčšiu flexibilitu pri zobrazovaní obsahu v rámci rovnakej relácie prehliadania.

Prevedieme vás krokmi potrebnými na vývoj tejto funkcie so zameraním na používanie JavaScriptu a SPFx na zlepšenie rozloženia podrobného zoznamu. Zostaňte naladení, keď prechádzame riešením, aby ste sa uistili, že vaša lokalita SharePoint bude bezproblémová a užívateľsky prívetivá.

Pochopenie riešenia kontextového okna v SPFx

Skripty uvedené vyššie upravujú predvolené správanie odkazov v rámci PnP Modern Search WebPart (SPFx). Odkazy štandardne používajú target="_blank" na otvorenie na novej karte. Účelom je však otvárať tieto odkazy vo vyskakovacom okne, čím sa zvyšuje interakcia používateľa. Aby sme to dosiahli, použili sme window.open() funkcia, ktorá umožňuje vývojárom otvárať adresy URL v novom okne prehliadača alebo kontextovom okne. Túto funkciu je možné upraviť pomocou špecifických parametrov, ako je šírka, výška a ďalšie atribúty (ako posuvníky alebo možnosť zmeny veľkosti), aby sa zabezpečilo, že vyskakovacie okno bude fungovať podľa plánu.

Prepísanie predvoleného kliknutia kotvových značiek je dôležitou súčasťou prístupu. Toto sa robí s event.preventDefault(), čo bráni otvoreniu odkazu na novej karte. Namiesto toho k odkazu pripojíme prijímač udalostí, ktorý aktivuje vlastnú funkciu (v tomto prípade openInPopup()), ktorý spracuje udalosť kliknutia a otvorí adresu URL vo vyskakovacom okne. To umožňuje vývojárom väčšiu kontrolu nad správaním odkazu a výsledkom je konzistentnejšia používateľská skúsenosť v rámci PnP Modern Search WebPart.

Okrem riešenia front-endového správania sme tiež skúmali backendový prístup pomocou vstavaných dekorátorov SPFx, ako sú @override. Tento prístup umožňuje vývojárom priamo vkladať JavaScript do vlastných WebParts, čím ďalej upravuje správanie výsledkov vyhľadávania. Prepísanie procesu vykresľovania v SPFx nám umožňuje vložiť kód JavaScript, ktorý spracováva kliknutia na odkazy a otvára potrebný materiál vo vyskakovacom okne. Vďaka tejto technike je riešenie modulárnejšie a opakovane použiteľné vo viacerých oblastiach prostredia SharePoint, čím sa zlepšuje údržba.

Testovanie jednotiek je rozhodujúce na zabezpečenie správneho fungovania kontextových okien vo viacerých prostrediach a prehliadačoch. Používanie spyOn() v rámci testovania Jasmine potvrdzuje, že window.open() metóda sa vykonáva so správnymi argumentmi. Táto forma testovania identifikuje potenciálne problémy na začiatku procesu vývoja a zaručuje, že vyskakovacie okná fungujú podľa plánu. Toto riešenie posilňuje interakciu používateľov vo webovej časti PnP Modern Search WebPart SharePoint integráciou front-end spracovania udalostí, prispôsobenia backendu a testovania jednotiek.

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

Skúmanie spracovania udalostí a dynamického vkladania JavaScriptu v SPFx

Pri práci s PnP Modern Search WebPart (SPFx) je jednou z užitočných funkcií pre vývojárov možnosť dynamicky upravovať správanie prvkov, ako sú odkazy. Použitie spracovania udalostí JavaScriptu poskytuje množstvo možností na prispôsobenie interakcií používateľov. Používanie poslucháčov udalostí na zachytenie a ovládanie kliknutí na odkazy vytvára interaktívnejší zážitok. Zachytením udalostí kliknutia môžeme prepísať normálne správanie a otvárať adresy URL v kontrolovanom kontextovom okne. To zaisťuje plynulý prechod bez narušenia aktuálnej karty alebo okna používateľa.

Prispôsobenie odkazov v SPFx WebParts tiež vyžaduje dynamické vkladanie kódu JavaScript. SharePoint Framework (SPFx) poskytuje metódy ako @override a render() za splnenie tohto. Vložením vlastného JavaScriptu môžu vývojári zmeniť správanie položiek výsledkov vyhľadávania bez toho, aby museli výrazne upravovať samotnú webovú časť. Táto flexibilita uľahčuje vykonávanie globálnych úprav všetkých odkazov výsledkov vyhľadávania, čím sa zaisťuje, že požadované správanie – ako napríklad otváranie vo vyskakovacom okne – je jednotné na celej platforme.

Napokon, výkon a používateľská skúsenosť sú kritickými faktormi v akomkoľvek webovom systéme a to isté platí aj tu. Optimalizáciou používania JavaScriptu a obmedzením aktivít náročných na zdroje môžeme zaručiť, že tieto prispôsobenia nebudú mať významný vplyv na časy načítania stránky alebo odozvu. Efektívne používanie JavaScriptu v kombinácii s úpravami backendu SPFx poskytuje vysokú úroveň flexibility bez obetovania výkonu, výsledkom čoho je bezproblémová používateľská skúsenosť na celej platforme SharePoint.