Cara Membuka Pautan dalam Tetingkap Pop Timbul dalam PnP Modern Search WebPart (SFx)

Meningkatkan Pengalaman Pengguna dengan Pautan Pop Timbul Tersuai dalam SPFx

Dalam pembangunan SharePoint moden, menggunakan PnP Modern Search WebPart (SPFx) untuk menyediakan hasil carian boleh dikonfigurasikan boleh meningkatkan pengalaman pengguna dengan ketara. Mengawal cara pautan dibuka ialah ciri yang popular di kalangan pembangun, terutamanya dengan reka letak "Senarai Terperinci". Biasanya, pautan dibuka dalam tab baharu, tetapi bagaimana jika kita mahu membukanya dalam tetingkap pop timbul?

Dalam siaran ini, kita akan melihat cara melaksanakan fungsi ini dengan menukar tingkah laku pautan Bahagian Web Carian Moden PnP. Daripada membuka hasil carian dalam tab baharu, kami akan menunjukkan cara memaksa pautan dibuka dalam tetingkap timbul tersuai, menghasilkan pengalaman pengguna yang lebih bersepadu.

Cabaran timbul apabila anda menggunakan formula seperti ``, yang lalai kepada tab baharu. Walau bagaimanapun, dengan menggunakan JavaScript, kami boleh mengatasi tingkah laku ini dan membuka pautan dalam tetingkap pop timbul terkawal. Ini membolehkan lebih fleksibiliti dalam memaparkan kandungan dalam sesi penyemakan imbas yang sama.

Kami akan membimbing anda melalui langkah-langkah yang diperlukan untuk membangunkan ciri ini, dengan tumpuan pada penggunaan JavaScript dan SPFx untuk menambah baik reka letak Senarai Terperinci. Nantikan semasa kami menelusuri penyelesaian untuk memastikan tapak SharePoint anda lancar dan mesra pengguna.

Memahami Penyelesaian Tetingkap Popup dalam SPFx

Skrip yang disenaraikan di atas melaraskan gelagat lalai pautan dalam PnP Modern Search WebPart (SPFx). Secara lalai, pautan menggunakan target="_blank" tag untuk dibuka dalam tab baharu. Walau bagaimanapun, tujuan di sini adalah untuk membuka pautan ini dalam tetingkap pop timbul, dengan itu meningkatkan interaksi pengguna. Untuk mencapai ini, kami menggunakan window.open() fungsi, yang membolehkan pembangun membuka URL dalam tetingkap penyemak imbas baharu atau pop timbul. Fungsi ini boleh dilaraskan dengan parameter tertentu, seperti lebar, ketinggian dan atribut lain (seperti bar skrol atau kebolehubah saiz), untuk memastikan pop timbul berfungsi seperti yang dimaksudkan.

Mengatasi gelagat klik lalai bagi teg sauh ialah komponen penting dalam pendekatan. Ini dilakukan dengan event.preventDefault(), yang menghalang pautan daripada dibuka dalam tab baharu. Sebaliknya, kami melampirkan pendengar acara pada pautan, yang mengaktifkan fungsi tersuai (dalam kes ini, openInPopup()) yang mengendalikan acara klik dan membuka URL dalam tetingkap pop timbul. Ini membolehkan pembangun lebih mengawal kelakuan pautan dan menghasilkan pengalaman pengguna yang lebih konsisten dalam Bahagian Web Carian Moden PnP.

Selain menangani tingkah laku bahagian hadapan, kami juga mengkaji pendekatan bahagian belakang menggunakan penghias terbina dalam SPFx seperti @override. Pendekatan ini membolehkan pembangun memasukkan JavaScript secara langsung ke dalam WebParts tersuai, seterusnya mengubah suai tingkah laku hasil carian. Mengatasi proses pemaparan dalam SPFx membolehkan kami menyuntik kod JavaScript yang mengendalikan klik pautan dan membuka bahan yang diperlukan dalam tetingkap timbul. Teknik ini menjadikan penyelesaian lebih modular dan boleh digunakan semula merentas berbilang kawasan persekitaran SharePoint, justeru meningkatkan penyelenggaraan.

Ujian unit adalah penting untuk memastikan ciri pop timbul berfungsi dengan betul merentas berbilang persekitaran dan penyemak imbas. menggunakan spyOn() dalam rangka kerja ujian Jasmine mengesahkan bahawa window.open() kaedah dilaksanakan dengan hujah yang betul. Bentuk ujian ini mengenal pasti isu yang berpotensi pada awal proses pembangunan dan menjamin bahawa tetingkap pop timbul berfungsi seperti yang dirancang. Penyelesaian ini mengukuhkan interaksi pengguna dalam PnP Modern Search WebPart SharePoint dengan menyepadukan pengendalian acara bahagian hadapan, penyesuaian bahagian belakang dan ujian 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));
   });
});

Meneroka Pengendalian Acara dan Suntikan JavaScript Dinamik dalam SPFx

Apabila bekerja dengan PnP Modern Search WebPart (SPFx), satu ciri berguna untuk pembangun ialah keupayaan untuk melaraskan secara dinamik cara elemen, seperti pautan, bertindak. Penggunaan pengendalian acara JavaScript menyediakan banyak pilihan untuk memperibadikan interaksi pengguna. Menggunakan pendengar acara untuk menangkap dan mengawal klik pautan mencipta pengalaman yang lebih interaktif. Dengan menangkap peristiwa klik, kami mungkin mengatasi gelagat biasa dan membuka URL dalam tetingkap pop timbul terkawal. Ini memastikan peralihan yang lancar tanpa mengganggu tab atau tetingkap semasa pengguna.

Menyesuaikan pautan dalam SPFx WebParts juga memerlukan memasukkan kod JavaScript secara dinamik. Rangka Kerja SharePoint (SPFx) menyediakan kaedah seperti @override dan render() untuk mencapai ini. Dengan memasukkan JavaScript tersuai, pembangun boleh menukar gelagat item hasil carian tanpa perlu membuat pengubahsuaian yang ketara pada WebPart itu sendiri. Fleksibiliti ini memudahkan untuk membuat pelarasan global pada semua pautan hasil carian, memastikan bahawa gelagat yang diingini—seperti membuka dalam tetingkap timbul—adalah seragam di seluruh platform.

Akhir sekali, prestasi dan pengalaman pengguna adalah faktor kritikal dalam mana-mana sistem berasaskan web, dan perkara yang sama berlaku di sini. Dengan mengoptimumkan penggunaan JavaScript dan mengehadkan aktiviti intensif sumber, kami boleh memastikan bahawa penyesuaian ini tidak mempunyai pengaruh yang ketara pada masa pemuatan halaman atau responsif. Penggunaan JavaScript yang cekap, digabungkan dengan pengubahsuaian SPFx bahagian belakang, memberikan tahap fleksibiliti yang tinggi tanpa mengorbankan prestasi, menghasilkan pengalaman pengguna yang lancar di seluruh platform SharePoint.