Jak otevřít odkazy ve vyskakovacím okně v PnP Modern Search WebPart (SFx)

Vylepšení uživatelské zkušenosti pomocí vlastních vyskakovacích odkazů v SPFx

V moderním vývoji SharePointu může použití PnP Modern Search WebPart (SPFx) k poskytování konfigurovatelných výsledků vyhledávání výrazně zlepšit uživatelskou zkušenost. Ovládání otevírání odkazů je mezi vývojáři oblíbenou funkcí, zejména s rozložením „Podrobný seznam“. Normálně se odkazy otevírají na nové kartě, ale co když je chceme otevřít ve vyskakovacím okně?

V tomto příspěvku se podíváme na to, jak implementovat tuto funkci změnou chování odkazu webové části PnP Modern Search. Namísto otevírání výsledků vyhledávání na nové kartě si ukážeme, jak vynutit otevření odkazu v přizpůsobeném vyskakovacím okně, což povede k integrovanějšímu uživatelskému dojmu.

Problém nastává, když použijete vzorec jako ``, který jako výchozí použije novou kartu. Pomocí JavaScriptu však můžeme toto chování přepsat a otevřít odkaz v řízeném vyskakovacím okně. To umožňuje větší flexibilitu při zobrazování obsahu v rámci stejné relace prohlížení.

Provedeme vás kroky potřebnými k vývoji této funkce se zaměřením na použití JavaScriptu a SPFx ke zlepšení rozvržení podrobného seznamu. Zůstaňte naladěni, když procházíme řešením, abychom zajistili, že váš web SharePoint bude bezproblémový a uživatelsky přívětivý.

Porozumění řešení vyskakovacích oken v SPFx

Výše uvedené skripty upravují výchozí chování odkazů v rámci webové části PnP Modern Search WebPart (SPFx). Ve výchozím nastavení odkazy používají target="_blank" tag otevřít na nové kartě. Účelem zde však je otevřít tyto odkazy ve vyskakovacím okně, čímž se zvýší interakce uživatele. Abychom toho dosáhli, použili jsme window.open() funkce, která umožňuje vývojářům otevírat adresy URL v novém okně prohlížeče nebo vyskakovacím okně. Tuto funkci lze upravit pomocí specifických parametrů, jako je šířka, výška a další atributy (jako jsou posuvníky nebo možnost změny velikosti), aby se zajistilo, že vyskakovací okno bude fungovat tak, jak má.

Přepsání výchozího chování při kliknutí kotevních značek je zásadní součástí tohoto přístupu. Toto je hotovo s event.preventDefault(), která brání otevření odkazu na nové kartě. Místo toho k odkazu připojíme posluchač události, který aktivuje vlastní funkci (v tomto případě openInPopup()), který zpracovává událost kliknutí a otevře adresu URL ve vyskakovacím okně. To umožňuje vývojářům větší kontrolu nad chováním odkazu a výsledkem je konzistentnější uživatelská zkušenost v rámci PnP Modern Search WebPart.

Kromě řešení front-endového chování jsme také zkoumali backendový přístup využívající vestavěné dekorátory SPFx, jako je @override. Tento přístup umožňuje vývojářům přímo vkládat JavaScript do vlastních WebParts a dále upravovat chování výsledků vyhledávání. Přepsání procesu vykreslování v SPFx nám umožňuje vložit kód JavaScript, který zpracovává kliknutí na odkazy a otevírá potřebný materiál ve vyskakovacím okně. Díky této technice je řešení modulárnější a opakovaně použitelné ve více oblastech prostředí SharePoint, čímž se zlepšuje údržba.

Testování jednotek je zásadní pro zajištění správného fungování vyskakovacích oken ve více prostředích a prohlížečích. Použití spyOn() v testovacím rámci Jasmine ověřuje, že window.open() metoda se provádí se správnými argumenty. Tato forma testování identifikuje potenciální problémy v rané fázi vývojového procesu a zaručuje, že vyskakovací okna fungují podle plánu. Toto řešení posiluje interakce uživatelů ve webové části PnP Modern Search WebPart SharePoint tím, že integruje front-endové zpracování událostí, přizpůsobení backendu a testování jednotek.

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

Zkoumání Event Handling a Dynamic JavaScript Injection v SPFx

Při práci s PnP Modern Search WebPart (SPFx) je jednou z užitečných funkcí pro vývojáře možnost dynamicky upravovat chování prvků, jako jsou odkazy. Použití zpracování událostí JavaScriptu poskytuje nepřeberné množství možností pro přizpůsobení uživatelských interakcí. Použití posluchačů událostí k zachycení a ovládání kliknutí na odkazy vytváří interaktivnější zážitek. Zachycením událostí kliknutí můžeme přepsat normální chování a otevřít adresy URL v řízeném vyskakovacím okně. To zajišťuje hladký přechod bez narušení aktuální karty nebo okna uživatele.

Přizpůsobení odkazů v SPFx WebParts také vyžaduje dynamické vkládání kódu JavaScript. SharePoint Framework (SPFx) poskytuje metody jako @override a render() za splnění tohoto. Vložením vlastního JavaScriptu mohou vývojáři změnit chování položek výsledků vyhledávání, aniž by museli provádět významné úpravy samotné WebPart. Tato flexibilita usnadňuje provádění globálních úprav všech odkazů ve výsledcích vyhledávání a zajišťuje, že požadované chování – jako je otevírání ve vyskakovacím okně – je jednotné na celé platformě.

A konečně, výkon a uživatelská zkušenost jsou kritickými faktory v jakémkoli webovém systému a to samé platí i zde. Optimalizací používání JavaScriptu a omezením činností náročných na zdroje můžeme zajistit, že tato přizpůsobení nebudou mít žádný významný vliv na dobu načítání stránek nebo odezvu. Efektivní používání JavaScriptu v kombinaci s úpravami backendu SPFx poskytuje vysokou úroveň flexibility bez obětování výkonu, což má za následek bezproblémové uživatelské prostředí na platformě SharePoint.