à¤à¤¾à¤¯ à¤à¤°à¤¤à¥ à¥§ à¤à¤°à¥?

PnP मॉडर्न सर्च वेबपार्ट

Mia Chevalier

सोमवार, २३ सप्टेंबर, २०२४ रोजी १०:१२:४२ म.पू.

SPFx मधील सानुकूल पॉपअप लिंकसह वापरकर्त्याचा अनुभव वाढवणे

आधुनिक शेअरपॉईंट डेव्हलपमेंटमध्ये, कॉन्फिगर करण्यायोग्य शोध परिणाम प्रदान करण्यासाठी PnP आधुनिक शोध वेबपार्ट (SPFx) वापरल्याने वापरकर्त्याच्या अनुभवात लक्षणीय सुधारणा होऊ शकते. दुवे कसे उघडायचे ते नियंत्रित करणे हे विकसकांमध्ये एक लोकप्रिय वैशिष्ट्य आहे, विशेषत: "तपशीलवार सूची" लेआउटसह. साधारणपणे, लिंक्स नवीन टॅबमध्ये उघडतात, परंतु आम्हाला ते पॉपअप विंडोमध्ये उघडायचे असल्यास काय?

या पोस्टमध्ये, आम्ही PnP आधुनिक शोध वेबपार्टची लिंक वर्तन बदलून ही कार्यक्षमता कशी लागू करायची ते पाहू. नवीन टॅबमध्ये शोध परिणाम उघडण्याऐवजी, सानुकूलित पॉपअप विंडोमध्ये लिंक उघडण्याची सक्ती कशी करावी हे आम्ही दाखवू, परिणामी वापरकर्ता अनुभव अधिक एकात्मिक होईल.

जेव्हा तुम्ही `` सारखे सूत्र वापरता तेव्हा आव्हान निर्माण होते, जे नवीन टॅबवर डीफॉल्ट असते. तथापि, JavaScript वापरून, आम्ही हे वर्तन ओव्हरराइड करू शकतो आणि नियंत्रित पॉपअप विंडोमध्ये लिंक उघडू शकतो. हे समान ब्राउझिंग सत्रामध्ये सामग्री प्रदर्शित करण्यासाठी अधिक लवचिकतेसाठी अनुमती देते.

तपशीलवार सूची मांडणी सुधारण्यासाठी JavaScript आणि SPFx वापरण्यावर लक्ष केंद्रित करून, हे वैशिष्ट्य विकसित करण्यासाठी आवश्यक असलेल्या पायऱ्या आम्ही तुम्हाला सांगू. तुमची SharePoint साइट निर्बाध आणि वापरकर्ता-अनुकूल आहे याची खात्री करण्यासाठी आम्ही उपाय शोधत असताना संपर्कात रहा.

