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ý.

Příkaz	Příklad použití
window.open()	Tento příkaz otevře nové okno nebo kartu prohlížeče. Tato metoda otevře vyskakovací okno s určitými rozměry a vlastnostmi, jako je šířka, výška a posuvníky.
event.preventDefault()	Zabrání výchozímu chování odkazu, na který kliknete, což znamená otevření adresy URL na stejné nebo nové kartě. To nám umožňuje přizpůsobit, jak odkaz funguje, například místo toho otevřít vyskakovací okno.
querySelectorAll()	Atribut data-popup vybere všechny kotevní prvky (). Tato metoda vrací NodeList, což nám umožňuje aplikovat posluchače událostí na několik komponent současně.
forEach()	Každá položka v seznamu NodeList vytvořená pomocí querySelectorAll() obdrží akci (například připojení posluchače událostí). To platí pro správu mnoha prvků dynamických odkazů v PnP Modern Search.
addEventListener()	Tato technika přidá posluchač události kliknutí ke každému odkazu, který spouští funkci openInPopup(). Je to nezbytné pro přepsání výchozího chování kliknutí.
import { override }	Tento dekorátor je součástí SharePoint Framework (SPFx) a používá se k přepsání výchozího chování SPFx WebParts. Umožňuje specifická přizpůsobení, jako je vkládání JavaScriptu pro poskytování funkcí vyskakovacích oken.
@override	V SPFx dekorátor označuje, že metoda nebo vlastnost má přednost před funkčností. To je nezbytné při úpravě chování součástí SharePointu.
spyOn()	Monitoruje volání funkcí během testování jednotky pomocí Jasmine. V tomto scénáři se používá s window.open() k zaručení správného spuštění vyskakovacího okna během testování.
expect()	Tento příkaz se používá pro testování jednotek v Jasmine. Kontroluje, že window.open() byla volána se správnými argumenty, což zaručuje, že se vyskakovací okno objeví s požadovaným nastavením.

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í 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 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 , 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ě ), 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 . 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í v testovacím rámci Jasmine ověřuje, že 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 a 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.

1. Jak otevřu odkaz ve vyskakovacím okně pomocí JavaScriptu?
2. Můžete použít funkce v JavaScriptu. Tato funkce umožňuje otevřít nové okno prohlížeče nebo vyskakovací okno se specifickými vlastnostmi, jako je velikost a posuvníky.
3. Co dělá dělat?
4. The metoda zabraňuje události provést svou výchozí akci. V tomto případě zabrání otevření odkazu na nové kartě a zároveň umožní konkrétní akce, jako je zobrazení vyskakovacího okna.
5. Jak mohu použít vlastní chování na četné odkazy v SPFx?
6. Použití v JavaScriptu můžete vybrat více komponent a připojit k nim posluchače událostí, což zaručuje, že se všechny budou chovat stejně.
7. Jak přepíšu výchozí vykreslování SPFx WebParts?
8. Chcete-li upravit chování SPFx WebParts, použijte dekoratér. To vám umožní vložit vlastní JavaScript přímo do procesu vykreslování webové části.
9. Jaká je nejlepší technika k určení, zda se vyskakovací okno otevře správně?
10. Pomocí jednotkových testů v rámci, jako je Jasmine, můžete použít sledovat, zda funkce je volána vhodně s předpokládanými parametry.

Způsob, jakým se odkazy otevírají ve vyskakovacím okně, lze upravit pomocí JavaScriptu v rámci PnP Modern Search WebPart (SPFx). Tato změna zlepšuje interakci uživatelů tím, že je udržuje na aktuální kartě a zároveň poskytuje přístup k podrobnému obsahu v řízeném vyskakovacím okně.

Chcete-li zachovat konzistentní chování, použijte techniky jako a dynamicky vkládat JavaScript do SPFx WebParts. Testování jednotek navíc pomáhá zajistit, aby tyto změny dobře fungovaly v mnoha kontextech, což má za následek spolehlivé a uživatelsky přívětivé řešení pro přizpůsobení výsledků vyhledávání na SharePointu.