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

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() को सही तर्कों के साथ बुलाया गया था, यह गारंटी देता है कि पॉपअप वांछित सेटिंग्स के साथ दिखाई देता है।

आज्ञा	उपयोग का उदाहरण
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) के भीतर लिंक के डिफ़ॉल्ट व्यवहार को समायोजित करती हैं। डिफ़ॉल्ट रूप से, लिंक का उपयोग करते हैं एक नए टैब में खोलने के लिए टैग। हालाँकि, यहाँ उद्देश्य इन लिंक्स को एक पॉपअप विंडो में खोलना है, जिससे उपयोगकर्ता इंटरैक्शन बढ़ सके। इसे पूरा करने के लिए, हमने इसका उपयोग किया फ़ंक्शन, जो डेवलपर्स को नई ब्राउज़र विंडो या पॉपअप में यूआरएल खोलने की सुविधा देता है। इस फ़ंक्शन को विशिष्ट मापदंडों, जैसे कि चौड़ाई, ऊंचाई और अन्य विशेषताओं (जैसे स्क्रॉलबार या आकार बदलने की क्षमता) के साथ समायोजित किया जा सकता है, ताकि यह सुनिश्चित किया जा सके कि पॉपअप अपेक्षा के अनुरूप प्रदर्शन करता है।

एंकर टैग के डिफ़ॉल्ट क्लिक व्यवहार को ओवरराइड करना दृष्टिकोण का एक महत्वपूर्ण घटक है। इसके साथ ऐसा किया जाता है , जो लिंक को नए टैब में खुलने से रोकता है। इसके बजाय, हम एक इवेंट श्रोता को लिंक से जोड़ते हैं, जो एक कस्टम फ़ंक्शन को सक्रिय करता है (इस मामले में, ) जो क्लिक इवेंट को संभालता है और पॉपअप विंडो में यूआरएल खोलता है। इससे डेवलपर्स को लिंक के व्यवहार पर अधिक नियंत्रण मिलता है और परिणामस्वरूप 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));
   });
});

एसपीएफएक्स में इवेंट हैंडलिंग और डायनेमिक जावास्क्रिप्ट इंजेक्शन की खोज

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

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

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

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

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

सुसंगत व्यवहार बनाए रखने के लिए, जैसी तकनीकों का उपयोग करें और SPFx वेबपार्ट्स में जावास्क्रिप्ट को गतिशील रूप से इंजेक्ट करें। इसके अलावा, यूनिट परीक्षण यह सुनिश्चित करने में मदद करता है कि ये परिवर्तन कई संदर्भों में अच्छी तरह से काम करते हैं, जिसके परिणामस्वरूप SharePoint खोज परिणाम अनुकूलन के लिए एक भरोसेमंद, उपयोगकर्ता-अनुकूल समाधान प्राप्त होता है।

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

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