SPFx-এ কাস্টম পপআপ লিঙ্কগুলির সাথে ব্যবহারকারীর অভিজ্ঞতা বৃদ্ধি করা
আধুনিক শেয়ারপয়েন্ট ডেভেলপমেন্টে, কনফিগারযোগ্য অনুসন্ধান ফলাফল প্রদানের জন্য PnP আধুনিক অনুসন্ধান ওয়েবপার্ট (SPFx) ব্যবহার করা ব্যবহারকারীর অভিজ্ঞতাকে উল্লেখযোগ্যভাবে উন্নত করতে পারে। লিঙ্কগুলি কীভাবে খোলা হয় তা নিয়ন্ত্রণ করা বিকাশকারীদের মধ্যে একটি জনপ্রিয় বৈশিষ্ট্য, বিশেষ করে "বিশদ তালিকা" লেআউটের সাথে। সাধারণত, লিঙ্কগুলি একটি নতুন ট্যাবে খোলা হয়, কিন্তু আমরা যদি সেগুলিকে একটি পপআপ উইন্ডোতে খুলতে চাই তবে কী হবে?
এই পোস্টে, আমরা PnP আধুনিক অনুসন্ধান ওয়েবপার্টের লিঙ্ক আচরণ পরিবর্তন করে কিভাবে এই কার্যকারিতা বাস্তবায়ন করতে হয় তা দেখব। একটি নতুন ট্যাবে অনুসন্ধান ফলাফল খোলার পরিবর্তে, আমরা দেখাব কিভাবে লিঙ্কটিকে একটি কাস্টমাইজড পপআপ উইন্ডোতে খুলতে বাধ্য করা যায়, যার ফলে ব্যবহারকারীর অভিজ্ঞতা আরও একীভূত হয়৷
চ্যালেঞ্জ দেখা দেয় যখন আপনি `` এর মতো একটি সূত্র ব্যবহার করেন, যা একটি নতুন ট্যাবে ডিফল্ট। যাইহোক, জাভাস্ক্রিপ্ট ব্যবহার করে, আমরা এই আচরণটিকে ওভাররাইড করতে পারি এবং একটি নিয়ন্ত্রিত পপআপ উইন্ডোতে লিঙ্কটি খুলতে পারি। এটি একই ব্রাউজিং সেশনের মধ্যে সামগ্রী প্রদর্শনে আরও নমনীয়তার অনুমতি দেয়।
বিস্তারিত তালিকা বিন্যাস উন্নত করতে JavaScript এবং SPFx ব্যবহার করার উপর ফোকাস সহ আমরা এই বৈশিষ্ট্যটি বিকাশের জন্য প্রয়োজনীয় পদক্ষেপগুলির মধ্য দিয়ে আপনাকে নিয়ে যাবো। আপনার SharePoint সাইটটি নির্বিঘ্ন এবং ব্যবহারকারী-বান্ধব নিশ্চিত করতে আমরা সমাধানের মধ্য দিয়ে চলার সাথে সাথে সাথে থাকুন।
| আদেশ | ব্যবহারের উদাহরণ |
|---|---|
| window.open() | এই কমান্ডটি একটি নতুন ব্রাউজার উইন্ডো বা ট্যাব খুলবে। এই পদ্ধতিটি নির্দিষ্ট মাত্রা এবং বৈশিষ্ট্য সহ একটি পপআপ উইন্ডো খোলে, যেমন প্রস্থ, উচ্চতা এবং স্ক্রলবার। |
| event.preventDefault() | একটি ক্লিক করা লিঙ্কের ডিফল্ট আচরণ প্রতিরোধ করে, যা একই বা নতুন ট্যাবে URL খুলতে হয়। এটি আমাদের লিঙ্কটি কীভাবে কাজ করে তা কাস্টমাইজ করতে দেয়, যেমন পরিবর্তে একটি পপআপ খোলা। |
| querySelectorAll() | ডেটা-পপআপ বৈশিষ্ট্য সমস্ত অ্যাঙ্কর উপাদান নির্বাচন করে () এই পদ্ধতিটি একটি নোডলিস্ট প্রদান করে, যা আমাদের একই সাথে একাধিক উপাদানে ইভেন্ট শ্রোতাদের প্রয়োগ করতে দেয়। |
| forEach() | querySelectorAll() দ্বারা উত্পাদিত NodeList-এর প্রতিটি এন্ট্রি একটি অ্যাকশন পায় (উদাহরণস্বরূপ, একটি ইভেন্ট লিসেনার সংযুক্ত করা)। এটি PnP আধুনিক অনুসন্ধানে অনেক গতিশীল লিঙ্ক উপাদান পরিচালনার ক্ষেত্রে প্রযোজ্য। |
| addEventListener() | এই কৌশলটি প্রতিটি লিঙ্কে একটি ক্লিক ইভেন্ট লিসেনার যোগ করে যা openInPopup() ফাংশনকে ট্রিগার করে। ডিফল্ট ক্লিক আচরণ ওভাররাইড করার জন্য এটি প্রয়োজনীয়। |
| import { override } | এই ডেকোরেটরটি SharePoint Framework (SPFx) এর অংশ এবং SPFx ওয়েবপার্টের ডিফল্ট আচরণকে ওভাররাইড করতে ব্যবহৃত হয়। এটি নির্দিষ্ট কাস্টমাইজেশনের জন্য সক্ষম করে, যেমন পপআপ কার্যকারিতা প্রদান করতে জাভাস্ক্রিপ্ট ইনজেকশন করা। |
| @override | SPFx-এ, একটি ডেকোরেটর নির্দেশ করে যে একটি পদ্ধতি বা সম্পত্তি কার্যকারিতা ওভাররাইড করে। SharePoint উপাদানগুলির আচরণ পরিবর্তন করার সময় এটি প্রয়োজনীয়। |
| spyOn() | জেসমিনের সাথে ইউনিট পরীক্ষার সময় ফাংশন কল মনিটর করে। এই পরিস্থিতিতে, এটি window.open() এর সাথে ব্যবহার করা হয় গ্যারান্টি দিতে যে পপআপটি পরীক্ষার সময় যথাযথভাবে চালু হয়েছে। |
| expect() | এই কমান্ডটি জেসমিনে ইউনিট পরীক্ষার জন্য ব্যবহৃত হয়। এটি পরীক্ষা করে যে window.open() কে সঠিক আর্গুমেন্ট সহ কল করা হয়েছে, নিশ্চিত করে যে পপআপটি পছন্দসই সেটিংসের সাথে উপস্থিত হবে। |
SPFx-এ পপআপ উইন্ডো সমাধান বোঝা
উপরে তালিকাভুক্ত স্ক্রিপ্টগুলি একটি PnP আধুনিক অনুসন্ধান ওয়েবপার্ট (SPFx) এর মধ্যে লিঙ্কগুলির ডিফল্ট আচরণকে সামঞ্জস্য করে। ডিফল্টরূপে, লিঙ্কগুলি ব্যবহার করে একটি নতুন ট্যাবে খুলতে ট্যাগ করুন। যাইহোক, এখানে উদ্দেশ্য হল এই লিঙ্কগুলিকে একটি পপআপ উইন্ডোতে খোলা, যার ফলে ব্যবহারকারীর ইন্টারঅ্যাকশন বাড়বে। এটি সম্পন্ন করার জন্য, আমরা ব্যবহার করেছি ফাংশন, যা বিকাশকারীদের একটি নতুন ব্রাউজার উইন্ডো বা পপআপে URL খুলতে দেয়। এই ফাংশনটি নির্দিষ্ট পরামিতিগুলির সাথে সামঞ্জস্য করা যেতে পারে, যেমন প্রস্থ, উচ্চতা এবং অন্যান্য গুণাবলী (যেমন স্ক্রলবার বা পুনরায় পরিবর্তনযোগ্যতা), যাতে পপআপটি উদ্দেশ্য অনুসারে কাজ করে।
অ্যাঙ্কর ট্যাগের ডিফল্ট ক্লিক আচরণ ওভাররাইড করা পদ্ধতির একটি গুরুত্বপূর্ণ উপাদান। এটি দিয়ে করা হয় , যা লিঙ্কটিকে একটি নতুন ট্যাবে খুলতে বাধা দেয়। পরিবর্তে, আমরা লিঙ্কটিতে একটি ইভেন্ট লিসেনার সংযুক্ত করি, যা একটি কাস্টম ফাংশন সক্রিয় করে (এই ক্ষেত্রে, ) যা ক্লিক ইভেন্ট পরিচালনা করে এবং একটি পপআপ উইন্ডোতে URL খোলে। এটি বিকাশকারীদের লিঙ্কের আচরণের উপর আরও নিয়ন্ত্রণ করতে দেয় এবং এর ফলে PnP আধুনিক অনুসন্ধান ওয়েবপার্টের মধ্যে আরও সামঞ্জস্যপূর্ণ ব্যবহারকারীর অভিজ্ঞতা পাওয়া যায়।
ফ্রন্ট-এন্ড আচরণের সাথে মোকাবিলা করার পাশাপাশি, আমরা SPFx এর বিল্ট-ইন ডেকোরেটর ব্যবহার করে একটি ব্যাকএন্ড পদ্ধতিও পরীক্ষা করেছি যেমন . এই পদ্ধতিটি বিকাশকারীদের সরাসরি কাস্টম ওয়েবপার্টে জাভাস্ক্রিপ্ট সন্নিবেশ করতে সক্ষম করে, অনুসন্ধান ফলাফলের আচরণকে আরও সংশোধন করে। SPFx-এ রেন্ডারিং প্রক্রিয়া ওভাররাইড করা আমাদের জাভাস্ক্রিপ্ট কোড ইনজেক্ট করতে দেয় যা লিঙ্ক ক্লিকগুলি পরিচালনা করে এবং একটি পপআপ উইন্ডোতে প্রয়োজনীয় উপাদান খোলে। এই কৌশলটি সমাধানটিকে আরও মডুলার করে এবং একটি SharePoint পরিবেশের একাধিক ক্ষেত্র জুড়ে পুনরায় ব্যবহারযোগ্য করে তোলে, তাই রক্ষণাবেক্ষণের উন্নতি করে।
পপআপ বৈশিষ্ট্যটি একাধিক পরিবেশ এবং ব্রাউজার জুড়ে সঠিকভাবে কাজ করে তা নিশ্চিত করার জন্য ইউনিট টেস্টিং গুরুত্বপূর্ণ। ব্যবহার করে একটি জেসমিন টেস্টিং ফ্রেমওয়ার্ক যাচাই করে যে পদ্ধতিটি সঠিক আর্গুমেন্ট সহ কার্যকর করা হয়। পরীক্ষার এই ফর্মটি বিকাশ প্রক্রিয়ার প্রথম দিকে সম্ভাব্য সমস্যাগুলি সনাক্ত করে এবং পপআপ উইন্ডোজ পরিকল্পনা অনুযায়ী কাজ করার গ্যারান্টি দেয়। এই সমাধানটি ফ্রন্ট-এন্ড ইভেন্ট হ্যান্ডলিং, ব্যাকএন্ড কাস্টমাইজেশন এবং ইউনিট টেস্টিংকে একীভূত করে SharePoint-এর PnP আধুনিক অনুসন্ধান ওয়েবপার্টে ব্যবহারকারীর মিথস্ক্রিয়াকে শক্তিশালী করে।
সমাধান 1: একটি পপআপ উইন্ডো তৈরি করতে JavaScript `window.open` ব্যবহার করে
এই পদ্ধতিটি একটি পপআপ উইন্ডোর সাথে একটি নতুন ট্যাবে একটি লিঙ্ক খোলার ডিফল্ট আচরণকে প্রতিস্থাপন করতে JavaScript ব্যবহার করে, যা SharePoint প্রসঙ্গে SPFx এর সাথে তৈরি ডায়নামিক ফ্রন্ট-এন্ড সমাধানগুলির জন্য আদর্শ।
<script>function openInPopup(url) {// Define popup window featuresconst features = 'width=800,height=600,resizable=yes,scrollbars=yes';// Open URL in popupwindow.open(url, '_blank', features);}// Override link behaviordocument.querySelectorAll('a[data-popup="true"]').forEach(function (link) {link.addEventListener('click', function (event) {event.preventDefault(); // Prevent default link behavioropenInPopup(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>
সমাধান 2: সরাসরি লিঙ্ক ট্যাগে ইনলাইন জাভাস্ক্রিপ্ট যোগ করা
এই পদ্ধতিটি এইচটিএমএল লিঙ্ক ট্যাগের মধ্যে জাভাস্ক্রিপ্ট ইনলাইন এম্বেড করে, এটি একটি লাইটওয়েট ডাইনামিক ফ্রন্ট-এন্ড সিস্টেমের জন্য আদর্শ করে যার কিছু বাহ্যিক নির্ভরতা রয়েছে।
<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.
সমাধান 3: জাভাস্ক্রিপ্ট ইনজেকশন সহ SPFx ব্যবহার করে ব্যাকএন্ড অ্যাপ্রোচ
এই পদ্ধতিটি একটি কাস্টম ওয়েবপার্টে জাভাস্ক্রিপ্ট ইনজেক্ট করতে SharePoint Framework (SPFx) ব্যবহার করে, যা জাভাস্ক্রিপ্ট পদ্ধতি ব্যবহার করে একটি পপআপ উইন্ডোতে লিঙ্কগুলি খোলার অনুমতি দেয়।
import { override } from '@microsoft/decorators';import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';export default class PopupWebPart extends BaseClientSideWebPart {@overridepublic 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 পরিবর্তনের সাথে মিলিত, কর্মক্ষমতা ত্যাগ না করে উচ্চ স্তরের নমনীয়তা প্রদান করে, যার ফলে শেয়ারপয়েন্ট প্ল্যাটফর্ম জুড়ে একটি নিরবচ্ছিন্ন ব্যবহারকারীর অভিজ্ঞতা পাওয়া যায়।
- আমি কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি পপআপ উইন্ডোতে একটি লিঙ্ক খুলব?
- আপনি ব্যবহার করতে পারেন জাভাস্ক্রিপ্টে ফাংশন। এই ফাংশনটি আপনাকে একটি নতুন ব্রাউজার উইন্ডো খুলতে বা নির্দিষ্ট বৈশিষ্ট্য যেমন আকার এবং স্ক্রোল বার সহ পপআপ করতে দেয়।
- কি করে করতে?
- দ পদ্ধতি একটি ইভেন্টকে তার ডিফল্ট ক্রিয়া করতে বাধা দেয়। এই ক্ষেত্রে, এটি একটি পপআপ প্রদর্শনের মতো নির্দিষ্ট ক্রিয়াকলাপের অনুমতি দেওয়ার সময় লিঙ্কটিকে একটি নতুন ট্যাবে খুলতে বাধা দেয়।
- আমি কিভাবে SPFx-এ অসংখ্য লিঙ্কে কাস্টম আচরণ প্রয়োগ করব?
- ব্যবহার করে জাভাস্ক্রিপ্টে, আপনি একাধিক উপাদান বাছাই করতে পারেন এবং তাদের সাথে ইভেন্ট শ্রোতাদের সংযুক্ত করতে পারেন, নিশ্চিত করে যে তারা সবাই একই আচরণ অনুসরণ করে।
- আমি কিভাবে SPFx ওয়েবপার্টের ডিফল্ট রেন্ডারিং ওভাররাইড করব?
- SPFx WebParts এর আচরণ সামঞ্জস্য করতে, ব্যবহার করুন ডেকোরেটর এটি আপনাকে সরাসরি ওয়েবপার্টের রেন্ডারিং প্রক্রিয়ায় কাস্টম জাভাস্ক্রিপ্ট ইনজেক্ট করতে সক্ষম করে।
- একটি পপআপ উইন্ডো সঠিকভাবে খোলে কিনা তা নির্ধারণ করার সেরা কৌশলটি কী?
- জেসমিনের মতো একটি কাঠামোতে ইউনিট পরীক্ষা ব্যবহার করে, আপনি ব্যবহার করতে পারেন যদি নিরীক্ষণ করতে ফাংশনটি প্রত্যাশিত পরামিতিগুলির সাথে যথাযথভাবে বলা হয়।
PnP মডার্ন সার্চ ওয়েবপার্ট (SPFx) এর মধ্যে জাভাস্ক্রিপ্ট ব্যবহার করে পপআপ উইন্ডোতে লিঙ্কগুলি খোলার উপায় কাস্টমাইজ করা যেতে পারে। একটি নিয়ন্ত্রিত পপআপে বিস্তারিত বিষয়বস্তুতে অ্যাক্সেস প্রদান করার সময় এই পরিবর্তনটি ব্যবহারকারীদের বর্তমান ট্যাবে নিযুক্ত রাখার মাধ্যমে মিথস্ক্রিয়াকে উন্নত করে।
সামঞ্জস্যপূর্ণ আচরণ বজায় রাখতে, কৌশলগুলি ব্যবহার করুন এবং গতিশীলভাবে জাভাস্ক্রিপ্ট SPFx ওয়েবপার্টে ইনজেক্ট করুন। উপরন্তু, ইউনিট টেস্টিং নিশ্চিত করতে সাহায্য করে যে এই পরিবর্তনগুলি অনেক প্রেক্ষাপটে ভালভাবে কাজ করে, যার ফলে SharePoint অনুসন্ধান ফলাফল কাস্টমাইজেশনের জন্য একটি নির্ভরযোগ্য, ব্যবহারকারী-বান্ধব সমাধান পাওয়া যায়।
- PnP মডার্ন সার্চ ওয়েবপার্ট (SPFx) এবং কাস্টমাইজিং লিঙ্ক আচরণ সম্পর্কিত তথ্য অফিসিয়াল ডকুমেন্টেশন থেকে নেওয়া হয়েছিল। আরো বিস্তারিত জানার জন্য, দেখুন PnP আধুনিক অনুসন্ধান GitHub সংগ্রহস্থল .
- জাভাস্ক্রিপ্ট পদ্ধতি ব্যবহার করার নির্দেশিকা যেমন এবং ইভেন্ট শ্রোতাদের থেকে উল্লেখ করা হয়েছে MDN ওয়েব ডক্স জাভাস্ক্রিপ্টের জন্য।
- শেয়ারপয়েন্ট ফ্রেমওয়ার্ক (SPFx) কাস্টমাইজেশন সম্পর্কে বিশদ বিবরণ, যার মধ্যে জাভাস্ক্রিপ্ট ইনজেকশন এবং , পাওয়া যাবে শেয়ারপয়েন্ট ফ্রেমওয়ার্ক ওভারভিউ .