Comment ouvrir des liens dans une fenêtre contextuelle dans PnP Modern Search WebPart (SFx)

Améliorer l'expérience utilisateur avec des liens contextuels personnalisés dans SPFx

Dans le développement SharePoint moderne, l’utilisation du PnP Modern Search WebPart (SPFx) pour fournir des résultats de recherche configurables peut améliorer considérablement l’expérience utilisateur. Contrôler la façon dont les liens s'ouvrent est une fonctionnalité populaire parmi les développeurs, en particulier avec la présentation « Liste détaillée ». Normalement, les liens s'ouvrent dans un nouvel onglet, mais que se passe-t-il si nous voulons les ouvrir dans une fenêtre contextuelle ?

Dans cet article, nous verrons comment implémenter cette fonctionnalité en modifiant le comportement des liens du WebPart PnP Modern Search. Plutôt que d'ouvrir les résultats de la recherche dans un nouvel onglet, nous montrerons comment forcer l'ouverture du lien dans une fenêtre contextuelle personnalisée, ce qui permettra une expérience utilisateur plus intégrée.

Le défi se pose lorsque vous utilisez une formule comme ``, qui par défaut est un nouvel onglet. Cependant, en utilisant JavaScript, nous pouvons remplacer ce comportement et ouvrir le lien dans une fenêtre contextuelle contrôlée. Cela permet plus de flexibilité dans l’affichage du contenu au sein de la même session de navigation.

Nous vous guiderons à travers les étapes nécessaires au développement de cette fonctionnalité, en mettant l'accent sur l'utilisation de JavaScript et de SPFx pour améliorer la présentation de la liste détaillée. Restez à l’écoute pendant que nous parcourons la solution pour garantir que votre site SharePoint est transparent et convivial.

Comprendre la solution de fenêtre contextuelle dans SPFx

Les scripts répertoriés ci-dessus ajustent le comportement par défaut des liens dans un WebPart de recherche moderne PnP (SPFx). Par défaut, les liens utilisent le cible="_blank" balise à ouvrir dans un nouvel onglet. Cependant, le but ici est d'ouvrir ces liens dans une fenêtre contextuelle, augmentant ainsi l'interaction de l'utilisateur. Pour ce faire, nous avons utilisé le fenêtre.open() fonction, qui permet aux développeurs d'ouvrir les URL dans une nouvelle fenêtre ou une nouvelle fenêtre contextuelle du navigateur. Cette fonction peut être ajustée avec des paramètres spécifiques, tels que la largeur, la hauteur et d'autres attributs (tels que les barres de défilement ou le redimensionnement), pour garantir que la fenêtre contextuelle fonctionne comme prévu.

Remplacer le comportement de clic par défaut des balises d'ancrage est un élément essentiel de l'approche. Cela se fait avec event.preventDefault(), ce qui empêche le lien de s'ouvrir dans un nouvel onglet. Au lieu de cela, nous attachons un écouteur d'événement au lien, qui active une fonction personnalisée (dans ce cas, ouvrirInPopup()) qui gère l'événement de clic et ouvre l'URL dans une fenêtre contextuelle. Cela permet aux développeurs de mieux contrôler le comportement du lien et se traduit par une expérience utilisateur plus cohérente au sein du WebPart PnP Modern Search.

En plus de traiter le comportement du front-end, nous avons également examiné une approche back-end utilisant les décorateurs intégrés de SPFx comme @outrepasser. Cette approche permet aux développeurs d'insérer directement du JavaScript dans des WebParts personnalisés, modifiant ainsi davantage le comportement des résultats de recherche. Remplacer le processus de rendu dans SPFx nous permet d'injecter du code JavaScript qui gère les clics sur les liens et ouvre le matériel nécessaire dans une fenêtre contextuelle. Cette technique rend la solution plus modulaire et réutilisable dans plusieurs zones d'un environnement SharePoint, améliorant ainsi la maintenance.

Les tests unitaires sont essentiels pour garantir que la fonctionnalité contextuelle fonctionne correctement dans plusieurs environnements et navigateurs. En utilisant espionner() dans un cadre de test Jasmine valide que le fenêtre.open() La méthode est exécutée avec les bons arguments. Cette forme de test identifie les problèmes potentiels dès le début du processus de développement et garantit que les fenêtres contextuelles fonctionnent comme prévu. Cette solution renforce les interactions des utilisateurs dans le WebPart de recherche moderne PnP de SharePoint en intégrant la gestion des événements frontaux, la personnalisation du backend et les tests unitaires.

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

Explorer la gestion des événements et l'injection dynamique de JavaScript dans SPFx

Lorsque vous travaillez avec PnP Modern Search WebPart (SPFx), une fonctionnalité utile pour les développeurs est la possibilité d'ajuster dynamiquement le comportement des éléments, tels que les liens. L'utilisation de la gestion des événements JavaScript offre une multitude d'options pour personnaliser les interactions des utilisateurs. L'utilisation d'écouteurs d'événements pour capturer et contrôler les clics sur les liens crée une expérience plus interactive. En capturant les événements de clic, nous pouvons remplacer le comportement normal et ouvrir les URL dans une fenêtre contextuelle contrôlée. Cela garantit une transition fluide sans perturber l'onglet ou la fenêtre actuelle de l'utilisateur.

La personnalisation des liens dans SPFx WebParts nécessite également l'insertion dynamique de code JavaScript. Le SharePoint Framework (SPFx) fournit des méthodes telles que @outrepasser et rendre() pour y parvenir. En insérant du JavaScript personnalisé, les développeurs peuvent modifier le comportement des éléments des résultats de recherche sans avoir à apporter de modifications significatives au WebPart lui-même. Cette flexibilité facilite l'ajustement global de tous les liens de résultats de recherche, garantissant ainsi que le comportement souhaité (comme l'ouverture dans une fenêtre contextuelle) est uniforme sur toute la plateforme.

Enfin, les performances et l’expérience utilisateur sont des facteurs critiques dans tout système Web, et il en va de même ici. En optimisant l'utilisation de JavaScript et en limitant les activités gourmandes en ressources, nous pouvons garantir que ces personnalisations n'ont aucune influence significative sur les temps de chargement ou la réactivité des pages. L'utilisation efficace de JavaScript, combinée aux modifications SPFx du backend, offre un haut niveau de flexibilité sans sacrifier les performances, ce qui se traduit par une expérience utilisateur transparente sur l'ensemble de la plateforme SharePoint.