Sådan åbnes links i et popup-vindue i PnP Modern Search WebPart (SFx)

Forbedring af brugeroplevelsen med brugerdefinerede popup-links i SPFx

I moderne SharePoint-udvikling kan brug af PnP Modern Search WebPart (SPFx) til at levere konfigurerbare søgeresultater forbedre brugeroplevelsen markant. At kontrollere, hvordan links åbner, er en populær funktion blandt udviklere, især med layoutet "Detaljeret liste". Normalt åbner links i en ny fane, men hvad nu hvis vi vil åbne dem i et popup-vindue?

I dette indlæg vil vi se på, hvordan man implementerer denne funktionalitet ved at ændre linkadfærden for PnP Modern Search WebPart. I stedet for at åbne søgeresultaterne i en ny fane, viser vi, hvordan man tvinger linket til at åbne i et tilpasset pop op-vindue, hvilket resulterer i en mere integreret brugeroplevelse.

Udfordringen opstår, når du bruger en formel som ``, som som standard har en ny fane. Men ved at bruge JavaScript kan vi tilsidesætte denne adfærd og åbne linket i et kontrolleret popup-vindue. Dette giver mulighed for mere fleksibilitet i visning af indhold inden for den samme browsersession.

Vi vil lede dig gennem de nødvendige trin for at udvikle denne funktion med fokus på at bruge JavaScript og SPFx til at forbedre layoutet med detaljeret liste. Følg med, mens vi gennemgår løsningen for at sikre, at dit SharePoint-websted er problemfrit og brugervenligt.

Forstå popup-vindueløsningen i SPFx

De ovennævnte scripts justerer standardadfærden for links i en PnP Modern Search WebPart (SPFx). Som standard bruger links target="_blank" tag for at åbne i en ny fane. Men formålet her er at åbne disse links i et popup-vindue og derved øge brugerinteraktionen. For at opnå dette brugte vi window.open() funktion, som lader udviklere åbne URL'er i et nyt browservindue eller popup. Denne funktion kan justeres med specifikke parametre, såsom bredde, højde og andre attributter (såsom rullebjælker eller størrelsesændring), for at sikre, at pop op-vinduet fungerer efter hensigten.

Tilsidesættelse af standardklikadfærden for ankertags er en vital komponent i tilgangen. Dette gøres med event.preventDefault(), som forhindrer linket i at åbne i en ny fane. I stedet knytter vi en begivenhedslytter til linket, som aktiverer en brugerdefineret funktion (i dette tilfælde, openInPopup()), der håndterer klikhændelsen og åbner URL'en i et pop op-vindue. Dette giver udviklere mere kontrol over linkets adfærd og resulterer i en mere ensartet brugeroplevelse i PnP Modern Search WebPart.

Udover at håndtere frontend-adfærden undersøgte vi også en backend-tilgang ved hjælp af SPFx's indbyggede dekoratorer som f.eks. @override. Denne tilgang gør det muligt for udviklere at indsætte JavaScript direkte i brugerdefinerede WebParts, hvilket yderligere ændrer søgeresultaternes adfærd. Tilsidesættelse af gengivelsesprocessen i SPFx giver os mulighed for at injicere JavaScript-kode, der håndterer linkklik og åbner det nødvendige materiale i et popup-vindue. Denne teknik gør løsningen mere modulær og genbrugelig på tværs af flere områder af et SharePoint-miljø, hvilket forbedrer vedligeholdelsen.

Enhedstest er afgørende for at sikre, at popup-funktionen fungerer korrekt på tværs af flere miljøer og browsere. Bruger spyOn() i en Jasmine-testramme validerer, at window.open() metoden udføres med de rigtige argumenter. Denne form for test identificerer potentielle problemer tidligt i udviklingsprocessen og garanterer, at popup-vinduerne fungerer som planlagt. Denne løsning styrker brugerinteraktioner i SharePoints PnP Modern Search WebPart ved at integrere frontend-hændelseshåndtering, backend-tilpasning og enhedstest.

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

Udforskning af hændelseshåndtering og dynamisk JavaScript-injektion i SPFx

Når du arbejder med PnP Modern Search WebPart (SPFx), er en nyttig funktion for udviklere muligheden for dynamisk at justere, hvordan elementer, såsom links, opfører sig. Brugen af ​​JavaScript-hændelseshåndtering giver et væld af muligheder for at tilpasse brugerinteraktioner. Brug af begivenhedslyttere til at fange og kontrollere linkklik skaber en mere interaktiv oplevelse. Ved at fange klikhændelser kan vi tilsidesætte den normale adfærd og åbne URL'er i et kontrolleret pop op-vindue. Dette sikrer en jævn overgang uden at forstyrre brugerens aktuelle fane eller vindue.

Tilpasning af links i SPFx WebParts kræver også dynamisk indsættelse af JavaScript-kode. SharePoint Framework (SPFx) giver metoder som f.eks @override og render() for at opnå dette. Ved at indsætte tilpasset JavaScript kan udviklere ændre adfærden af ​​søgeresultatelementer uden at skulle foretage væsentlige ændringer af selve WebPart. Denne fleksibilitet gør det nemt at foretage globale justeringer af alle søgeresultatlinks, hvilket sikrer, at den ønskede adfærd – såsom åbning i et pop op-vindue – er ensartet på tværs af platformen.

Endelig er ydeevne og brugeroplevelse kritiske faktorer i ethvert webbaseret system, og det samme gælder her. Ved at optimere brugen af ​​JavaScript og begrænse ressourcekrævende aktiviteter kan vi sikre, at disse tilpasninger ikke har nogen væsentlig indflydelse på sideindlæsningstider eller reaktionsevne. Effektiv JavaScript-brug kombineret med backend SPFx-modifikationer giver et højt niveau af fleksibilitet uden at ofre ydeevne, hvilket resulterer i en problemfri brugeroplevelse på hele SharePoint-platformen.