à¤à¥à¤¯à¤¾ à¤à¤°à¤¤à¤¾ à¤¹à¥ event.preventDefault() à¤à¤°à¤¨à¤¾?

पीएनपी मॉडर्न सर्च

Mia Chevalier

सोमवार, 23 सितंबर 2024 को 9:38:30 am

एसपीएफ़एक्स में कस्टम पॉपअप लिंक के साथ उपयोगकर्ता अनुभव को बढ़ाना

आधुनिक SharePoint विकास में, कॉन्फ़िगर करने योग्य खोज परिणाम प्रदान करने के लिए PnP मॉडर्न सर्च वेबपार्ट (SPFx) का उपयोग करने से उपयोगकर्ता अनुभव में काफी सुधार हो सकता है। लिंक कैसे खुलें इसे नियंत्रित करना डेवलपर्स के बीच एक लोकप्रिय सुविधा है, खासकर "विस्तृत सूची" लेआउट के साथ। आम तौर पर, लिंक एक नए टैब में खुलते हैं, लेकिन अगर हम उन्हें पॉपअप विंडो में खोलना चाहें तो क्या होगा?

इस पोस्ट में, हम देखेंगे कि PnP मॉडर्न सर्च वेबपार्ट के लिंक व्यवहार को बदलकर इस कार्यक्षमता को कैसे लागू किया जाए। खोज परिणामों को एक नए टैब में खोलने के बजाय, हम दिखाएंगे कि लिंक को अनुकूलित पॉपअप विंडो में खोलने के लिए कैसे बाध्य किया जाए, जिसके परिणामस्वरूप अधिक एकीकृत उपयोगकर्ता अनुभव प्राप्त होगा।

चुनौती तब उत्पन्न होती है जब आप `` जैसे फ़ॉर्मूले का उपयोग करते हैं, जो एक नए टैब पर डिफ़ॉल्ट होता है। हालाँकि, जावास्क्रिप्ट का उपयोग करके, हम इस व्यवहार को ओवरराइड कर सकते हैं और नियंत्रित पॉपअप विंडो में लिंक खोल सकते हैं। यह एक ही ब्राउज़िंग सत्र के भीतर सामग्री प्रदर्शित करने में अधिक लचीलेपन की अनुमति देता है।

विस्तृत सूची लेआउट को बेहतर बनाने के लिए जावास्क्रिप्ट और एसपीएफ़एक्स का उपयोग करने पर ध्यान केंद्रित करते हुए, हम आपको इस सुविधा को विकसित करने के लिए आवश्यक चरणों के बारे में बताएंगे। यह सुनिश्चित करने के लिए कि आपकी SharePoint साइट निर्बाध और उपयोगकर्ता के अनुकूल है, हम समाधान के माध्यम से चलते रहें, हमारे साथ बने रहें।

