Links openen in een pop-upvenster in PnP Modern Search WebPart (SFx)

Verbetering van de gebruikerservaring met aangepaste pop-upkoppelingen in SPFx

Bij moderne SharePoint-ontwikkeling kan het gebruik van de PnP Modern Search WebPart (SPFx) om configureerbare zoekresultaten te bieden de gebruikerservaring aanzienlijk verbeteren. Bepalen hoe links openen is een populaire functie onder ontwikkelaars, vooral met de lay-out "Gedetailleerde lijst". Normaal gesproken openen links in een nieuw tabblad, maar wat als we ze in een pop-upvenster willen openen?

In dit bericht zullen we bekijken hoe we deze functionaliteit kunnen implementeren door het linkgedrag van het PnP Modern Search WebPart te wijzigen. In plaats van de zoekresultaten op een nieuw tabblad te openen, laten we zien hoe u de link kunt forceren om te openen in een aangepast pop-upvenster, wat resulteert in een meer geïntegreerde gebruikerservaring.

De uitdaging doet zich voor wanneer u een formule gebruikt zoals ``, die standaard op een nieuw tabblad staat. Door JavaScript te gebruiken, kunnen we dit gedrag echter negeren en de link openen in een gecontroleerd pop-upvenster. Dit zorgt voor meer flexibiliteit bij het weergeven van inhoud binnen dezelfde browsersessie.

We leiden u door de stappen die nodig zijn om deze functie te ontwikkelen, met de nadruk op het gebruik van JavaScript en SPFx om de lay-out van de gedetailleerde lijst te verbeteren. Houd ons in de gaten terwijl we de oplossing doorlopen om ervoor te zorgen dat uw SharePoint-site naadloos en gebruiksvriendelijk is.

De pop-upvensteroplossing in SPFx begrijpen

De hierboven genoemde scripts passen het standaardgedrag van koppelingen binnen een PnP Modern Search WebPart (SPFx) aan. Standaard gebruiken koppelingen de doel = "_blank" tag om in een nieuw tabblad te openen. Het doel hier is echter om deze links in een pop-upvenster te openen, waardoor de gebruikersinteractie wordt vergroot. Om dit te bereiken hebben wij gebruik gemaakt van de venster.open() functie, waarmee ontwikkelaars URL's kunnen openen in een nieuw browservenster of pop-up. Deze functie kan worden aangepast met specifieke parameters, zoals breedte, hoogte en andere attributen (zoals schuifbalken of aanpasbaarheid), om ervoor te zorgen dat de pop-up presteert zoals bedoeld.

Het overschrijven van het standaardklikgedrag van ankertags is een essentieel onderdeel van de aanpak. Dit is gedaan met event.preventDefault(), waardoor de link niet in een nieuw tabblad kan worden geopend. In plaats daarvan koppelen we een gebeurtenislistener aan de link, die een aangepaste functie activeert (in dit geval: openInPopup()) dat de klikgebeurtenis afhandelt en de URL in een pop-upvenster opent. Hierdoor hebben ontwikkelaars meer controle over het gedrag van de link en ontstaat er een consistentere gebruikerservaring binnen het PnP Modern Search WebPart.

Naast het omgaan met het front-endgedrag, hebben we ook een backend-aanpak onderzocht met behulp van de ingebouwde decorateurs van SPFx, zoals @overschrijven. Met deze aanpak kunnen ontwikkelaars JavaScript rechtstreeks in aangepaste webparts invoegen, waardoor het gedrag van de zoekresultaten verder wordt gewijzigd. Door het weergaveproces in SPFx te overschrijven, kunnen we JavaScript-code injecteren die klikken op links afhandelt en het benodigde materiaal in een pop-upvenster opent. Deze techniek maakt de oplossing modulair en herbruikbaar in meerdere delen van een SharePoint-omgeving, waardoor het onderhoud wordt verbeterd.

Het testen van eenheden is van cruciaal belang om ervoor te zorgen dat de pop-upfunctie correct werkt in meerdere omgevingen en browsers. Gebruik bespioneren() in een Jasmine-testframework valideert dat de venster.open() methode wordt uitgevoerd met de juiste argumenten. Deze vorm van testen identificeert potentiële problemen al vroeg in het ontwikkelingsproces en garandeert dat de pop-upvensters functioneren zoals gepland. Deze oplossing versterkt de gebruikersinteracties in SharePoint's PnP Modern Search WebPart door front-end gebeurtenisafhandeling, backend-aanpassing en unit-tests te integreren.

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

Onderzoek naar gebeurtenisafhandeling en dynamische JavaScript-injectie in SPFx

Bij het werken met PnP Modern Search WebPart (SPFx) is een handige functie voor ontwikkelaars de mogelijkheid om dynamisch aan te passen hoe elementen, zoals links, zich gedragen. Het gebruik van JavaScript-gebeurtenisafhandeling biedt een overvloed aan opties voor het personaliseren van gebruikersinteracties. Het gebruik van gebeurtenislisteners om koppelingsklikken vast te leggen en te beheren, zorgt voor een meer interactieve ervaring. Door klikgebeurtenissen vast te leggen, kunnen we het normale gedrag overschrijven en URL's openen in een gecontroleerd pop-upvenster. Dit zorgt voor een soepele overgang zonder het huidige tabblad of venster van de gebruiker te verstoren.

Het aanpassen van koppelingen in SPFx WebParts vereist ook het dynamisch invoegen van JavaScript-code. Het SharePoint Framework (SPFx) biedt methoden zoals @overschrijven En veroorzaken() voor het verwezenlijken hiervan. Door aangepast JavaScript in te voegen, kunnen ontwikkelaars het gedrag van zoekresultatenitems veranderen zonder dat ze aanzienlijke wijzigingen aan het WebPart zelf hoeven aan te brengen. Deze flexibiliteit maakt het gemakkelijk om globale aanpassingen aan alle zoekresultatenlinks aan te brengen, zodat het gewenste gedrag (zoals het openen in een pop-upvenster) uniform is op het hele platform.

Ten slotte zijn prestaties en gebruikerservaring cruciale factoren in elk webgebaseerd systeem, en hetzelfde geldt hier. Door het gebruik van JavaScript te optimaliseren en resource-intensieve activiteiten te beperken, kunnen we garanderen dat deze aanpassingen geen significante invloed hebben op de laadtijden of het reactievermogen van de pagina. Efficiënt JavaScript-gebruik, gecombineerd met SPFx-aanpassingen aan de backend, biedt een hoge mate van flexibiliteit zonder dat dit ten koste gaat van de prestaties, wat resulteert in een naadloze gebruikerservaring op het hele SharePoint-platform.