So öffnen Sie Links in einem Popup-Fenster in PnP Modern Search WebPart (SFx)

Verbessern der Benutzererfahrung mit benutzerdefinierten Popup-Links in SPFx

In der modernen SharePoint-Entwicklung kann die Verwendung des PnP Modern Search WebPart (SPFx) zur Bereitstellung konfigurierbarer Suchergebnisse die Benutzererfahrung erheblich verbessern. Die Steuerung des Öffnens von Links ist eine beliebte Funktion bei Entwicklern, insbesondere beim Layout „Detaillierte Liste“. Normalerweise werden Links in einem neuen Tab geöffnet, aber was ist, wenn wir sie in einem Popup-Fenster öffnen möchten?

In diesem Beitrag sehen wir uns an, wie Sie diese Funktionalität implementieren, indem Sie das Linkverhalten des PnP Modern Search-WebParts ändern. Anstatt die Suchergebnisse in einem neuen Tab zu öffnen, zeigen wir, wie Sie das Öffnen des Links in einem benutzerdefinierten Popup-Fenster erzwingen, was zu einem integrierteren Benutzererlebnis führt.

Die Herausforderung entsteht, wenn Sie eine Formel wie „` verwenden, die standardmäßig einen neuen Tab verwendet. Mithilfe von JavaScript können wir dieses Verhalten jedoch außer Kraft setzen und den Link in einem kontrollierten Popup-Fenster öffnen. Dies ermöglicht eine größere Flexibilität bei der Anzeige von Inhalten innerhalb derselben Browsersitzung.

Wir führen Sie durch die Schritte, die zur Entwicklung dieser Funktion erforderlich sind, wobei der Schwerpunkt auf der Verwendung von JavaScript und SPFx zur Verbesserung des Layouts der detaillierten Liste liegt. Bleiben Sie auf dem Laufenden, während wir die Lösung durchgehen, um sicherzustellen, dass Ihre SharePoint-Site nahtlos und benutzerfreundlich ist.

Verständnis der Popup-Fensterlösung in SPFx

Die oben aufgeführten Skripte passen das Standardverhalten von Links innerhalb eines PnP Modern Search WebPart (SPFx) an. Standardmäßig verwenden Links die target="_blank" Tag, um in einem neuen Tab zu öffnen. Der Zweck besteht hier jedoch darin, diese Links in einem Popup-Fenster zu öffnen und so die Benutzerinteraktion zu erhöhen. Um dies zu erreichen, haben wir die verwendet window.open() Funktion, mit der Entwickler URLs in einem neuen Browserfenster oder Popup öffnen können. Diese Funktion kann mit bestimmten Parametern wie Breite, Höhe und anderen Attributen (wie Bildlaufleisten oder Größenänderungsfähigkeit) angepasst werden, um sicherzustellen, dass das Popup wie beabsichtigt funktioniert.

Das Überschreiben des standardmäßigen Klickverhaltens von Ankertags ist ein wesentlicher Bestandteil des Ansatzes. Dies geschieht mit event.preventDefault(), wodurch verhindert wird, dass der Link in einem neuen Tab geöffnet wird. Stattdessen fügen wir dem Link einen Ereignis-Listener hinzu, der eine benutzerdefinierte Funktion aktiviert (in diesem Fall openInPopup()), der das Klickereignis verarbeitet und die URL in einem Popup-Fenster öffnet. Dies ermöglicht Entwicklern mehr Kontrolle über das Verhalten des Links und führt zu einer konsistenteren Benutzererfahrung innerhalb des PnP Modern Search WebPart.

Zusätzlich zum Umgang mit dem Front-End-Verhalten haben wir auch einen Backend-Ansatz unter Verwendung der integrierten Dekoratoren von SPFx untersucht, z @override. Dieser Ansatz ermöglicht es Entwicklern, JavaScript direkt in benutzerdefinierte WebParts einzufügen und so das Verhalten der Suchergebnisse weiter zu verändern. Durch das Überschreiben des Rendering-Prozesses in SPFx können wir JavaScript-Code einfügen, der Linkklicks verarbeitet und das erforderliche Material in einem Popup-Fenster öffnet. Diese Technik macht die Lösung modularer und in mehreren Bereichen einer SharePoint-Umgebung wiederverwendbar und verbessert so die Wartung.

Unit-Tests sind von entscheidender Bedeutung, um sicherzustellen, dass die Popup-Funktion in mehreren Umgebungen und Browsern ordnungsgemäß funktioniert. Benutzen spyOn() in einem Jasmine-Testframework validiert, dass die window.open() Methode wird mit den richtigen Argumenten ausgeführt. Diese Form des Testens identifiziert potenzielle Probleme frühzeitig im Entwicklungsprozess und garantiert, dass die Popup-Fenster wie geplant funktionieren. Diese Lösung stärkt die Benutzerinteraktionen im PnP Modern Search WebPart von SharePoint durch die Integration von Front-End-Ereignisbehandlung, Backend-Anpassung und Unit-Tests.

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

Erkunden der Ereignisbehandlung und der dynamischen JavaScript-Injektion in SPFx

Bei der Arbeit mit PnP Modern Search WebPart (SPFx) ist eine nützliche Funktion für Entwickler die Möglichkeit, das Verhalten von Elementen wie Links dynamisch anzupassen. Die Verwendung der JavaScript-Ereignisbehandlung bietet eine Fülle von Möglichkeiten zur Personalisierung von Benutzerinteraktionen. Durch die Verwendung von Ereignis-Listenern zur Erfassung und Steuerung von Linkklicks entsteht ein interaktiveres Erlebnis. Durch die Erfassung von Klickereignissen können wir das normale Verhalten außer Kraft setzen und URLs in einem kontrollierten Popup-Fenster öffnen. Dies gewährleistet einen reibungslosen Übergang, ohne die aktuelle Registerkarte oder das aktuelle Fenster des Benutzers zu stören.

Das Anpassen von Links in SPFx-WebParts erfordert auch das dynamische Einfügen von JavaScript-Code. Das SharePoint Framework (SPFx) bietet Methoden wie @override Und machen() dafür, dass du das geschafft hast. Durch das Einfügen von benutzerdefiniertem JavaScript können Entwickler das Verhalten von Suchergebniselementen ändern, ohne wesentliche Änderungen am WebPart selbst vornehmen zu müssen. Diese Flexibilität macht es einfach, globale Anpassungen an allen Suchergebnislinks vorzunehmen und sicherzustellen, dass das gewünschte Verhalten – wie das Öffnen in einem Popup-Fenster – auf der gesamten Plattform einheitlich ist.

Schließlich sind Leistung und Benutzererfahrung entscheidende Faktoren in jedem webbasierten System, und das Gleiche gilt auch hier. Durch die Optimierung der Verwendung von JavaScript und die Begrenzung ressourcenintensiver Aktivitäten können wir sicherstellen, dass diese Anpassungen keinen wesentlichen Einfluss auf die Ladezeiten oder die Reaktionsfähigkeit der Seite haben. Die effiziente Verwendung von JavaScript in Kombination mit Backend-SPFx-Änderungen bietet ein hohes Maß an Flexibilität ohne Einbußen bei der Leistung, was zu einem nahtlosen Benutzererlebnis auf der gesamten SharePoint-Plattform führt.