PnP আধুনিক অনুসন্ধান ওয়েবপার্টে (SFx) পপআপ উইন্ডোতে লিঙ্কগুলি কীভাবে খুলবেন

SPFx-এ কাস্টম পপআপ লিঙ্কগুলির সাথে ব্যবহারকারীর অভিজ্ঞতা বৃদ্ধি করা

আধুনিক শেয়ারপয়েন্ট ডেভেলপমেন্টে, কনফিগারযোগ্য অনুসন্ধান ফলাফল প্রদানের জন্য PnP আধুনিক অনুসন্ধান ওয়েবপার্ট (SPFx) ব্যবহার করা ব্যবহারকারীর অভিজ্ঞতাকে উল্লেখযোগ্যভাবে উন্নত করতে পারে। লিঙ্কগুলি কীভাবে খোলা হয় তা নিয়ন্ত্রণ করা বিকাশকারীদের মধ্যে একটি জনপ্রিয় বৈশিষ্ট্য, বিশেষ করে "বিশদ তালিকা" লেআউটের সাথে। সাধারণত, লিঙ্কগুলি একটি নতুন ট্যাবে খোলা হয়, কিন্তু আমরা যদি সেগুলিকে একটি পপআপ উইন্ডোতে খুলতে চাই তবে কী হবে?

এই পোস্টে, আমরা PnP আধুনিক অনুসন্ধান ওয়েবপার্টের লিঙ্ক আচরণ পরিবর্তন করে কিভাবে এই কার্যকারিতা বাস্তবায়ন করতে হয় তা দেখব। একটি নতুন ট্যাবে অনুসন্ধান ফলাফল খোলার পরিবর্তে, আমরা দেখাব কিভাবে লিঙ্কটিকে একটি কাস্টমাইজড পপআপ উইন্ডোতে খুলতে বাধ্য করা যায়, যার ফলে ব্যবহারকারীর অভিজ্ঞতা আরও একীভূত হয়৷

চ্যালেঞ্জ দেখা দেয় যখন আপনি `` এর মতো একটি সূত্র ব্যবহার করেন, যা একটি নতুন ট্যাবে ডিফল্ট। যাইহোক, জাভাস্ক্রিপ্ট ব্যবহার করে, আমরা এই আচরণটিকে ওভাররাইড করতে পারি এবং একটি নিয়ন্ত্রিত পপআপ উইন্ডোতে লিঙ্কটি খুলতে পারি। এটি একই ব্রাউজিং সেশনের মধ্যে সামগ্রী প্রদর্শনে আরও নমনীয়তার অনুমতি দেয়।

বিস্তারিত তালিকা বিন্যাস উন্নত করতে JavaScript এবং SPFx ব্যবহার করার উপর ফোকাস সহ আমরা এই বৈশিষ্ট্যটি বিকাশের জন্য প্রয়োজনীয় পদক্ষেপগুলির মধ্য দিয়ে আপনাকে নিয়ে যাবো। আপনার SharePoint সাইটটি নির্বিঘ্ন এবং ব্যবহারকারী-বান্ধব নিশ্চিত করতে আমরা সমাধানের মধ্য দিয়ে চলার সাথে সাথে সাথে থাকুন।

SPFx-এ পপআপ উইন্ডো সমাধান বোঝা

উপরে তালিকাভুক্ত স্ক্রিপ্টগুলি একটি PnP আধুনিক অনুসন্ধান ওয়েবপার্ট (SPFx) এর মধ্যে লিঙ্কগুলির ডিফল্ট আচরণকে সামঞ্জস্য করে। ডিফল্টরূপে, লিঙ্কগুলি ব্যবহার করে target="_blank" একটি নতুন ট্যাবে খুলতে ট্যাগ করুন। যাইহোক, এখানে উদ্দেশ্য হল এই লিঙ্কগুলিকে একটি পপআপ উইন্ডোতে খোলা, যার ফলে ব্যবহারকারীর ইন্টারঅ্যাকশন বাড়বে। এটি সম্পন্ন করার জন্য, আমরা ব্যবহার করেছি window.open() ফাংশন, যা বিকাশকারীদের একটি নতুন ব্রাউজার উইন্ডো বা পপআপে URL খুলতে দেয়। এই ফাংশনটি নির্দিষ্ট পরামিতিগুলির সাথে সামঞ্জস্য করা যেতে পারে, যেমন প্রস্থ, উচ্চতা এবং অন্যান্য গুণাবলী (যেমন স্ক্রলবার বা পুনরায় পরিবর্তনযোগ্যতা), যাতে পপআপটি উদ্দেশ্য অনুসারে কাজ করে।

অ্যাঙ্কর ট্যাগের ডিফল্ট ক্লিক আচরণ ওভাররাইড করা পদ্ধতির একটি গুরুত্বপূর্ণ উপাদান। এটি দিয়ে করা হয় event.preventDefault(), যা লিঙ্কটিকে একটি নতুন ট্যাবে খুলতে বাধা দেয়। পরিবর্তে, আমরা লিঙ্কটিতে একটি ইভেন্ট লিসেনার সংযুক্ত করি, যা একটি কাস্টম ফাংশন সক্রিয় করে (এই ক্ষেত্রে, OpenInPopup()) যা ক্লিক ইভেন্ট পরিচালনা করে এবং একটি পপআপ উইন্ডোতে URL খোলে। এটি বিকাশকারীদের লিঙ্কের আচরণের উপর আরও নিয়ন্ত্রণ করতে দেয় এবং এর ফলে PnP আধুনিক অনুসন্ধান ওয়েবপার্টের মধ্যে আরও সামঞ্জস্যপূর্ণ ব্যবহারকারীর অভিজ্ঞতা পাওয়া যায়।