आज्ञा	वापराचे उदाहरण
window.open()	ही आज्ञा नवीन ब्राउझर विंडो किंवा टॅब उघडेल. ही पद्धत विशिष्ट आकारमान आणि गुणधर्मांसह एक पॉपअप विंडो उघडते, जसे की रुंदी, उंची आणि स्क्रोलबार.
event.preventDefault()	क्लिक केलेल्या दुव्याचे डीफॉल्ट वर्तन प्रतिबंधित करते, जे समान किंवा नवीन टॅबमध्ये URL उघडण्यासाठी आहे. हे आम्हाला दुवा कसे कार्य करते ते सानुकूलित करण्यास अनुमती देते, जसे की त्याऐवजी पॉपअप उघडणे.
querySelectorAll()	डेटा-पॉपअप विशेषता सर्व अँकर घटक निवडते (). ही पद्धत नोडलिस्ट परत करते, जी आम्हाला एकाच वेळी अनेक घटकांवर इव्हेंट श्रोते लागू करण्यास अनुमती देते.
forEach()	querySelectorAll() द्वारे निर्मित NodeList मधील प्रत्येक एंट्री एक क्रिया प्राप्त करते (उदाहरणार्थ, इव्हेंट श्रोता संलग्न करणे). हे PnP आधुनिक शोध मधील अनेक डायनॅमिक लिंक घटक व्यवस्थापित करण्यासाठी लागू होते.
addEventListener()	हे तंत्र openInPopup() फंक्शनला चालना देणाऱ्या प्रत्येक लिंकवर क्लिक इव्हेंट श्रोता जोडते. डीफॉल्ट क्लिक वर्तन ओव्हरराइड करण्यासाठी हे आवश्यक आहे.
import { override }	हा डेकोरेटर SharePoint Framework (SPFx) चा भाग आहे आणि SPFx WebParts चे डीफॉल्ट वर्तन ओव्हरराइड करण्यासाठी वापरले जाते. हे विशिष्ट सानुकूलनास सक्षम करते, जसे की पॉपअप कार्यक्षमता प्रदान करण्यासाठी JavaScript इंजेक्ट करणे.
@override	SPFx मध्ये, डेकोरेटर सूचित करतो की पद्धत किंवा गुणधर्म कार्यक्षमता ओव्हरराइड करते. SharePoint घटकांच्या वर्तनात सुधारणा करताना हे आवश्यक आहे.
spyOn()	चमेलीसह युनिट चाचणी दरम्यान फंक्शन कॉलचे निरीक्षण करते. या परिस्थितीमध्ये, चाचणी दरम्यान पॉपअप योग्यरित्या सुरू होईल याची हमी देण्यासाठी window.open() सह वापरले जाते.
expect()	ही कमांड जस्मिनमधील युनिट चाचणीसाठी वापरली जाते. तो विंडो.open() योग्य आर्ग्युमेंट्ससह कॉल केला होता हे तपासते, पॉपअप इच्छित सेटिंग्जसह दिसेल याची हमी देते.

SPFx मधील पॉपअप विंडो सोल्यूशन समजून घेणे

वर सूचीबद्ध केलेल्या स्क्रिप्ट PnP मॉडर्न सर्च वेबपार्ट (SPFx) मधील लिंक्सचे डीफॉल्ट वर्तन समायोजित करतात. डीफॉल्टनुसार, दुवे वापरतात target="_blank" नवीन टॅबमध्ये उघडण्यासाठी टॅग. तथापि, या लिंक्स पॉपअप विंडोमध्ये उघडण्याचा येथे उद्देश आहे, ज्यामुळे वापरकर्ता संवाद वाढेल. हे पूर्ण करण्यासाठी, आम्ही वापरले window.open() फंक्शन, जे विकसकांना नवीन ब्राउझर विंडो किंवा पॉपअपमध्ये URL उघडू देते. हे कार्य विशिष्ट पॅरामीटर्ससह समायोजित केले जाऊ शकते, जसे की रुंदी, उंची आणि इतर गुणधर्म (जसे की स्क्रोलबार किंवा आकार बदलण्याची क्षमता), हे सुनिश्चित करण्यासाठी की पॉपअप हेतूनुसार कार्य करते.

अँकर टॅगचे डीफॉल्ट क्लिक वर्तन ओव्हरराइड करणे हा दृष्टिकोनाचा एक महत्त्वाचा घटक आहे. यासह केले जाते event.preventDefault(), जे लिंकला नवीन टॅबमध्ये उघडण्यापासून प्रतिबंधित करते. त्याऐवजी, आम्ही दुव्यावर इव्हेंट श्रोता संलग्न करतो, जे सानुकूल कार्य सक्रिय करते (या प्रकरणात, openInPopup()) जे क्लिक इव्हेंट हाताळते आणि पॉपअप विंडोमध्ये URL उघडते. हे विकसकांना दुव्याच्या वर्तनावर अधिक नियंत्रण ठेवण्यास अनुमती देते आणि परिणामी PnP आधुनिक शोध वेबपार्टमध्ये अधिक सुसंगत वापरकर्ता अनुभव मिळतो.

