PnP ماڈرن سرچ ویب پارٹ (SFx) میں پاپ اپ ونڈو میں لنکس کیسے کھولیں

SPFx میں کسٹم پاپ اپ لنکس کے ساتھ صارف کے تجربے کو بڑھانا

جدید شیئرپوائنٹ کی ترقی میں، قابل ترتیب تلاش کے نتائج فراہم کرنے کے لیے PnP ماڈرن سرچ ویب پارٹ (SPFx) کا استعمال صارف کے تجربے کو نمایاں طور پر بہتر بنا سکتا ہے۔ لنکس کے کھلنے کے طریقہ کو کنٹرول کرنا ڈویلپرز کے درمیان ایک مقبول خصوصیت ہے، خاص طور پر "تفصیلی فہرست" لے آؤٹ کے ساتھ۔ عام طور پر، لنکس ایک نئے ٹیب میں کھلتے ہیں، لیکن اگر ہم انہیں پاپ اپ ونڈو میں کھولنا چاہتے ہیں تو کیا ہوگا؟

اس پوسٹ میں، ہم دیکھیں گے کہ PnP ماڈرن سرچ ویب پارٹ کے لنک رویے کو تبدیل کرکے اس فعالیت کو کیسے نافذ کیا جائے۔ تلاش کے نتائج کو ایک نئے ٹیب میں کھولنے کے بجائے، ہم یہ دکھائیں گے کہ کس طرح اپنی مرضی کے مطابق پاپ اپ ونڈو میں لنک کو زبردستی کھولنا ہے، جس کے نتیجے میں صارف کا مزید مربوط تجربہ حاصل ہوتا ہے۔

چیلنج اس وقت پیدا ہوتا ہے جب آپ `` جیسا فارمولہ استعمال کرتے ہیں، جو ایک نئے ٹیب میں ڈیفالٹ ہوتا ہے۔ تاہم، جاوا اسکرپٹ کا استعمال کرتے ہوئے، ہم اس رویے کو اوور رائیڈ کر سکتے ہیں اور لنک کو کنٹرول شدہ پاپ اپ ونڈو میں کھول سکتے ہیں۔ یہ اسی براؤزنگ سیشن میں مواد کی نمائش میں مزید لچک پیدا کرنے کی اجازت دیتا ہے۔

تفصیلی فہرست کی ترتیب کو بہتر بنانے کے لیے JavaScript اور SPFx کے استعمال پر توجہ مرکوز کرتے ہوئے ہم آپ کو اس خصوصیت کو تیار کرنے کے لیے درکار اقدامات سے آگاہ کریں گے۔ اس بات کو یقینی بنانے کے لیے کہ آپ کی شیئرپوائنٹ سائٹ ہموار اور صارف دوست ہے۔

SPFx میں پاپ اپ ونڈو حل کو سمجھنا

اوپر دی گئی اسکرپٹس PnP ماڈرن سرچ ویب پارٹ (SPFx) میں لنکس کے پہلے سے طے شدہ رویے کو ایڈجسٹ کرتی ہیں۔ پہلے سے طے شدہ طور پر، لنکس استعمال کرتے ہیں target="_blank" ایک نئے ٹیب میں کھولنے کے لیے ٹیگ کریں۔ تاہم، یہاں کا مقصد ان لنکس کو ایک پاپ اپ ونڈو میں کھولنا ہے، اس طرح صارف کی بات چیت میں اضافہ ہوتا ہے۔ اس کو پورا کرنے کے لیے، ہم نے استعمال کیا۔ window.open() فنکشن، جو ڈویلپرز کو یو آر ایل کو نئی براؤزر ونڈو یا پاپ اپ میں کھولنے دیتا ہے۔ اس فنکشن کو مخصوص پیرامیٹرز کے ساتھ ایڈجسٹ کیا جا سکتا ہے، جیسے چوڑائی، اونچائی، اور دیگر اوصاف (جیسے اسکرول بارز یا ریزائزیبلٹی)، اس بات کو یقینی بنانے کے لیے کہ پاپ اپ حسب منشا پرفارم کرتا ہے۔

اینکر ٹیگز کے پہلے سے طے شدہ کلک رویے کو اوور رائیڈ کرنا نقطہ نظر کا ایک اہم جز ہے۔ اس کے ساتھ کیا جاتا ہے۔ event.preventDefault()، جو لنک کو نئے ٹیب میں کھلنے سے روکتا ہے۔ اس کے بجائے، ہم ایک واقعہ سننے والے کو لنک سے منسلک کرتے ہیں، جو ایک حسب ضرورت فنکشن کو چالو کرتا ہے (اس صورت میں، OpenInPopup()) جو کلک ایونٹ کو ہینڈل کرتا ہے اور یو آر ایل کو پاپ اپ ونڈو میں کھولتا ہے۔ یہ ڈویلپرز کو لنک کے رویے پر مزید کنٹرول کرنے کی اجازت دیتا ہے اور اس کے نتیجے میں PnP ماڈرن سرچ ویب پارٹ کے اندر صارف کا زیادہ مستقل تجربہ ہوتا ہے۔

