PnP മോഡേൺ സെർച്ച് വെബ്പാർട്ടിൽ (SFx) ഒരു പോപ്പ്അപ്പ് വിൻഡോയിൽ ലിങ്കുകൾ എങ്ങനെ തുറക്കാം

SPFx-ലെ ഇഷ്‌ടാനുസൃത പോപ്പ്അപ്പ് ലിങ്കുകൾ ഉപയോഗിച്ച് ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നു

ആധുനിക ഷെയർപോയിൻ്റ് വികസനത്തിൽ, കോൺഫിഗർ ചെയ്യാവുന്ന തിരയൽ ഫലങ്ങൾ നൽകുന്നതിന് PnP മോഡേൺ സെർച്ച് വെബ്‌പാർട്ട് (SPFx) ഉപയോഗിക്കുന്നത് ഉപയോക്തൃ അനുഭവം ഗണ്യമായി മെച്ചപ്പെടുത്തും. ലിങ്കുകൾ തുറക്കുന്നത് നിയന്ത്രിക്കുന്നത് ഡെവലപ്പർമാർക്കിടയിൽ ഒരു ജനപ്രിയ സവിശേഷതയാണ്, പ്രത്യേകിച്ച് "വിശദമായ ലിസ്റ്റ്" ലേഔട്ടിനൊപ്പം. സാധാരണയായി, ലിങ്കുകൾ ഒരു പുതിയ ടാബിൽ തുറക്കും, എന്നാൽ നമുക്ക് അവ ഒരു പോപ്പ്അപ്പ് വിൻഡോയിൽ തുറക്കണമെങ്കിൽ എന്തുചെയ്യും?

ഈ പോസ്റ്റിൽ, PnP മോഡേൺ സെർച്ച് വെബ്‌പാർട്ടിൻ്റെ ലിങ്ക് സ്വഭാവം മാറ്റിക്കൊണ്ട് ഈ പ്രവർത്തനം എങ്ങനെ നടപ്പിലാക്കാമെന്ന് ഞങ്ങൾ നോക്കാം. ഒരു പുതിയ ടാബിൽ തിരയൽ ഫലങ്ങൾ തുറക്കുന്നതിനുപകരം, ഒരു ഇഷ്‌ടാനുസൃതമാക്കിയ പോപ്പ്അപ്പ് വിൻഡോയിൽ തുറക്കാൻ ലിങ്ക് എങ്ങനെ നിർബന്ധിക്കാമെന്ന് ഞങ്ങൾ കാണിക്കും, ഇത് കൂടുതൽ സംയോജിത ഉപയോക്തൃ അനുഭവത്തിന് കാരണമാകുന്നു.

ഒരു പുതിയ ടാബിലേക്ക് സ്ഥിരസ്ഥിതിയായി വരുന്ന `` പോലുള്ള ഒരു ഫോർമുല നിങ്ങൾ ഉപയോഗിക്കുമ്പോൾ വെല്ലുവിളി ഉയർന്നുവരുന്നു. എന്നിരുന്നാലും, JavaScript ഉപയോഗിക്കുന്നതിലൂടെ, നമുക്ക് ഈ സ്വഭാവം അസാധുവാക്കാനും നിയന്ത്രിത പോപ്പ്അപ്പ് വിൻഡോയിൽ ലിങ്ക് തുറക്കാനും കഴിയും. ഒരേ ബ്രൗസിംഗ് സെഷനിൽ ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നതിന് ഇത് കൂടുതൽ വഴക്കം നൽകുന്നു.

വിശദമായ ലിസ്റ്റ് ലേഔട്ട് മെച്ചപ്പെടുത്തുന്നതിന് JavaScript, SPFx എന്നിവ ഉപയോഗിക്കുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചുകൊണ്ട്, ഈ സവിശേഷത വികസിപ്പിക്കുന്നതിന് ആവശ്യമായ ഘട്ടങ്ങളിലൂടെ ഞങ്ങൾ നിങ്ങളെ കൊണ്ടുപോകും. നിങ്ങളുടെ ഷെയർപോയിൻ്റ് സൈറ്റ് തടസ്സങ്ങളില്ലാത്തതും ഉപയോക്തൃ-സൗഹൃദവുമാണെന്ന് ഉറപ്പാക്കാൻ ഞങ്ങൾ പരിഹാരത്തിലൂടെ നടക്കുമ്പോൾ കാത്തിരിക്കുക.

