Hvordan åpne koblinger i et popup-vindu i PnP Modern Search

Mia Chevalier

Mandag 23. september 2024 10:15:40

Forbedre brukeropplevelsen med tilpassede popup-lenker i SPFx
I moderne SharePoint-utvikling kan bruk av PnP Modern Search WebPart (SPFx) for å gi konfigurerbare søkeresultater forbedre brukeropplevelsen betydelig. Å kontrollere hvordan koblinger åpnes er en populær funksjon blant utviklere, spesielt med oppsettet "Detaljert liste". Vanligvis åpnes lenker i en ny fane, men hva om vi vil åpne dem i et popup-vindu?
I dette innlegget skal vi se på hvordan du implementerer denne funksjonaliteten ved å endre lenkeoppførselen til PnP Modern Search WebPart. I stedet for å åpne søkeresultatene i en ny fane, viser vi hvordan du tvinger lenken til å åpnes i et tilpasset popup-vindu, noe som resulterer i en mer integrert brukeropplevelse.
Utfordringen oppstår når du bruker en formel som ``, som er standard til en ny fane. Ved å bruke JavaScript kan vi imidlertid overstyre denne virkemåten og åpne koblingen i et kontrollert popup-vindu. Dette gir mer fleksibilitet ved visning av innhold i samme nettleserøkt.
Vi vil lede deg gjennom trinnene som kreves for å utvikle denne funksjonen, med fokus på bruk av JavaScript og SPFx for å forbedre den detaljerte listeoppsettet. Følg med mens vi går gjennom løsningen for å sikre at SharePoint-siden din er sømløs og brukervennlig.

Kommando Eksempel på bruk

window.open() Denne kommandoen åpner et nytt nettleservindu eller fane. Denne metoden åpner et popup-vindu med visse dimensjoner og egenskaper, for eksempel bredde, høyde og rullefelt.

event.preventDefault() Forhindrer standardoppførselen til en klikket lenke, som er å åpne URL-en i samme eller ny fane. Dette lar oss tilpasse hvordan lenken fungerer, for eksempel å åpne en popup i stedet.

querySelectorAll() Data-popup-attributtet velger alle ankerelementer (). Denne metoden returnerer en NodeList, som lar oss bruke hendelseslyttere til flere komponenter samtidig.

forEach() Hver oppføring i NodeList produsert av querySelectorAll() mottar en handling (for eksempel ved å legge ved en hendelseslytter). Dette gjelder håndtering av mange dynamiske lenkeelementer i PnP Modern Search.

addEventListener() Denne teknikken legger til en klikkhendelseslytter til hver lenke som utløser openInPopup()-funksjonen. Det er nødvendig for å overstyre standard klikkadferd.

import { override } Denne dekoratoren er en del av SharePoint Framework (SPFx) og brukes til å overstyre SPFx WebParts sin standardoppførsel. Det muliggjør spesifikke tilpasninger, for eksempel å injisere JavaScript for å gi popup-funksjonalitet.

@override I SPFx indikerer en dekoratør at en metode eller egenskap overstyrer funksjonalitet. Dette er nødvendig når du endrer virkemåten til SharePoint-komponenter.

spyOn() Overvåker funksjonsanrop under enhetstesting med Jasmine. I dette scenariet brukes den med window.open() for å garantere at popup-vinduet startes på riktig måte under testing.

expect() Denne kommandoen brukes til enhetstesting i Jasmine. Den sjekker at window.open() ble kalt med de riktige argumentene, og garanterer at popup-vinduet vises med de ønskede innstillingene.