आज्ञा	उपयोग का उदाहरण
window.open()	यह कमांड एक नई ब्राउज़र विंडो या टैब खोलेगा। यह विधि कुछ आयामों और गुणों, जैसे चौड़ाई, ऊंचाई और स्क्रॉलबार के साथ एक पॉपअप विंडो खोलती है।
event.preventDefault()	क्लिक किए गए लिंक के डिफ़ॉल्ट व्यवहार को रोकता है, जो URL को उसी या नए टैब में खोलना है। यह हमें यह अनुकूलित करने की अनुमति देता है कि लिंक कैसे कार्य करता है, जैसे कि इसके बजाय एक पॉपअप खोलना।
querySelectorAll()	डेटा-पॉपअप विशेषता सभी एंकर तत्वों का चयन करती है (). यह विधि एक नोडलिस्ट लौटाती है, जो हमें इवेंट श्रोताओं को एक साथ कई घटकों पर लागू करने की अनुमति देती है।
forEach()	querySelectorAll() द्वारा निर्मित NodeList में प्रत्येक प्रविष्टि को एक क्रिया प्राप्त होती है (उदाहरण के लिए, एक ईवेंट श्रोता को संलग्न करना)। यह पीएनपी मॉडर्न सर्च में कई गतिशील लिंक तत्वों को प्रबंधित करने पर लागू होता है।
addEventListener()	यह तकनीक प्रत्येक लिंक पर एक क्लिक इवेंट श्रोता जोड़ती है जो openInPopup() फ़ंक्शन को ट्रिगर करती है। डिफ़ॉल्ट क्लिक व्यवहार को ओवरराइड करने के लिए यह आवश्यक है।
import { override }	यह डेकोरेटर SharePoint Framework (SPFx) का हिस्सा है और इसका उपयोग SPFx वेबपार्ट्स के डिफ़ॉल्ट व्यवहार को ओवरराइड करने के लिए किया जाता है। यह विशिष्ट अनुकूलन के लिए सक्षम बनाता है, जैसे पॉपअप कार्यक्षमता प्रदान करने के लिए जावास्क्रिप्ट को इंजेक्ट करना।
@override	एसपीएफ़एक्स में, एक डेकोरेटर इंगित करता है कि एक विधि या संपत्ति कार्यक्षमता को ओवरराइड करती है। SharePoint घटकों के व्यवहार को संशोधित करते समय यह आवश्यक है।
spyOn()	जैस्मीन के साथ यूनिट परीक्षण के दौरान फ़ंक्शन कॉल पर नज़र रखता है। इस परिदृश्य में, इसका उपयोग window.open() के साथ यह गारंटी देने के लिए किया जाता है कि परीक्षण के दौरान पॉपअप उचित रूप से लॉन्च किया गया है।
expect()	इस कमांड का उपयोग जैस्मीन में यूनिट परीक्षण के लिए किया जाता है। यह जांचता है कि window.open() को सही तर्कों के साथ बुलाया गया था, यह गारंटी देता है कि पॉपअप वांछित सेटिंग्स के साथ दिखाई देता है।

SPFx में पॉपअप विंडो समाधान को समझना

ऊपर सूचीबद्ध स्क्रिप्ट PnP मॉडर्न सर्च वेबपार्ट (SPFx) के भीतर लिंक के डिफ़ॉल्ट व्यवहार को समायोजित करती हैं। डिफ़ॉल्ट रूप से, लिंक का उपयोग करते हैं लक्ष्य='_रिक्त' एक नए टैब में खोलने के लिए टैग। हालाँकि, यहाँ उद्देश्य इन लिंक्स को एक पॉपअप विंडो में खोलना है, जिससे उपयोगकर्ता इंटरैक्शन बढ़ सके। इसे पूरा करने के लिए, हमने इसका उपयोग किया विंडो.ओपन() फ़ंक्शन, जो डेवलपर्स को नई ब्राउज़र विंडो या पॉपअप में यूआरएल खोलने की सुविधा देता है। इस फ़ंक्शन को विशिष्ट मापदंडों, जैसे कि चौड़ाई, ऊंचाई और अन्य विशेषताओं (जैसे स्क्रॉलबार या आकार बदलने की क्षमता) के साथ समायोजित किया जा सकता है, ताकि यह सुनिश्चित किया जा सके कि पॉपअप अपेक्षा के अनुरूप प्रदर्शन करता है।

एंकर टैग के डिफ़ॉल्ट क्लिक व्यवहार को ओवरराइड करना दृष्टिकोण का एक महत्वपूर्ण घटक है। इसके साथ ऐसा किया जाता है इवेंट.preventDefault(), जो लिंक को नए टैब में खुलने से रोकता है। इसके बजाय, हम एक इवेंट श्रोता को लिंक से जोड़ते हैं, जो एक कस्टम फ़ंक्शन को सक्रिय करता है (इस मामले में, ओपनइनपॉपअप()) जो क्लिक इवेंट को संभालता है और पॉपअप विंडो में यूआरएल खोलता है। इससे डेवलपर्स को लिंक के व्यवहार पर अधिक नियंत्रण मिलता है और परिणामस्वरूप PnP मॉडर्न सर्च वेबपार्ट के भीतर अधिक सुसंगत उपयोगकर्ता अनुभव प्राप्त होता है।