SPFx-ലെ പോപ്പ്അപ്പ് വിൻഡോ സൊല്യൂഷൻ മനസ്സിലാക്കുന്നു

മുകളിൽ ലിസ്‌റ്റ് ചെയ്‌തിരിക്കുന്ന സ്‌ക്രിപ്റ്റുകൾ ഒരു PnP മോഡേൺ സെർച്ച് വെബ്‌പാർട്ടിലെ (SPFx) ലിങ്കുകളുടെ ഡിഫോൾട്ട് സ്വഭാവം ക്രമീകരിക്കുന്നു. സ്ഥിരസ്ഥിതിയായി, ലിങ്കുകൾ ഉപയോഗിക്കുന്നത് ലക്ഷ്യം="_ശൂന്യം" ഒരു പുതിയ ടാബിൽ തുറക്കാൻ ടാഗ്. എന്നിരുന്നാലും, ഈ ലിങ്കുകൾ ഒരു പോപ്പ്അപ്പ് വിൻഡോയിൽ തുറക്കുക, അതുവഴി ഉപയോക്തൃ ഇടപെടൽ വർദ്ധിപ്പിക്കുക എന്നതാണ് ഇവിടെ ഉദ്ദേശ്യം. ഇത് പൂർത്തിയാക്കാൻ, ഞങ്ങൾ ഉപയോഗിച്ചു window.open() ഫംഗ്‌ഷൻ, ഇത് ഒരു പുതിയ ബ്രൗസർ വിൻഡോയിലോ പോപ്പ്അപ്പിലോ URL-കൾ തുറക്കാൻ ഡവലപ്പർമാരെ അനുവദിക്കുന്നു. പോപ്പ്അപ്പ് ഉദ്ദേശിച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ, വീതി, ഉയരം, മറ്റ് ആട്രിബ്യൂട്ടുകൾ (സ്ക്രോൾബാറുകൾ അല്ലെങ്കിൽ വലുപ്പം മാറ്റുന്നത് പോലെ) എന്നിവ പോലുള്ള നിർദ്ദിഷ്ട പാരാമീറ്ററുകൾ ഉപയോഗിച്ച് ഈ ഫംഗ്ഷൻ ക്രമീകരിക്കാവുന്നതാണ്.

ആങ്കർ ടാഗുകളുടെ ഡിഫോൾട്ട് ക്ലിക്ക് സ്വഭാവത്തെ മറികടക്കുന്നത് സമീപനത്തിൻ്റെ ഒരു സുപ്രധാന ഘടകമാണ്. ഉപയോഗിച്ചാണ് ഇത് ചെയ്യുന്നത് Event.preventDefault(), ഒരു പുതിയ ടാബിൽ തുറക്കുന്നതിൽ നിന്ന് ലിങ്ക് തടയുന്നു. പകരം, ഒരു ഇഷ്‌ടാനുസൃത ഫംഗ്‌ഷൻ സജീവമാക്കുന്ന ലിങ്കിലേക്ക് ഞങ്ങൾ ഒരു ഇവൻ്റ് ലിസണർ അറ്റാച്ചുചെയ്യുന്നു (ഈ സാഹചര്യത്തിൽ, openInPopup()) ക്ലിക്ക് ഇവൻ്റ് കൈകാര്യം ചെയ്യുകയും ഒരു പോപ്പ്അപ്പ് വിൻഡോയിൽ URL തുറക്കുകയും ചെയ്യുന്നു. ഇത് ലിങ്കിൻ്റെ പെരുമാറ്റത്തിൽ ഡവലപ്പർമാർക്ക് കൂടുതൽ നിയന്ത്രണം അനുവദിക്കുകയും PnP മോഡേൺ തിരയൽ വെബ്‌പാർട്ടിൽ കൂടുതൽ സ്ഥിരതയുള്ള ഉപയോക്തൃ അനുഭവം നൽകുകയും ചെയ്യുന്നു.