Kommando	Eksempel på bruk
window.open()	Denne kommandoen åpner et nytt nettleservindu eller fane. Denne metoden åpner et popup-vindu med visse dimensjoner og egenskaper, for eksempel bredde, høyde og rullefelt.
event.preventDefault()	Forhindrer standardoppførselen til en klikket lenke, som er å åpne URL-en i samme eller ny fane. Dette lar oss tilpasse hvordan lenken fungerer, for eksempel å åpne en popup i stedet.
querySelectorAll()	Data-popup-attributtet velger alle ankerelementer (). Denne metoden returnerer en NodeList, som lar oss bruke hendelseslyttere til flere komponenter samtidig.
forEach()	Hver oppføring i NodeList produsert av querySelectorAll() mottar en handling (for eksempel ved å legge ved en hendelseslytter). Dette gjelder håndtering av mange dynamiske lenkeelementer i PnP Modern Search.
addEventListener()	Denne teknikken legger til en klikkhendelseslytter til hver lenke som utløser openInPopup()-funksjonen. Det er nødvendig for å overstyre standard klikkadferd.
import { override }	Denne dekoratoren er en del av SharePoint Framework (SPFx) og brukes til å overstyre SPFx WebParts sin standardoppførsel. Det muliggjør spesifikke tilpasninger, for eksempel å injisere JavaScript for å gi popup-funksjonalitet.
@override	I SPFx indikerer en dekoratør at en metode eller egenskap overstyrer funksjonalitet. Dette er nødvendig når du endrer virkemåten til SharePoint-komponenter.
spyOn()	Overvåker funksjonsanrop under enhetstesting med Jasmine. I dette scenariet brukes den med window.open() for å garantere at popup-vinduet startes på riktig måte under testing.
expect()	Denne kommandoen brukes til enhetstesting i Jasmine. Den sjekker at window.open() ble kalt med de riktige argumentene, og garanterer at popup-vinduet vises med de ønskede innstillingene.

Forstå popup-vinduløsningen i SPFx

Skriptene oppført ovenfor justerer standardoppførselen til lenker i en PnP Modern Search WebPart (SPFx). Som standard bruker lenker tag for å åpne i en ny fane. Men formålet her er å åpne disse lenkene i et popup-vindu, og dermed øke brukerinteraksjonen. For å oppnå dette brukte vi funksjon, som lar utviklere åpne URL-er i et nytt nettleservindu eller popup. Denne funksjonen kan justeres med spesifikke parametere, for eksempel bredde, høyde og andre attributter (som rullefelt eller endre størrelse), for å sikre at popup-vinduet fungerer etter hensikten.

Å overstyre standard klikkadferd til ankertagger er en viktig komponent i tilnærmingen. Dette gjøres med , som forhindrer at lenken åpnes i en ny fane. I stedet legger vi en hendelseslytter til lenken, som aktiverer en tilpasset funksjon (i dette tilfellet, ) som håndterer klikkhendelsen og åpner URL-en i et popup-vindu. Dette gir utviklere mer kontroll over lenkens oppførsel og resulterer i en mer konsistent brukeropplevelse i PnP Modern Search WebPart.

I tillegg til å håndtere front-end-atferden, undersøkte vi også en backend-tilnærming ved å bruke SPFxs innebygde dekoratorer som . Denne tilnærmingen gjør det mulig for utviklere å sette inn JavaScript direkte i egendefinerte webdeler, og endre oppførselen til søkeresultatene ytterligere. Ved å overstyre gjengivelsesprosessen i SPFx kan vi injisere JavaScript-kode som håndterer lenkeklikk og åpner nødvendig materiale i et popup-vindu. Denne teknikken gjør løsningen mer modulær og gjenbrukbar på tvers av flere områder i et SharePoint-miljø, og forbedrer dermed vedlikeholdet.

Enhetstesting er avgjørende for å sikre at popup-funksjonen fungerer riktig på tvers av flere miljøer og nettlesere. Bruker i et Jasmine-testrammeverk validerer at metoden utføres med de riktige argumentene. Denne formen for testing identifiserer potensielle problemer tidlig i utviklingsprosessen og garanterer at popup-vinduene fungerer som planlagt. Denne løsningen styrker brukerinteraksjoner i SharePoints PnP Modern Search WebPart ved å integrere front-end hendelseshåndtering, backend-tilpasning og enhetstesting.

Løsning 1: Bruk JavaScript `window.open` for å lage et popup-vindu

Denne tilnærmingen bruker JavaScript for å erstatte standardoppførselen for å åpne en lenke i en ny fane med et popup-vindu, som er ideelt for dynamiske frontend-løsninger bygget med SPFx i en SharePoint-kontekst.

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

Løsning 2: Legg til inline JavaScript direkte i koblingskoden

Denne metoden bygger inn JavaScript inne i HTML-lenkekoden, noe som gjør den ideell for et lettvekts dynamisk frontend-system som har få eksterne avhengigheter.

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

Løsning 3: Backend-tilnærming ved bruk av SPFx med JavaScript-injeksjon

Denne tilnærmingen bruker SharePoint Framework (SPFx) for å injisere JavaScript i en tilpasset WebPart, slik at koblinger kan åpnes i et popup-vindu ved hjelp av JavaScript-metoder.

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

Unit Test for JavaScript Popup Behavior

Enhetstester kan garantere at popup-funksjonaliteten er konsistent på tvers av nettlesere og miljøer. Her er en grunnleggende Jasmine-test for frontend-validering.

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

