Cara Membuka Tautan di Jendela Popup di PnP Modern Search WebPart (SFx)

Meningkatkan Pengalaman Pengguna dengan Tautan Popup Khusus di SPFx

Dalam pengembangan SharePoint modern, menggunakan PnP Modern Search WebPart (SPFx) untuk memberikan hasil pencarian yang dapat dikonfigurasi dapat meningkatkan pengalaman pengguna secara signifikan. Mengontrol bagaimana tautan terbuka adalah fitur yang populer di kalangan pengembang, terutama dengan tata letak "Daftar Terperinci". Biasanya, link terbuka di tab baru, tapi bagaimana jika kita ingin membukanya di jendela popup?

Dalam postingan ini, kita akan melihat cara mengimplementasikan fungsi ini dengan mengubah perilaku tautan dari PnP Modern Search WebPart. Daripada membuka hasil pencarian di tab baru, kami akan menunjukkan cara memaksa tautan terbuka di jendela popup yang disesuaikan, sehingga menghasilkan pengalaman pengguna yang lebih terintegrasi.

Tantangan muncul saat Anda menggunakan rumus seperti ``, yang defaultnya adalah tab baru. Namun, dengan menggunakan JavaScript, kita dapat mengesampingkan perilaku ini dan membuka tautan di jendela popup yang terkontrol. Hal ini memungkinkan lebih banyak fleksibilitas dalam menampilkan konten dalam sesi penelusuran yang sama.

Kami akan memandu Anda melalui langkah-langkah yang diperlukan untuk mengembangkan fitur ini, dengan fokus pada penggunaan JavaScript dan SPFx untuk meningkatkan tata letak Daftar Terperinci. Pantau terus kami saat kami mempelajari solusinya untuk memastikan situs SharePoint Anda lancar dan ramah pengguna.

Memahami Solusi Jendela Popup di SPFx

Skrip yang tercantum di atas menyesuaikan perilaku default tautan dalam PnP Modern Search WebPart (SPFx). Secara default, tautan menggunakan target="_kosong" tag untuk dibuka di tab baru. Namun, tujuannya di sini adalah untuk membuka tautan ini di jendela popup, sehingga meningkatkan interaksi pengguna. Untuk mencapai hal ini, kami menggunakan jendela.buka() fungsi, yang memungkinkan pengembang membuka URL di jendela atau popup browser baru. Fungsi ini dapat disesuaikan dengan parameter tertentu, seperti lebar, tinggi, dan atribut lainnya (seperti scrollbar atau kemampuan mengubah ukuran), untuk memastikan bahwa popup berfungsi sebagaimana mestinya.

Mengganti perilaku klik default pada tag jangkar merupakan komponen penting dari pendekatan ini. Ini dilakukan dengan acara.preventDefault(), yang mencegah tautan dibuka di tab baru. Sebagai gantinya, kami melampirkan pendengar acara ke tautan, yang mengaktifkan fungsi khusus (dalam hal ini, bukaDalamPopup()) yang menangani acara klik dan membuka URL di jendela popup. Hal ini memungkinkan pengembang lebih mengontrol perilaku tautan dan menghasilkan pengalaman pengguna yang lebih konsisten dalam PnP Modern Search WebPart.

Selain menangani perilaku front-end, kami juga memeriksa pendekatan backend menggunakan dekorator bawaan SPFx seperti @mengesampingkan. Pendekatan ini memungkinkan pengembang untuk langsung memasukkan JavaScript ke WebParts kustom, yang selanjutnya mengubah perilaku hasil pencarian. Mengganti proses rendering di SPFx memungkinkan kita memasukkan kode JavaScript yang menangani klik tautan dan membuka materi yang diperlukan di jendela popup. Teknik ini menjadikan solusi lebih modular dan dapat digunakan kembali di berbagai area lingkungan SharePoint, sehingga meningkatkan pemeliharaan.

Pengujian unit sangat penting untuk memastikan bahwa fitur popup berfungsi dengan baik di berbagai lingkungan dan browser. Menggunakan memata-matai() dalam kerangka pengujian Jasmine memvalidasi bahwa jendela.buka() metode dijalankan dengan argumen yang tepat. Bentuk pengujian ini mengidentifikasi potensi masalah di awal proses pengembangan dan menjamin bahwa jendela popup berfungsi sesuai rencana. Solusi ini memperkuat interaksi pengguna di PnP Modern Search WebPart SharePoint dengan mengintegrasikan penanganan peristiwa front-end, penyesuaian backend, dan pengujian unit.

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

Menjelajahi Penanganan Peristiwa dan Injeksi JavaScript Dinamis di SPFx

Saat bekerja dengan PnP Modern Search WebPart (SPFx), salah satu fitur yang berguna bagi pengembang adalah kemampuan untuk menyesuaikan secara dinamis bagaimana elemen, seperti tautan, berperilaku. Penggunaan penanganan peristiwa JavaScript memberikan banyak pilihan untuk mempersonalisasi interaksi pengguna. Menggunakan event listening untuk menangkap dan mengontrol klik tautan akan menciptakan pengalaman yang lebih interaktif. Dengan menangkap peristiwa klik, kami dapat mengesampingkan perilaku normal dan membuka URL di jendela popup terkontrol. Hal ini memastikan transisi yang lancar tanpa mengganggu tab atau jendela pengguna saat ini.

Menyesuaikan tautan di SPFx WebParts juga memerlukan penyisipan kode JavaScript secara dinamis. SharePoint Framework (SPFx) menyediakan metode seperti @mengesampingkan Dan memberikan() untuk mencapai hal ini. Dengan menyisipkan JavaScript kustom, pengembang bisa mengubah perilaku item hasil pencarian tanpa harus melakukan modifikasi signifikan pada WebPart itu sendiri. Fleksibilitas ini memudahkan penyesuaian global pada semua link hasil pencarian, memastikan bahwa perilaku yang diinginkan—seperti membuka jendela popup—seragam di seluruh platform.

Terakhir, kinerja dan pengalaman pengguna merupakan faktor penting dalam sistem berbasis web apa pun, dan hal yang sama juga berlaku di sini. Dengan mengoptimalkan penggunaan JavaScript dan membatasi aktivitas intensif sumber daya, kami dapat memastikan bahwa penyesuaian ini tidak memiliki pengaruh signifikan terhadap waktu muat halaman atau daya tanggap. Penggunaan JavaScript yang efisien, dikombinasikan dengan modifikasi SPFx backend, memberikan fleksibilitas tingkat tinggi tanpa mengorbankan kinerja, sehingga menghasilkan pengalaman pengguna yang lancar di seluruh platform SharePoint.