ഫ്രണ്ട്-എൻഡ് പെരുമാറ്റം കൈകാര്യം ചെയ്യുന്നതിനു പുറമേ, SPFx-ൻ്റെ ബിൽറ്റ്-ഇൻ ഡെക്കറേറ്ററുകൾ ഉപയോഗിച്ചുള്ള ഒരു ബാക്കെൻഡ് സമീപനവും ഞങ്ങൾ പരിശോധിച്ചു. @ഓവർറൈഡ്. ഈ സമീപനം ഡെവലപ്പർമാരെ ഇഷ്‌ടാനുസൃത വെബ്‌പാർട്ടുകളിലേക്ക് നേരിട്ട് JavaScript ചേർക്കാൻ പ്രാപ്‌തമാക്കുന്നു, തിരയൽ ഫലങ്ങളുടെ സ്വഭാവം കൂടുതൽ പരിഷ്‌ക്കരിക്കുന്നു. SPFx-ലെ റെൻഡറിംഗ് പ്രക്രിയയെ അസാധുവാക്കുന്നത്, ലിങ്ക് ക്ലിക്കുകൾ കൈകാര്യം ചെയ്യുന്നതും ഒരു പോപ്പ്അപ്പ് വിൻഡോയിൽ ആവശ്യമായ മെറ്റീരിയൽ തുറക്കുന്നതുമായ JavaScript കോഡ് കുത്തിവയ്ക്കാൻ ഞങ്ങളെ അനുവദിക്കുന്നു. ഈ സാങ്കേതികത, ഷെയർപോയിൻ്റ് പരിതസ്ഥിതിയുടെ ഒന്നിലധികം മേഖലകളിലുടനീളം പരിഹാരത്തെ കൂടുതൽ മോഡുലാർ ആക്കി പുനരുപയോഗിക്കാവുന്നതാക്കുന്നു, അതിനാൽ പരിപാലനം മെച്ചപ്പെടുത്തുന്നു.

ഒന്നിലധികം പരിതസ്ഥിതികളിലും ബ്രൗസറുകളിലും പോപ്പ്അപ്പ് ഫീച്ചർ ശരിയായി പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുന്നതിന് യൂണിറ്റ് പരിശോധന നിർണായകമാണ്. ഉപയോഗിക്കുന്നത് spyOn() ഒരു ജാസ്മിൻ ടെസ്റ്റിംഗ് ചട്ടക്കൂടിൽ അത് സാധൂകരിക്കുന്നു window.open() ശരിയായ വാദങ്ങൾ ഉപയോഗിച്ചാണ് രീതി നടപ്പിലാക്കുന്നത്. ഈ രീതിയിലുള്ള ടെസ്റ്റിംഗ് വികസന പ്രക്രിയയുടെ തുടക്കത്തിൽ തന്നെ സാധ്യമായ പ്രശ്നങ്ങൾ തിരിച്ചറിയുകയും പോപ്പ്അപ്പ് വിൻഡോകൾ ആസൂത്രണം ചെയ്തതുപോലെ പ്രവർത്തിക്കുമെന്ന് ഉറപ്പ് നൽകുകയും ചെയ്യുന്നു. ഫ്രണ്ട്-എൻഡ് ഇവൻ്റ് കൈകാര്യം ചെയ്യൽ, ബാക്കെൻഡ് കസ്റ്റമൈസേഷൻ, യൂണിറ്റ് ടെസ്റ്റിംഗ് എന്നിവ സമന്വയിപ്പിച്ച് ഷെയർപോയിൻ്റിൻ്റെ 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 മോഡേൺ സെർച്ച് വെബ്‌പാർട്ടിൽ (SPFx) പ്രവർത്തിക്കുമ്പോൾ, ലിങ്കുകൾ പോലെയുള്ള ഘടകങ്ങൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ഡൈനാമിക് ആയി ക്രമീകരിക്കാനുള്ള കഴിവാണ് ഡെവലപ്പർമാർക്ക് ഉപയോഗപ്രദമായ ഒരു സവിശേഷത. JavaScript ഇവൻ്റ് കൈകാര്യം ചെയ്യലിൻ്റെ ഉപയോഗം ഉപയോക്തൃ ഇടപെടലുകൾ വ്യക്തിഗതമാക്കുന്നതിനുള്ള നിരവധി ഓപ്ഷനുകൾ നൽകുന്നു. ലിങ്ക് ക്ലിക്കുകൾ പിടിച്ചെടുക്കാനും നിയന്ത്രിക്കാനും ഇവൻ്റ് ലിസണർമാരെ ഉപയോഗിക്കുന്നത് കൂടുതൽ സംവേദനാത്മക അനുഭവം സൃഷ്ടിക്കുന്നു. ക്ലിക്ക് ഇവൻ്റുകൾ ക്യാപ്‌ചർ ചെയ്യുന്നതിലൂടെ, ഞങ്ങൾ സാധാരണ സ്വഭാവത്തെ അസാധുവാക്കുകയും നിയന്ത്രിത പോപ്പ്അപ്പ് വിൻഡോയിൽ URL-കൾ തുറക്കുകയും ചെയ്യാം. ഇത് ഉപയോക്താവിൻ്റെ നിലവിലെ ടാബിലോ വിൻഡോയിലോ ശല്യപ്പെടുത്താതെ സുഗമമായ പരിവർത്തനം ഉറപ്പാക്കുന്നു.

