كيفية فتح الروابط في نافذة منبثقة في PnP Modern Search WebPart (SFx)

تحسين تجربة المستخدم من خلال الروابط المنبثقة المخصصة في SPFx

في تطوير SharePoint الحديث، يمكن أن يؤدي استخدام PnP Modern Search WebPart (SPFx) لتوفير نتائج بحث قابلة للتكوين إلى تحسين تجربة المستخدم بشكل كبير. يعد التحكم في كيفية فتح الروابط ميزة شائعة بين المطورين، خاصة مع تخطيط "القائمة التفصيلية". عادةً ما يتم فتح الروابط في علامة تبويب جديدة، ولكن ماذا لو أردنا فتحها في نافذة منبثقة؟

في هذا المنشور، سنلقي نظرة على كيفية تنفيذ هذه الوظيفة عن طريق تغيير سلوك الارتباط الخاص بـ PnP Modern Search WebPart. بدلاً من فتح نتائج البحث في علامة تبويب جديدة، سنعرض كيفية فرض فتح الرابط في نافذة منبثقة مخصصة، مما يؤدي إلى تجربة مستخدم أكثر تكاملاً.

ينشأ التحدي عند استخدام صيغة مثل ``، والتي يتم تعيينها افتراضيًا على علامة تبويب جديدة. ومع ذلك، باستخدام JavaScript، يمكننا تجاوز هذا السلوك وفتح الرابط في نافذة منبثقة يتم التحكم فيها. يتيح ذلك مزيدًا من المرونة في عرض المحتوى خلال جلسة التصفح نفسها.

سنرشدك خلال الخطوات المطلوبة لتطوير هذه الميزة، مع التركيز على استخدام JavaScript وSPFx لتحسين تخطيط القائمة التفصيلية. تابعنا بينما نستعرض الحل للتأكد من أن موقع SharePoint الخاص بك سلس وسهل الاستخدام.

فهم حل النافذة المنبثقة في SPFx

تقوم البرامج النصية المذكورة أعلاه بضبط السلوك الافتراضي للارتباطات داخل PnP Modern Search WebPart (SPFx). بشكل افتراضي، تستخدم الروابط الهدف = "_ فارغ" علامة لفتحها في علامة تبويب جديدة. ومع ذلك، فإن الغرض هنا هو فتح هذه الروابط في نافذة منبثقة، وبالتالي زيادة تفاعل المستخدم. ولتحقيق ذلك، استخدمنا نافذة.فتح() وظيفة تتيح للمطورين فتح عناوين URL في نافذة متصفح جديدة أو نافذة منبثقة. يمكن تعديل هذه الوظيفة باستخدام معلمات محددة، مثل العرض والارتفاع وسمات أخرى (مثل أشرطة التمرير أو إمكانية تغيير الحجم)، لضمان أداء النافذة المنبثقة على النحو المنشود.

يعد تجاوز سلوك النقر الافتراضي لعلامات الارتساء عنصرًا حيويًا في هذا النهج. ويتم ذلك مع الحدث.منع الافتراضي()، مما يمنع فتح الرابط في علامة تبويب جديدة. بدلاً من ذلك، نقوم بإرفاق مستمع للحدث بالرابط، والذي يقوم بتنشيط وظيفة مخصصة (في هذه الحالة، أوبينينبوبوب ()) الذي يتعامل مع حدث النقر ويفتح عنوان URL في نافذة منبثقة. يتيح ذلك للمطورين مزيدًا من التحكم في سلوك الارتباط ويؤدي إلى تجربة مستخدم أكثر اتساقًا داخل جزء ويب للبحث الحديث PnP.

بالإضافة إلى التعامل مع سلوك الواجهة الأمامية، قمنا أيضًا بفحص نهج الواجهة الخلفية باستخدام أدوات الديكور المدمجة في SPFx مثل @تجاوز. يمكّن هذا الأسلوب المطورين من إدراج JavaScript مباشرة في أجزاء WebPart المخصصة، مما يؤدي إلى تعديل سلوك نتائج البحث بشكل أكبر. يتيح لنا تجاوز عملية العرض في SPFx إدخال كود JavaScript الذي يتعامل مع نقرات الارتباط ويفتح المواد الضرورية في نافذة منبثقة. تجعل هذه التقنية الحل أكثر نمطية وقابلاً لإعادة الاستخدام عبر مناطق متعددة في بيئة SharePoint، وبالتالي تحسين الصيانة.

يعد اختبار الوحدة أمرًا بالغ الأهمية لضمان عمل ميزة النوافذ المنبثقة بشكل صحيح عبر بيئات ومتصفحات متعددة. استخدام تجسس () في إطار اختبار الياسمين يؤكد أن نافذة.فتح() يتم تنفيذ الطريقة باستخدام الوسائط الصحيحة. يحدد هذا النوع من الاختبار المشكلات المحتملة في وقت مبكر من عملية التطوير ويضمن عمل النوافذ المنبثقة كما هو مخطط لها. يعمل هذا الحل على تقوية تفاعلات المستخدم في SharePoint's PnP Modern Search WebPart من خلال دمج معالجة أحداث الواجهة الأمامية وتخصيص الواجهة الخلفية واختبار الوحدة.

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

استكشاف التعامل مع الأحداث وإدخال JavaScript الديناميكي في SPFx

عند العمل مع PnP Modern Search WebPart (SPFx)، إحدى الميزات المفيدة للمطورين هي القدرة على ضبط كيفية تصرف العناصر، مثل الروابط، ديناميكيًا. يوفر استخدام معالجة أحداث JavaScript عددًا كبيرًا من الخيارات لتخصيص تفاعلات المستخدم. يؤدي استخدام مستمعي الأحداث لالتقاط نقرات الارتباط والتحكم فيها إلى إنشاء تجربة أكثر تفاعلية. ومن خلال التقاط أحداث النقرات، قد نتجاوز السلوك العادي ونفتح عناوين URL في نافذة منبثقة يتم التحكم فيها. وهذا يضمن الانتقال السلس دون إزعاج علامة التبويب أو النافذة الحالية للمستخدم.

يتطلب تخصيص الارتباطات في SPFx WebParts أيضًا إدراج كود JavaScript ديناميكيًا. يوفر إطار عمل SharePoint (SPFx) أساليب مثل @تجاوز و يجعل() لإنجاز هذا. ومن خلال إدراج JavaScript مخصص، يستطيع المطورون تغيير سلوك عناصر نتائج البحث دون الحاجة إلى إجراء تعديلات هامة على جزء الويب نفسه. تسهل هذه المرونة إجراء تعديلات شاملة على جميع روابط نتائج البحث، مما يضمن أن السلوك المرغوب - مثل الفتح في نافذة منبثقة - موحد عبر النظام الأساسي.

وأخيرًا، يعد الأداء وتجربة المستخدم من العوامل الحاسمة في أي نظام قائم على الويب، وينطبق الشيء نفسه هنا. من خلال تحسين استخدام JavaScript والحد من الأنشطة كثيفة الاستخدام للموارد، يمكننا التأكد من أن هذه التخصيصات ليس لها تأثير كبير على أوقات تحميل الصفحة أو الاستجابة. يوفر الاستخدام الفعال لـ JavaScript، بالإضافة إلى تعديلات SPFx الخلفية، مستوى عالٍ من المرونة دون التضحية بالأداء، مما يؤدي إلى تجربة مستخدم سلسة عبر نظام SharePoint الأساسي.