Hur man öppnar länkar i ett popup-fönster i PnP Modern Search WebPart (SFx)

Förbättra användarupplevelsen med anpassade popup-länkar i SPFx

I modern SharePoint-utveckling kan användningen av PnP Modern Search WebPart (SPFx) för att tillhandahålla konfigurerbara sökresultat förbättra användarupplevelsen avsevärt. Att kontrollera hur länkar öppnas är en populär funktion bland utvecklare, särskilt med layouten "Detaljerad lista". Normalt öppnas länkar i en ny flik, men vad händer om vi vill öppna dem i ett popup-fönster?

I det här inlägget kommer vi att titta på hur man implementerar denna funktion genom att ändra länkbeteendet för PnP Modern Search WebPart. I stället för att öppna sökresultaten på en ny flik, visar vi hur du tvingar länken att öppnas i ett anpassat popup-fönster, vilket resulterar i en mer integrerad användarupplevelse.

Utmaningen uppstår när du använder en formel som ``, som har en ny flik som standard. Men genom att använda JavaScript kan vi åsidosätta detta beteende och öppna länken i ett kontrollerat popup-fönster. Detta möjliggör mer flexibilitet vid visning av innehåll inom samma webbläsarsession.

Vi går igenom stegen som krävs för att utveckla den här funktionen, med fokus på att använda JavaScript och SPFx för att förbättra layouten med detaljerad lista. Håll ögonen öppna när vi går igenom lösningen för att säkerställa att din SharePoint-webbplats är sömlös och användarvänlig.

Förstå popup-fönsterlösningen i SPFx

Skripten som listas ovan justerar standardbeteendet för länkar inom en PnP Modern Search WebPart (SPFx). Som standard använder länkar target="_blank" taggen för att öppna i en ny flik. Syftet här är dock att öppna dessa länkar i ett popup-fönster och därigenom öka användarinteraktionen. För att åstadkomma detta använde vi window.open() funktion, som låter utvecklare öppna webbadresser i ett nytt webbläsarfönster eller popup. Den här funktionen kan justeras med specifika parametrar, såsom bredd, höjd och andra attribut (som rullningslister eller storleksändring), för att säkerställa att popup-fönstret fungerar som avsett.

Att åsidosätta standardklickbeteendet för ankartaggar är en viktig komponent i metoden. Detta görs med event.preventDefault(), vilket förhindrar att länken öppnas på en ny flik. Istället kopplar vi en händelseavlyssnare till länken, vilket aktiverar en anpassad funktion (i det här fallet, openInPopup()) som hanterar klickhändelsen och öppnar URL:en i ett popup-fönster. Detta ger utvecklare mer kontroll över länkens beteende och resulterar i en mer konsekvent användarupplevelse inom PnP Modern Search WebPart.

Förutom att ta itu med front-end-beteendet undersökte vi också en backend-metod med hjälp av SPFx:s inbyggda dekoratörer som @åsidosätta. Detta tillvägagångssätt gör det möjligt för utvecklare att direkt infoga JavaScript i anpassade webbdelar, vilket ytterligare ändrar beteendet hos sökresultaten. Genom att åsidosätta renderingsprocessen i SPFx kan vi injicera JavaScript-kod som hanterar länkklick och öppnar nödvändigt material i ett popup-fönster. Denna teknik gör lösningen mer modulär och återanvändbar över flera områden i en SharePoint-miljö, vilket förbättrar underhållet.

Enhetstestning är avgörande för att säkerställa att popup-funktionen fungerar korrekt i flera miljöer och webbläsare. Använder spyOn() i ett Jasmine-testramverk validerar att window.open() metoden exekveras med rätt argument. Denna form av testning identifierar potentiella problem tidigt i utvecklingsprocessen och garanterar att popup-fönstren fungerar som planerat. Denna lösning stärker användarinteraktioner i SharePoints PnP Modern Search WebPart genom att integrera front-end-händelsehantering, backend-anpassning och enhetstestning.

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

Utforska händelsehantering och dynamisk JavaScript-injektion i SPFx

När du arbetar med PnP Modern Search WebPart (SPFx) är en användbar funktion för utvecklare möjligheten att dynamiskt justera hur element, såsom länkar, beter sig. Användningen av JavaScript-händelsehantering ger en uppsjö av alternativ för att anpassa användarinteraktioner. Att använda händelseavlyssnare för att fånga och kontrollera länkklick skapar en mer interaktiv upplevelse. Genom att fånga klickhändelser kan vi åsidosätta det normala beteendet och öppna webbadresser i ett kontrollerat popup-fönster. Detta säkerställer en smidig övergång utan att störa användarens aktuella flik eller fönster.

Anpassning av länkar i SPFx WebParts kräver också dynamiskt införande av JavaScript-kod. SharePoint Framework (SPFx) tillhandahåller metoder som @åsidosätta och göra() för att åstadkomma detta. Genom att infoga anpassat JavaScript kan utvecklare ändra beteendet hos sökresultatobjekt utan att behöva göra betydande ändringar i själva webbdelen. Denna flexibilitet gör det enkelt att göra globala justeringar av alla sökresultatlänkar, vilket säkerställer att det önskade beteendet – som att öppna i ett popup-fönster – är enhetligt över hela plattformen.

Slutligen är prestanda och användarupplevelse kritiska faktorer i alla webbaserade system, och detsamma gäller här. Genom att optimera användningen av JavaScript och begränsa resurskrävande aktiviteter kan vi försäkra oss om att dessa anpassningar inte har någon betydande inverkan på sidans laddningstider eller respons. Effektiv JavaScript-användning, i kombination med backend SPFx-modifieringar, ger en hög nivå av flexibilitet utan att offra prestanda, vilket resulterar i en sömlös användarupplevelse i hela SharePoint-plattformen.