ফ্রন্ট-এন্ড আচরণের সাথে মোকাবিলা করার পাশাপাশি, আমরা SPFx এর বিল্ট-ইন ডেকোরেটর ব্যবহার করে একটি ব্যাকএন্ড পদ্ধতিও পরীক্ষা করেছি যেমন @ওভাররাইড. এই পদ্ধতিটি বিকাশকারীদের সরাসরি কাস্টম ওয়েবপার্টে জাভাস্ক্রিপ্ট সন্নিবেশ করতে সক্ষম করে, অনুসন্ধান ফলাফলের আচরণকে আরও সংশোধন করে। SPFx-এ রেন্ডারিং প্রক্রিয়া ওভাররাইড করা আমাদের জাভাস্ক্রিপ্ট কোড ইনজেক্ট করতে দেয় যা লিঙ্ক ক্লিকগুলি পরিচালনা করে এবং একটি পপআপ উইন্ডোতে প্রয়োজনীয় উপাদান খোলে। এই কৌশলটি সমাধানটিকে আরও মডুলার করে এবং একটি SharePoint পরিবেশের একাধিক ক্ষেত্র জুড়ে পুনরায় ব্যবহারযোগ্য করে তোলে, তাই রক্ষণাবেক্ষণের উন্নতি করে।

পপআপ বৈশিষ্ট্যটি একাধিক পরিবেশ এবং ব্রাউজার জুড়ে সঠিকভাবে কাজ করে তা নিশ্চিত করার জন্য ইউনিট টেস্টিং গুরুত্বপূর্ণ। ব্যবহার করে 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-এ ইভেন্ট হ্যান্ডলিং এবং ডাইনামিক জাভাস্ক্রিপ্ট ইনজেকশন অন্বেষণ করা

PnP Modern Search WebPart (SPFx) এর সাথে কাজ করার সময়, বিকাশকারীদের জন্য একটি দরকারী বৈশিষ্ট্য হ'ল লিঙ্কগুলির মতো উপাদানগুলি কীভাবে আচরণ করে তা গতিশীলভাবে সামঞ্জস্য করার ক্ষমতা। JavaScript ইভেন্ট হ্যান্ডলিং ব্যবহার ব্যবহারকারীর মিথস্ক্রিয়া ব্যক্তিগতকরণের জন্য বিকল্পের আধিক্য প্রদান করে। লিঙ্ক ক্লিক ক্যাপচার এবং নিয়ন্ত্রণ করতে ইভেন্ট শ্রোতাদের ব্যবহার করা একটি আরও ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করে। ক্লিক ইভেন্ট ক্যাপচার করে, আমরা স্বাভাবিক আচরণ ওভাররাইড করতে পারি এবং একটি নিয়ন্ত্রিত পপআপ উইন্ডোতে URL খুলতে পারি। এটি ব্যবহারকারীর বর্তমান ট্যাব বা উইন্ডোতে বিরক্ত না করে একটি মসৃণ রূপান্তর নিশ্চিত করে।

SPFx ওয়েবপার্টে লিঙ্কগুলি কাস্টমাইজ করার জন্যও গতিশীলভাবে জাভাস্ক্রিপ্ট কোড সন্নিবেশ করা প্রয়োজন৷ SharePoint Framework (SPFx) এর মত পদ্ধতি প্রদান করে @ওভাররাইড এবং রেন্ডার() এটি সম্পন্ন করার জন্য। কাস্টম জাভাস্ক্রিপ্ট ঢোকানোর মাধ্যমে, ডেভেলপাররা ওয়েবপার্টে উল্লেখযোগ্য পরিবর্তন না করেই সার্চ ফলাফলের আইটেমগুলির আচরণ পরিবর্তন করতে পারে। এই নমনীয়তা সমস্ত অনুসন্ধান ফলাফলের লিঙ্কগুলিতে বিশ্বব্যাপী সামঞ্জস্য করা সহজ করে তোলে, এটি নিশ্চিত করে যে পছন্দসই আচরণ - যেমন একটি পপআপ উইন্ডোতে খোলা - প্ল্যাটফর্ম জুড়ে অভিন্ন।

পরিশেষে, কর্মক্ষমতা এবং ব্যবহারকারীর অভিজ্ঞতা যেকোন ওয়েব-ভিত্তিক সিস্টেমে গুরুত্বপূর্ণ বিষয়, এবং এখানেও এটি সত্য। জাভাস্ক্রিপ্টের ব্যবহার অপ্টিমাইজ করে এবং সম্পদ-নিবিড় কার্যকলাপ সীমিত করে, আমরা নিশ্চিত করতে পারি যে এই কাস্টমাইজেশনগুলির পৃষ্ঠা লোডের সময় বা প্রতিক্রিয়াশীলতার উপর কোন উল্লেখযোগ্য প্রভাব নেই। দক্ষ জাভাস্ক্রিপ্ট ব্যবহার, ব্যাকএন্ড SPFx পরিবর্তনের সাথে মিলিত, কর্মক্ষমতা ত্যাগ না করে উচ্চ স্তরের নমনীয়তা প্রদান করে, যার ফলে শেয়ারপয়েন্ট প্ল্যাটফর্ম জুড়ে একটি নিরবচ্ছিন্ন ব্যবহারকারীর অভিজ্ঞতা পাওয়া যায়।