फ्रंट-एंड व्यवहार से निपटने के अलावा, हमने एसपीएफ़एक्स के अंतर्निहित डेकोरेटर जैसे बैकएंड दृष्टिकोण की भी जांच की @ओवरराइड. यह दृष्टिकोण डेवलपर्स को सीधे कस्टम वेबपार्ट्स में जावास्क्रिप्ट डालने में सक्षम बनाता है, जिससे खोज परिणामों के व्यवहार में और संशोधन होता है। एसपीएफएक्स में रेंडरिंग प्रक्रिया को ओवरराइड करने से हमें जावास्क्रिप्ट कोड इंजेक्ट करने की अनुमति मिलती है जो लिंक क्लिक को संभालता है और पॉपअप विंडो में आवश्यक सामग्री खोलता है। यह तकनीक SharePoint वातावरण के कई क्षेत्रों में समाधान को अधिक मॉड्यूलर और पुन: प्रयोज्य बनाती है, जिससे रखरखाव में सुधार होता है।

यूनिट परीक्षण यह सुनिश्चित करने के लिए महत्वपूर्ण है कि पॉपअप सुविधा कई वातावरणों और ब्राउज़रों में ठीक से काम करती है। का उपयोग करते हुए जासूसी जारी है() जैस्मिन परीक्षण ढाँचे में पुष्टि की गई है कि विंडो.ओपन() विधि को सही तर्कों के साथ क्रियान्वित किया जाता है। परीक्षण का यह रूप विकास प्रक्रिया की शुरुआत में ही संभावित मुद्दों की पहचान करता है और गारंटी देता है कि पॉपअप विंडो योजना के अनुसार काम करती है। यह समाधान फ्रंट-एंड इवेंट हैंडलिंग, बैकएंड कस्टमाइज़ेशन और यूनिट परीक्षण को एकीकृत करके SharePoint के PnP मॉडर्न सर्च वेबपार्ट में उपयोगकर्ता इंटरैक्शन को मजबूत करता है।

समाधान 1: पॉपअप विंडो बनाने के लिए जावास्क्रिप्ट `window.open` का उपयोग करना

यह दृष्टिकोण पॉपअप विंडो के साथ एक नए टैब में एक लिंक खोलने के डिफ़ॉल्ट व्यवहार को बदलने के लिए जावास्क्रिप्ट का उपयोग करता है, जो 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>

समाधान 2: इनलाइन जावास्क्रिप्ट को सीधे लिंक टैग में जोड़ना

यह विधि HTML लिंक टैग के भीतर जावास्क्रिप्ट इनलाइन को एम्बेड करती है, जो इसे हल्के गतिशील फ्रंट-एंड सिस्टम के लिए आदर्श बनाती है जिसमें कुछ बाहरी निर्भरताएं होती हैं।

<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: जावास्क्रिप्ट इंजेक्शन के साथ एसपीएफएक्स का उपयोग करके बैकएंड दृष्टिकोण

यह दृष्टिकोण एक कस्टम वेबपार्ट में जावास्क्रिप्ट को इंजेक्ट करने के लिए शेयरपॉइंट फ्रेमवर्क (एसपीएफएक्स) का उपयोग करता है, जिससे लिंक को जावास्क्रिप्ट विधियों का उपयोग करके पॉपअप विंडो में खोलने की अनुमति मिलती है।

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

पीएनपी मॉडर्न सर्च वेबपार्ट (एसएफएक्स) में पॉपअप विंडो में लिंक कैसे खोलें

एसपीएफ़एक्स में कस्टम पॉपअप लिंक के साथ उपयोगकर्ता अनुभव को बढ़ाना

सन्दर्भ और संसाधन