Como abrir links em uma janela pop-up no PnP Modern Search WebPart (SFx)

Aprimorando a experiência do usuário com links pop-up personalizados no SPFx

No desenvolvimento moderno do SharePoint, usar o PnP Modern Search WebPart (SPFx) para fornecer resultados de pesquisa configuráveis ​​pode melhorar significativamente a experiência do usuário. Controlar como os links abrem é um recurso popular entre os desenvolvedores, especialmente com o layout “Lista detalhada”. Normalmente, os links abrem em uma nova aba, mas e se quisermos abri-los em uma janela pop-up?

Nesta postagem, veremos como implementar essa funcionalidade alterando o comportamento do link da WebPart PnP Modern Search. Em vez de abrir os resultados da pesquisa em uma nova guia, mostraremos como forçar a abertura do link em uma janela pop-up personalizada, resultando em uma experiência de usuário mais integrada.

O desafio surge quando você usa uma fórmula como ``, cujo padrão é uma nova guia. Entretanto, usando JavaScript, podemos substituir esse comportamento e abrir o link em uma janela pop-up controlada. Isso permite mais flexibilidade na exibição de conteúdo na mesma sessão de navegação.

Orientaremos você nas etapas necessárias para desenvolver esse recurso, com foco no uso de JavaScript e SPFx para melhorar o layout da lista detalhada. Fique atento enquanto percorremos a solução para garantir que seu site SharePoint seja perfeito e fácil de usar.

Compreendendo a solução de janela pop-up no SPFx

Os scripts listados acima ajustam o comportamento padrão dos links em uma WebPart de pesquisa moderna PnP (SPFx). Por padrão, os links usam o alvo="_em branco" tag para abrir em uma nova guia. Contudo, o objetivo aqui é abrir esses links em uma janela pop-up, aumentando assim a interação do usuário. Para conseguir isso, usamos o janela.open() função, que permite aos desenvolvedores abrir URLs em uma nova janela ou pop-up do navegador. Esta função pode ser ajustada com parâmetros específicos, como largura, altura e outros atributos (como barras de rolagem ou redimensionamento), para garantir que o pop-up funcione conforme esperado.

Substituir o comportamento de clique padrão das tags âncora é um componente vital da abordagem. Isto é feito com evento.preventDefault(), o que impede que o link seja aberto em uma nova guia. Em vez disso, anexamos um ouvinte de evento ao link, que ativa uma função personalizada (neste caso, openInPopup()) que manipula o evento click e abre o URL em uma janela pop-up. Isso permite aos desenvolvedores mais controle sobre o comportamento do link e resulta em uma experiência de usuário mais consistente na WebPart de pesquisa moderna PnP.

Além de lidar com o comportamento de front-end, também examinamos uma abordagem de back-end usando decoradores integrados ao SPFx, como @substituir. Essa abordagem permite que os desenvolvedores insiram JavaScript diretamente em WebParts personalizados, modificando ainda mais o comportamento dos resultados da pesquisa. Substituir o processo de renderização no SPFx nos permite injetar código JavaScript que lida com cliques em links e abre o material necessário em uma janela pop-up. Essa técnica torna a solução mais modular e reutilizável em diversas áreas de um ambiente SharePoint, melhorando assim a manutenção.

O teste de unidade é fundamental para garantir que o recurso pop-up funcione corretamente em vários ambientes e navegadores. Usando espionar() em uma estrutura de testes Jasmine valida que o janela.open() O método é executado com os argumentos corretos. Esta forma de teste identifica possíveis problemas no início do processo de desenvolvimento e garante que as janelas pop-up funcionem conforme planejado. Esta solução fortalece as interações do usuário no PnP Modern Search WebPart do SharePoint, integrando manipulação de eventos de front-end, personalização de back-end e testes de unidade.

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

Explorando manipulação de eventos e injeção dinâmica de JavaScript no SPFx

Ao trabalhar com PnP Modern Search WebPart (SPFx), um recurso útil para desenvolvedores é a capacidade de ajustar dinamicamente como os elementos, como links, se comportam. O uso da manipulação de eventos JavaScript oferece uma infinidade de opções para personalizar as interações do usuário. Usar ouvintes de eventos para capturar e controlar cliques em links cria uma experiência mais interativa. Ao capturar eventos de clique, podemos substituir o comportamento normal e abrir URLs em uma janela pop-up controlada. Isso garante uma transição suave sem perturbar a guia ou janela atual do usuário.

A personalização de links em WebParts SPFx também requer a inserção dinâmica de código JavaScript. A Estrutura do SharePoint (SPFx) fornece métodos como @substituir e renderizar() por conseguir isso. Ao inserir JavaScript personalizado, os desenvolvedores podem alterar o comportamento dos itens dos resultados da pesquisa sem precisar fazer modificações significativas na própria WebPart. Essa flexibilidade facilita a realização de ajustes globais em todos os links de resultados de pesquisa, garantindo que o comportamento desejado – como abrir uma janela pop-up – seja uniforme em toda a plataforma.

Finalmente, o desempenho e a experiência do usuário são fatores críticos em qualquer sistema baseado na Web, e o mesmo se aplica aqui. Ao otimizar o uso de JavaScript e limitar atividades que consomem muitos recursos, podemos garantir que essas personalizações não tenham influência significativa nos tempos de carregamento ou na capacidade de resposta da página. O uso eficiente de JavaScript, combinado com modificações de back-end do SPFx, fornece um alto nível de flexibilidade sem sacrificar o desempenho, resultando em uma experiência de usuário perfeita em toda a plataforma SharePoint.