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.

Kommando	Eksempel på brug
window.open()	Denne kommando åbner et nyt browservindue eller fane. Denne metode åbner et pop op-vindue med bestemte dimensioner og egenskaber, såsom bredde, højde og rullepaneler.
event.preventDefault()	Forhindrer standardadfærden for et klikket link, som er at åbne URL'en i samme eller ny fane. Dette giver os mulighed for at tilpasse, hvordan linket fungerer, såsom at åbne en popup i stedet for.
querySelectorAll()	Data-popup-attributten vælger alle ankerelementer (). Denne metode returnerer en NodeList, som giver os mulighed for at anvende begivenhedslyttere på flere komponenter samtidigt.
forEach()	Hver post i NodeList produceret af querySelectorAll() modtager en handling (f.eks. vedhæftning af en begivenhedslytter). Dette gælder for håndtering af mange dynamiske linkelementer i PnP Modern Search.
addEventListener()	Denne teknik tilføjer en klikhændelseslytter til hvert link, der udløser funktionen openInPopup(). Det er nødvendigt for at tilsidesætte standardklikadfærden.
import { override }	Denne dekorator er en del af SharePoint Framework (SPFx) og bruges til at tilsidesætte SPFx WebParts' standardadfærd. Det muliggør specifikke tilpasninger, såsom indsprøjtning af JavaScript for at give popup-funktionalitet.
@override	I SPFx angiver en dekoratør, at en metode eller egenskab tilsidesætter funktionalitet. Dette er nødvendigt, når du ændrer adfærden for SharePoint-komponenter.
spyOn()	Overvåger funktionsopkald under enhedstest med Jasmine. I dette scenarie bruges det sammen med window.open() for at garantere, at popup-vinduet startes korrekt under test.
expect()	Denne kommando bruges til enhedstest i Jasmine. Den kontrollerer, at window.open() blev kaldt med de korrekte argumenter, hvilket garanterer, at pop op-vinduet vises med de ønskede indstillinger.

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 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 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 , 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, ), 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. . 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 i en Jasmine-testramme validerer, at 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 og 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.

1. Hvordan åbner jeg et link i et popup-vindue med JavaScript?
2. Du kan bruge funktion i JavaScript. Denne funktion giver dig mulighed for at åbne et nyt browservindue eller popup med specifikke egenskaber såsom størrelse og rullepaneler.
3. Hvad gør gøre?
4. De metode forhindrer en hændelse i at udføre sin standardhandling. I dette tilfælde forhindrer det linket i at åbne i en ny fane, mens det tillader specifikke handlinger, såsom at vise en pop op.
5. Hvordan anvender jeg tilpasset adfærd på adskillige links i SPFx?
6. Bruger i JavaScript kan du vælge flere komponenter og knytte begivenhedslyttere til dem, hvilket garanterer, at de alle følger den samme adfærd.
7. Hvordan tilsidesætter jeg standardgengivelsen af ​​SPFx WebParts?
8. For at justere adfærden for SPFx WebParts skal du bruge dekoratør. Dette giver dig mulighed for at injicere tilpasset JavaScript direkte i WebPart's gengivelsesproces.
9. Hvad er den bedste teknik til at afgøre, om et popup-vindue åbner korrekt?
10. Brug enhedstests i en ramme som Jasmine, du kan bruge at overvåge, om funktion kaldes passende med de forventede parametre.

Den måde, links åbner i et popup-vindue, kan tilpasses ved hjælp af JavaScript i PnP Modern Search WebPart (SPFx). Denne ændring forbedrer brugerinteraktionen ved at holde dem engageret på den aktuelle fane, mens den giver adgang til detaljeret indhold i en kontrolleret popup.

For at opretholde ensartet adfærd skal du bruge teknikker som f.eks og injicer JavaScript dynamisk i SPFx WebParts. Desuden hjælper enhedstest med at sikre, at disse ændringer fungerer godt på tværs af mange sammenhænge, ​​hvilket resulterer i en pålidelig, brugervenlig løsning til tilpasning af SharePoint-søgeresultater.