Utforsker hendelseshåndtering og dynamisk JavaScript-injeksjon i SPFx

Når du arbeider med PnP Modern Search WebPart (SPFx), er en nyttig funksjon for utviklere muligheten til å dynamisk justere hvordan elementer, som lenker, oppfører seg. Bruken av JavaScript-hendelseshåndtering gir en mengde alternativer for å tilpasse brukerinteraksjoner. Å bruke hendelseslyttere til å fange opp og kontrollere lenkeklikk skaper en mer interaktiv opplevelse. Ved å fange klikkhendelser kan vi overstyre normal oppførsel og åpne nettadresser i et kontrollert popup-vindu. Dette sikrer en jevn overgang uten å forstyrre brukerens gjeldende fane eller vindu.

Tilpassing av lenker i SPFx WebParts krever også dynamisk innsetting av JavaScript-kode. SharePoint Framework (SPFx) gir metoder som og for å få til dette. Ved å sette inn tilpasset JavaScript kan utviklere endre oppførselen til søkeresultatelementer uten å måtte gjøre vesentlige endringer i selve WebPart. Denne fleksibiliteten gjør det enkelt å foreta globale justeringer av alle søkeresultatlenker, og sikrer at ønsket oppførsel – for eksempel åpning i et popup-vindu – er enhetlig på tvers av plattformen.

Til slutt er ytelse og brukeropplevelse kritiske faktorer i ethvert nettbasert system, og det samme gjelder her. Ved å optimalisere bruken av JavaScript og begrense ressurskrevende aktiviteter, kan vi forsikre at disse tilpasningene ikke har noen vesentlig innflytelse på sidens lastetider eller respons. Effektiv JavaScript-bruk, kombinert med backend SPFx-modifikasjoner, gir en høy grad av fleksibilitet uten å ofre ytelsen, noe som resulterer i en sømløs brukeropplevelse gjennom hele SharePoint-plattformen.

Hvordan åpner jeg en lenke i et popup-vindu med JavaScript?
Du kan bruke funksjon i JavaScript. Denne funksjonen lar deg åpne et nytt nettleservindu eller popup med spesifikke egenskaper som størrelse og rullefelt.
Hva gjør gjøre?
De metoden forhindrer en hendelse fra å utføre standardhandlingen. I dette tilfellet forhindrer den at koblingen åpnes i en ny fane samtidig som den tillater spesifikke handlinger, for eksempel visning av en popup.
Hvordan bruker jeg tilpasset atferd på mange lenker i SPFx?
Bruker i JavaScript kan du velge flere komponenter og knytte hendelseslyttere til dem, og garanterer at de alle følger samme oppførsel.
Hvordan overstyrer jeg standardgjengivelsen av SPFx WebParts?
For å justere oppførselen til SPFx WebParts, bruk dekoratør. Dette lar deg injisere tilpasset JavaScript rett inn i webdelens gjengivelsesprosess.
Hva er den beste teknikken for å finne ut om et popup-vindu åpnes riktig?
Ved å bruke enhetstester i et rammeverk som Jasmine, kan du bruke å overvåke om funksjonen kalles på riktig måte med de forventede parameterne.

Måten koblinger åpnes i et popup-vindu kan tilpasses ved hjelp av JavaScript i PnP Modern Search WebPart (SPFx). Denne endringen forbedrer brukerinteraksjonen ved å holde dem engasjert på gjeldende fane samtidig som den gir tilgang til detaljert innhold i en kontrollert popup.

For å opprettholde konsistent oppførsel, bruk teknikker som og injiser JavaScript dynamisk i SPFx WebParts. Videre bidrar enhetstesting til å sikre at disse endringene fungerer godt i mange sammenhenger, noe som resulterer i en pålitelig, brukervennlig løsning for tilpasning av SharePoint-søkeresultater.

Informasjon om PnP Modern Search WebPart (SPFx) og tilpasning av lenkeoppførsel ble hentet fra offisiell dokumentasjon. For mer informasjon, besøk PnP Modern Search GitHub Repository .
Veiledning om bruk av JavaScript-metoder som f.eks og arrangementslyttere ble referert fra MDN Web Docs for JavaScript.
Detaljer om SharePoint Framework (SPFx)-tilpasninger, inkludert JavaScript-injeksjon og , finnes i SharePoint Framework Oversikt .

Hvordan åpne koblinger i et popup-vindu i PnP Modern Search WebPart (SFx)