Jak otwierać łącza w wyskakującym oknie w składniku WebPart PnP Modern Search (SFx)

Zwiększanie komfortu użytkownika dzięki niestandardowym linkom wyskakującym w SPFx

W nowoczesnym programowaniu SharePoint użycie modułu PnP Modern Search WebPart (SPFx) w celu zapewnienia konfigurowalnych wyników wyszukiwania może znacząco poprawić komfort użytkownika. Kontrolowanie sposobu otwierania linków jest popularną funkcją wśród programistów, szczególnie w przypadku układu „Lista szczegółowa”. Zwykle linki otwierają się w nowej karcie, ale co, jeśli chcemy je otworzyć w wyskakującym oknie?

W tym poście przyjrzymy się, jak zaimplementować tę funkcjonalność, zmieniając zachowanie łącza w składniku WebPart PnP Modern Search. Zamiast otwierać wyniki wyszukiwania w nowej karcie, pokażemy, jak wymusić otwarcie łącza w dostosowanym oknie wyskakującym, co zapewni bardziej zintegrowane doświadczenie użytkownika.

Wyzwanie pojawia się, gdy używasz formuły takiej jak ``, która domyślnie oznacza nową kartę. Jednak używając JavaScript, możemy obejść to zachowanie i otworzyć link w kontrolowanym wyskakującym oknie. Pozwala to na większą elastyczność w wyświetlaniu treści w ramach tej samej sesji przeglądania.

Przeprowadzimy Cię przez kroki wymagane do opracowania tej funkcji, skupiając się na użyciu JavaScript i SPFx w celu ulepszenia układu listy szczegółowej. Bądź na bieżąco, gdy będziemy omawiać rozwiązanie, aby mieć pewność, że Twoja witryna SharePoint będzie działać bezproblemowo i przyjazna dla użytkownika.

Zrozumienie rozwiązania okna wyskakującego w SPFx

Wymienione powyżej skrypty dostosowują domyślne zachowanie łączy w składniku WebPart PnP Modern Search (SPFx). Domyślnie linki korzystają z rozszerzenia cel="_blank" tag, aby otworzyć w nowej karcie. Jednakże celem jest otwarcie tych łączy w wyskakującym oknie, zwiększając w ten sposób interakcję użytkownika. Aby to osiągnąć, użyliśmy okno.otwórz() funkcja, która umożliwia programistom otwieranie adresów URL w nowym oknie przeglądarki lub wyskakującym okienku. Tę funkcję można dostosować za pomocą określonych parametrów, takich jak szerokość, wysokość i inne atrybuty (takie jak paski przewijania lub możliwość zmiany rozmiaru), aby mieć pewność, że wyskakujące okienko będzie działać zgodnie z oczekiwaniami.

Zastąpienie domyślnego zachowania tagów zakotwiczeń po kliknięciu jest istotnym elementem tego podejścia. To się robi wydarzenie.zapobiegajDefault(), co uniemożliwia otwarcie linku w nowej karcie. Zamiast tego dołączamy do łącza detektor zdarzeń, który aktywuje niestandardową funkcję (w tym przypadku openInPopup()), który obsługuje zdarzenie kliknięcia i otwiera adres URL w wyskakującym oknie. Umożliwia to programistom większą kontrolę nad zachowaniem łącza i zapewnia bardziej spójną obsługę użytkownika w ramach modułu PnP Modern Search WebPart.

Oprócz zajmowania się zachowaniem front-endu, sprawdziliśmy także podejście backendu przy użyciu wbudowanych dekoratorów SPFx, takich jak @prześcigać. Takie podejście umożliwia programistom bezpośrednie wstawianie kodu JavaScript do niestandardowych składników WebPart, dodatkowo modyfikując zachowanie wyników wyszukiwania. Przesłonięcie procesu renderowania w SPFx pozwala nam wstrzyknąć kod JavaScript, który obsługuje kliknięcia w linki i otwiera niezbędny materiał w wyskakującym oknie. Ta technika sprawia, że ​​rozwiązanie jest bardziej modułowe i można je ponownie wykorzystać w wielu obszarach środowiska SharePoint, co usprawnia konserwację.

Testowanie jednostkowe ma kluczowe znaczenie dla zapewnienia prawidłowego działania funkcji wyskakujących okienek w wielu środowiskach i przeglądarkach. Używanie szpiegowanie() w środowisku testowym Jasmine potwierdza, że okno.otwórz() Metoda jest wykonywana z właściwymi argumentami. Ta forma testowania identyfikuje potencjalne problemy na wczesnym etapie procesu programowania i gwarantuje, że wyskakujące okienka będą działać zgodnie z planem. To rozwiązanie wzmacnia interakcje użytkowników w składniku WebPart PnP Modern Search programu SharePoint, integrując obsługę zdarzeń frontonu, dostosowywanie backendu i testowanie jednostkowe.

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

Odkrywanie obsługi zdarzeń i dynamicznego wstrzykiwania JavaScript w SPFx

Podczas pracy z modułem PnP Modern Search WebPart (SPFx) przydatną funkcją dla programistów jest możliwość dynamicznego dostosowywania zachowania elementów, takich jak łącza. Zastosowanie obsługi zdarzeń JavaScript zapewnia mnóstwo opcji personalizacji interakcji użytkownika. Używanie detektorów zdarzeń do przechwytywania i kontrolowania kliknięć linków zapewnia bardziej interaktywne doświadczenie. Przechwytując zdarzenia kliknięcia, możemy zastąpić normalne zachowanie i otworzyć adresy URL w kontrolowanym wyskakującym oknie. Zapewnia to płynne przejście bez zakłócania bieżącej karty lub okna użytkownika.

Dostosowywanie łączy w składnikach WebPart SPFx wymaga również dynamicznego wstawiania kodu JavaScript. SharePoint Framework (SPFx) udostępnia metody takie jak @prześcigać I oddać() za osiągnięcie tego. Wstawiając niestandardowy kod JavaScript, programiści mogą zmieniać zachowanie elementów wyników wyszukiwania bez konieczności wprowadzania znaczących modyfikacji samego komponentu WebPart. Ta elastyczność ułatwia globalne dostosowywanie wszystkich łączy wyników wyszukiwania, zapewniając, że pożądane zachowanie – takie jak otwieranie w wyskakującym oknie – jest jednolite na całej platformie.

Wreszcie, wydajność i doświadczenie użytkownika są krytycznymi czynnikami w każdym systemie internetowym i to samo dotyczy tego. Optymalizując użycie JavaScript i ograniczając działania wymagające dużych zasobów, możemy zapewnić, że te dostosowania nie mają znaczącego wpływu na czas ładowania strony ani responsywność. Efektywne wykorzystanie JavaScript w połączeniu z modyfikacjami SPFx zaplecza zapewnia wysoki poziom elastyczności bez utraty wydajności, co skutkuje bezproblemową obsługą całej platformy SharePoint.