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.

Rozkaz	Przykład użycia
window.open()	To polecenie otworzy nowe okno lub kartę przeglądarki. Ta metoda otwiera wyskakujące okno z określonymi wymiarami i właściwościami, takimi jak szerokość, wysokość i paski przewijania.
event.preventDefault()	Zapobiega domyślnemu zachowaniu klikniętego linku, czyli otwarciu adresu URL w tej samej lub nowej karcie. Dzięki temu możemy dostosować sposób działania łącza, na przykład otwierać wyskakujące okienko.
querySelectorAll()	Atrybut data-popup wybiera wszystkie elementy kotwiczące (). Ta metoda zwraca listę węzłów, która pozwala zastosować detektory zdarzeń do kilku komponentów jednocześnie.
forEach()	Każdy wpis na liście NodeList utworzony przez querySelectorAll() otrzymuje akcję (na przykład dołączenie detektora zdarzeń). Dotyczy to zarządzania wieloma elementami łączy dynamicznych w PnP Modern Search.
addEventListener()	Ta technika dodaje detektor zdarzeń kliknięcia do każdego łącza, które wyzwala funkcję openInPopup(). Jest to konieczne do zastąpienia domyślnego zachowania kliknięcia.
import { override }	Ten dekorator jest częścią SharePoint Framework (SPFx) i służy do zastępowania domyślnego zachowania składników WebPart SPFx. Umożliwia określone dostosowania, takie jak wstrzykiwanie kodu JavaScript w celu zapewnienia funkcjonalności wyskakujących okienek.
@override	W SPFx dekorator wskazuje, że metoda lub właściwość zastępuje funkcjonalność. Jest to konieczne przy modyfikowaniu zachowania komponentów SharePoint.
spyOn()	Monitoruje wywołania funkcji podczas testów jednostkowych za pomocą Jasmine. W tym scenariuszu jest ona używana z window.open() w celu zagwarantowania, że ​​wyskakujące okienko zostanie prawidłowo uruchomione podczas testowania.
expect()	To polecenie służy do testów jednostkowych w Jasmine. Sprawdza, czy wywołano window.open() z poprawnymi argumentami, gwarantując pojawienie się wyskakującego okienka z żądanymi ustawieniami.

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 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 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 , co uniemożliwia otwarcie linku w nowej karcie. Zamiast tego dołączamy do łącza detektor zdarzeń, który aktywuje niestandardową funkcję (w tym przypadku ), 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 . 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 w środowisku testowym Jasmine potwierdza, że 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 I 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.

1. Jak otworzyć łącze w wyskakującym oknie za pomocą JavaScript?
2. Możesz skorzystać z funkcja w JavaScript. Ta funkcja umożliwia otwarcie nowego okna przeglądarki lub wyskakującego okienka z określonymi właściwościami, takimi jak rozmiar i paski przewijania.
3. Co robi Do?
4. The Metoda uniemożliwia zdarzeniu wykonanie domyślnej akcji. W takim przypadku uniemożliwia otwarcie linku w nowej karcie, jednocześnie umożliwiając określone działania, takie jak wyświetlenie wyskakującego okienka.
5. Jak zastosować niestandardowe zachowanie do wielu linków w SPFx?
6. Używanie w JavaScript możesz wybrać wiele komponentów i dołączyć do nich detektory zdarzeń, gwarantując, że wszystkie będą zachowywać się tak samo.
7. Jak zastąpić domyślne renderowanie składników WebPart SPFx?
8. Aby dostosować zachowanie składników WebPart SPFx, użyj metody dekorator. Umożliwia to wstrzyknięcie niestandardowego kodu JavaScript bezpośrednio do procesu renderowania komponentu WebPart.
9. Jaka jest najlepsza technika sprawdzania, czy wyskakujące okienko otwiera się prawidłowo?
10. Możesz użyć testów jednostkowych w frameworku takim jak Jasmine monitorować, czy funkcja jest wywoływana odpowiednio z przewidywanymi parametrami.

Sposób otwierania łączy w wyskakującym oknie można dostosować za pomocą JavaScript w składniku WebPart PnP Modern Search (SPFx). Ta zmiana poprawia interakcję użytkownika, utrzymując jego zaangażowanie na bieżącej karcie, zapewniając jednocześnie dostęp do szczegółowej treści w kontrolowanym wyskakującym okienku.

Aby zachować spójne zachowanie, używaj technik takich jak i dynamicznie wstawiaj JavaScript do składników WebParts SPFx. Co więcej, testy jednostkowe pomagają zapewnić, że zmiany te będą dobrze działać w wielu kontekstach, co daje niezawodne, przyjazne dla użytkownika rozwiązanie do dostosowywania wyników wyszukiwania SharePoint.