فرنٹ اینڈ رویے سے نمٹنے کے علاوہ، ہم نے SPFx کے بلٹ ان ڈیکوریٹرز کا استعمال کرتے ہوئے بیک اینڈ اپروچ کا بھی جائزہ لیا۔ @override. یہ نقطہ نظر ڈویلپرز کو جاوا اسکرپٹ کو براہ راست اپنی مرضی کے ویب پارٹس میں داخل کرنے کے قابل بناتا ہے، تلاش کے نتائج کے رویے میں مزید ترمیم کرتا ہے۔ SPFx میں رینڈرنگ کے عمل کو اوور رائیڈ کرنے سے ہمیں JavaScript کوڈ انجیکشن کرنے کی اجازت ملتی ہے جو لنک کلکس کو ہینڈل کرتا ہے اور ضروری مواد کو پاپ اپ ونڈو میں کھولتا ہے۔ یہ تکنیک شیئرپوائنٹ ماحول کے متعدد علاقوں میں حل کو زیادہ ماڈیولر اور دوبارہ قابل استعمال بناتی ہے، اس لیے دیکھ بھال کو بہتر بناتی ہے۔

یونٹ ٹیسٹنگ اس بات کو یقینی بنانے کے لیے اہم ہے کہ پاپ اپ فیچر متعدد ماحول اور براؤزرز میں مناسب طریقے سے کام کرتا ہے۔ استعمال کرنا spyOn() جیسمین ٹیسٹنگ فریم ورک میں اس بات کی توثیق کرتا ہے کہ window.open() طریقہ صحیح دلائل کے ساتھ عمل میں لایا جاتا ہے۔ جانچ کی یہ شکل ترقی کے عمل کے شروع میں ممکنہ مسائل کی نشاندہی کرتی ہے اور اس بات کی ضمانت دیتی ہے کہ پاپ اپ ونڈوز منصوبہ بندی کے مطابق کام کرتی ہے۔ یہ حل SharePoint کے PnP ماڈرن سرچ ویب پارٹ میں فرنٹ اینڈ ایونٹ ہینڈلنگ، بیک اینڈ کسٹمائزیشن، اور یونٹ ٹیسٹنگ کو یکجا کر کے صارف کے تعامل کو مضبوط کرتا ہے۔

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

SPFx میں ایونٹ ہینڈلنگ اور متحرک JavaScript انجکشن کی تلاش

PnP Modern Search WebPart (SPFx) کے ساتھ کام کرتے وقت، ڈویلپرز کے لیے ایک مفید خصوصیت متحرک طور پر ایڈجسٹ کرنے کی صلاحیت ہے کہ عناصر، جیسے لنکس، برتاؤ کیسے کرتے ہیں۔ JavaScript ایونٹ ہینڈلنگ کا استعمال صارف کے تعاملات کو ذاتی بنانے کے لیے بہت سارے اختیارات فراہم کرتا ہے۔ لنک کلکس کو کیپچر اور کنٹرول کرنے کے لیے ایونٹ کے سننے والوں کا استعمال ایک زیادہ انٹرایکٹو تجربہ تخلیق کرتا ہے۔ کلک ایونٹس کیپچر کر کے، ہم عام رویے کو اوور رائیڈ کر سکتے ہیں اور یو آر ایل کو کنٹرول شدہ پاپ اپ ونڈو میں کھول سکتے ہیں۔ یہ صارف کے موجودہ ٹیب یا ونڈو کو پریشان کیے بغیر ایک ہموار منتقلی کو یقینی بناتا ہے۔

SPFx WebParts میں لنکس کو حسب ضرورت بنانے کے لیے بھی متحرک طور پر JavaScript کوڈ داخل کرنے کی ضرورت ہوتی ہے۔ شیئرپوائنٹ فریم ورک (SPFx) اس طرح کے طریقے فراہم کرتا ہے۔ @override اور رینڈر() اس کو پورا کرنے کے لیے۔ اپنی مرضی کے مطابق JavaScript داخل کرنے سے، ڈویلپرز خود WebPart میں اہم ترمیم کیے بغیر تلاش کے نتائج کے آئٹمز کے رویے کو تبدیل کر سکتے ہیں۔ یہ لچک تمام تلاش کے نتائج کے لنکس میں عالمی سطح پر ایڈجسٹمنٹ کرنا آسان بناتی ہے، اس بات کو یقینی بناتی ہے کہ مطلوبہ رویہ — جیسے کہ ایک پاپ اپ ونڈو میں کھلنا — پورے پلیٹ فارم پر یکساں ہے۔

آخر میں، کارکردگی اور صارف کا تجربہ کسی بھی ویب پر مبنی نظام میں اہم عوامل ہیں، اور یہاں بھی یہی بات درست ہے۔ JavaScript کے استعمال کو بہتر بنا کر اور وسائل سے متعلق سرگرمیوں کو محدود کر کے، ہم یقین کر سکتے ہیں کہ ان تخصیصات کا صفحہ لوڈ ہونے کے اوقات یا ردعمل پر کوئی خاص اثر نہیں ہے۔ جاوا اسکرپٹ کا موثر استعمال، بیک اینڈ SPFx ترمیمات کے ساتھ مل کر، کارکردگی کو قربان کیے بغیر اعلیٰ سطح کی لچک فراہم کرتا ہے، جس کے نتیجے میں شیئرپوائنٹ پلیٹ فارم پر صارف کا ہموار تجربہ ہوتا ہے۔