फ्रंट-एंड वर्तन हाताळण्याव्यतिरिक्त, आम्ही SPFx चे अंगभूत डेकोरेटर वापरून बॅकएंड दृष्टिकोन देखील तपासला जसे की @override. हा दृष्टीकोन विकसकांना सानुकूल वेबपार्ट्समध्ये थेट JavaScript घालण्यास सक्षम करतो, शोध परिणामांच्या वर्तनात आणखी सुधारणा करतो. SPFx मध्ये रेंडरिंग प्रक्रिया ओव्हरराइड केल्याने आम्हाला JavaScript कोड इंजेक्ट करण्याची परवानगी मिळते जी लिंक क्लिक हाताळते आणि पॉपअप विंडोमध्ये आवश्यक सामग्री उघडते. हे तंत्र सोल्यूशनला अधिक मॉड्यूलर बनवते आणि SharePoint वातावरणाच्या अनेक भागात पुन्हा वापरण्यायोग्य बनवते, त्यामुळे देखभाल सुधारते.

पॉपअप वैशिष्ट्य एकाधिक वातावरण आणि ब्राउझरमध्ये योग्यरित्या कार्य करते हे सुनिश्चित करण्यासाठी युनिट चाचणी महत्त्वपूर्ण आहे. वापरत आहे spyOn() जास्मीन चाचणी फ्रेमवर्कमध्ये हे प्रमाणित करते की window.open() पद्धत योग्य वितर्कांसह अंमलात आणली जाते. चाचणीचा हा प्रकार विकास प्रक्रियेच्या सुरुवातीला संभाव्य समस्या ओळखतो आणि पॉपअप विंडो नियोजित प्रमाणे कार्य करेल याची हमी देतो. हे समाधान SharePoint च्या PnP आधुनिक शोध वेबपार्टमध्ये फ्रंट-एंड इव्हेंट हाताळणी, बॅकएंड कस्टमायझेशन आणि युनिट चाचणी एकत्रित करून वापरकर्ता परस्परसंवाद मजबूत करते.

उपाय १: पॉपअप विंडो तयार करण्यासाठी JavaScript `window.open` वापरणे

नवीन टॅबमध्ये लिंक उघडण्याच्या डीफॉल्ट वर्तनाला पॉपअप विंडोसह बदलण्यासाठी हा दृष्टिकोन JavaScript वापरतो, जो SharePoint संदर्भात SPFx सह तयार केलेल्या डायनॅमिक फ्रंट-एंड सोल्यूशन्ससाठी आदर्श आहे.

<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>

उपाय २: इनलाइन जावास्क्रिप्ट थेट लिंक टॅगमध्ये जोडणे

ही पद्धत HTML लिंक टॅगमध्ये JavaScript इनलाइन एम्बेड करते, ज्यामुळे काही बाह्य अवलंबित्व असलेल्या लाइटवेट डायनॅमिक फ्रंट-एंड सिस्टमसाठी ते आदर्श बनते.

१

उपाय 3: JavaScript इंजेक्शनसह SPFx वापरून बॅकएंड ॲप्रोच

हा दृष्टिकोन सानुकूल वेबपार्टमध्ये JavaScript इंजेक्ट करण्यासाठी SharePoint Framework (SPFx) वापरतो, JavaScript पद्धती वापरून पॉपअप विंडोमध्ये लिंक उघडण्यास अनुमती देतो.

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

JavaScript पॉपअप वर्तनासाठी युनिट चाचणी

युनिट चाचण्या खात्री देऊ शकतात की पॉपअप कार्यक्षमता ब्राउझर आणि वातावरणात सुसंगत आहे. फ्रंट-एंड प्रमाणीकरणासाठी येथे मूलभूत चमेली चाचणी आहे.

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

PnP मॉडर्न सर्च वेबपार्ट (SFx) मध्ये पॉपअप विंडोमध्ये लिंक्स कसे उघडायचे

SPFx मधील सानुकूल पॉपअप लिंकसह वापरकर्त्याचा अनुभव वाढवणे

संदर्भ आणि संसाधने