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

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.

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 target="_blank" 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 window.open() 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 event.preventDefault(), 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, openInPopup()) 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 @overstyre. 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 spyOn() i et Jasmine-testrammeverk validerer at window.open() 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.

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

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 @overstyre og gjengi() 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.