SPFx WebParts-ലെ ലിങ്കുകൾ ഇഷ്‌ടാനുസൃതമാക്കുന്നതിന് JavaScript കോഡ് ചലനാത്മകമായി ചേർക്കേണ്ടതുണ്ട്. ഷെയർപോയിൻ്റ് ഫ്രെയിംവർക്ക് (SPFx) പോലുള്ള രീതികൾ നൽകുന്നു @ഓവർറൈഡ് ഒപ്പം റെൻഡർ() ഇത് പൂർത്തീകരിക്കുന്നതിന്. ഇഷ്‌ടാനുസൃത JavaScript ചേർക്കുന്നതിലൂടെ, വെബ്‌പാർട്ടിൽ തന്നെ കാര്യമായ മാറ്റങ്ങൾ വരുത്താതെ തന്നെ ഡെവലപ്പർമാർക്ക് തിരയൽ ഫല ഇനങ്ങളുടെ സ്വഭാവം മാറ്റാനാകും. ഈ ഫ്ലെക്സിബിലിറ്റി എല്ലാ തിരയൽ ഫല ലിങ്കുകളിലേക്കും ആഗോള ക്രമീകരണങ്ങൾ വരുത്തുന്നത് എളുപ്പമാക്കുന്നു, പോപ്പ്അപ്പ് വിൻഡോയിൽ തുറക്കുന്നത് പോലെയുള്ള ആവശ്യമുള്ള പെരുമാറ്റം പ്ലാറ്റ്‌ഫോമിലുടനീളം ഒരേപോലെയാണെന്ന് ഉറപ്പാക്കുന്നു.

അവസാനമായി, ഏതൊരു വെബ് അധിഷ്‌ഠിത സിസ്റ്റത്തിലും പ്രകടനവും ഉപയോക്തൃ അനുഭവവും നിർണായക ഘടകങ്ങളാണ്, ഇവിടെയും അത് സത്യമാണ്. JavaScript-ൻ്റെ ഉപയോഗം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിലൂടെയും റിസോഴ്സ്-ഇൻ്റൻസീവ് പ്രവർത്തനങ്ങൾ പരിമിതപ്പെടുത്തുന്നതിലൂടെയും, ഈ ഇഷ്‌ടാനുസൃതമാക്കലുകൾക്ക് പേജ് ലോഡ് സമയത്തിലോ പ്രതികരണശേഷിയിലോ കാര്യമായ സ്വാധീനമില്ലെന്ന് ഞങ്ങൾക്ക് ഉറപ്പുനൽകാൻ കഴിയും. കാര്യക്ഷമമായ JavaScript ഉപയോഗം, ബാക്കെൻഡ് SPFx പരിഷ്‌ക്കരണങ്ങളുമായി സംയോജിപ്പിച്ച്, പ്രകടനം നഷ്ടപ്പെടുത്താതെ ഉയർന്ന തലത്തിലുള്ള വഴക്കം നൽകുന്നു, ഇത് ഷെയർപോയിൻ്റ് പ്ലാറ്റ്‌ഫോമിലുടനീളം തടസ്സമില്ലാത്ത ഉപയോക്തൃ അനുഭവത്തിന് കാരണമാകുന്നു.