PnP நவீன தேடல் WebPart (SFx) இல்

Mia Chevalier

திங்கள், 23 செப்டம்பர், 2024 ’அன்று’ முற்பகல் 10:50:20

SPFx இல் தனிப்பயன் பாப்அப் இணைப்புகளுடன் பயனர் அனுபவத்தை மேம்படுத்துதல்

நவீன ஷேர்பாயிண்ட் மேம்பாட்டில், PnP Modern Search WebPart (SPFx) ஐப் பயன்படுத்தி உள்ளமைக்கக்கூடிய தேடல் முடிவுகளை வழங்குவது பயனர் அனுபவத்தை கணிசமாக மேம்படுத்தும். இணைப்புகள் எவ்வாறு திறக்கப்படுகின்றன என்பதைக் கட்டுப்படுத்துவது டெவலப்பர்களிடையே பிரபலமான அம்சமாகும், குறிப்பாக "விரிவான பட்டியல்" தளவமைப்புடன். பொதுவாக, இணைப்புகள் புதிய தாவலில் திறக்கப்படும், ஆனால் அவற்றை பாப்அப் சாளரத்தில் திறக்க விரும்பினால் என்ன செய்வது?

இந்த இடுகையில், PnP நவீன தேடல் WebPart இன் இணைப்பு நடத்தையை மாற்றுவதன் மூலம் இந்த செயல்பாட்டை எவ்வாறு செயல்படுத்துவது என்பதைப் பார்ப்போம். புதிய தாவலில் தேடல் முடிவுகளைத் திறப்பதற்குப் பதிலாக, தனிப்பயனாக்கப்பட்ட பாப்அப் சாளரத்தில் இணைப்பைத் திறக்கும்படி கட்டாயப்படுத்துவது எப்படி என்பதைக் காண்பிப்போம், இதன் விளைவாக ஒருங்கிணைக்கப்பட்ட பயனர் அனுபவம் கிடைக்கும்.

நீங்கள் `` போன்ற சூத்திரத்தைப் பயன்படுத்தும் போது சவால் எழுகிறது, இது ஒரு புதிய தாவலுக்கு இயல்புநிலையாகும். இருப்பினும், JavaScript ஐப் பயன்படுத்துவதன் மூலம், இந்த நடத்தையை நாம் மேலெழுதலாம் மற்றும் கட்டுப்படுத்தப்பட்ட பாப்அப் சாளரத்தில் இணைப்பைத் திறக்கலாம். ஒரே உலாவல் அமர்வில் உள்ளடக்கத்தைக் காண்பிப்பதில் அதிக நெகிழ்வுத்தன்மையை இது அனுமதிக்கிறது.

விரிவான பட்டியல் தளவமைப்பை மேம்படுத்த ஜாவாஸ்கிரிப்ட் மற்றும் SPFx ஐப் பயன்படுத்துவதில் கவனம் செலுத்துவதன் மூலம், இந்த அம்சத்தை உருவாக்க தேவையான படிகளை நாங்கள் உங்களுக்கு வழங்குவோம். உங்கள் ஷேர்பாயிண்ட் தளம் தடையற்றது மற்றும் பயனருக்கு ஏற்றது என்பதை உறுதிசெய்வதற்கான தீர்வை நாங்கள் மேற்கொள்ளும்போது காத்திருங்கள்.

கட்டளை	பயன்பாட்டின் உதாரணம்
window.open()	இந்த கட்டளை புதிய உலாவி சாளரம் அல்லது தாவலைத் திறக்கும். இந்த முறையானது அகலம், உயரம் மற்றும் சுருள்ப்பட்டிகள் போன்ற சில பரிமாணங்கள் மற்றும் பண்புகளுடன் பாப்அப் சாளரத்தைத் திறக்கும்.
event.preventDefault()	அதே அல்லது புதிய தாவலில் URL ஐ திறக்கும், கிளிக் செய்யப்பட்ட இணைப்பின் இயல்புநிலை நடத்தையைத் தடுக்கிறது. பாப்அப்பைத் திறப்பது போன்ற இணைப்பு எவ்வாறு செயல்படுகிறது என்பதைத் தனிப்பயனாக்க இது அனுமதிக்கிறது.
querySelectorAll()	தரவு-பாப்அப் பண்புக்கூறு அனைத்து ஆங்கர் கூறுகளையும் தேர்ந்தெடுக்கிறது () இந்த முறை ஒரு நோட்லிஸ்ட்டை வழங்குகிறது, இது நிகழ்வு கேட்பவர்களை ஒரே நேரத்தில் பல கூறுகளுக்குப் பயன்படுத்த அனுமதிக்கிறது.
forEach()	querySelectorAll() ஆல் தயாரிக்கப்பட்ட NodeList இல் உள்ள ஒவ்வொரு உள்ளீடும் ஒரு செயலைப் பெறுகிறது (எடுத்துக்காட்டாக, நிகழ்வு கேட்பவரை இணைத்தல்). PnP நவீன தேடலில் உள்ள பல டைனமிக் இணைப்பு கூறுகளை நிர்வகிப்பதற்கு இது பொருந்தும்.
addEventListener()	இந்த நுட்பம் openInPopup() செயல்பாட்டைத் தூண்டும் ஒவ்வொரு இணைப்புக்கும் ஒரு கிளிக் நிகழ்வு கேட்பவரைச் சேர்க்கிறது. இயல்புநிலை கிளிக் நடத்தையை மேலெழுத இது அவசியம்.
import { override }	இந்த டெக்கரேட்டர் ஷேர்பாயிண்ட் ஃப்ரேம்வொர்க்கின் (SPFx) ஒரு பகுதியாகும், மேலும் SPFx WebParts இன் இயல்புநிலை நடத்தையை மேலெழுதப் பயன்படுகிறது. பாப்அப் செயல்பாட்டை வழங்க ஜாவாஸ்கிரிப்டை உட்செலுத்துவது போன்ற குறிப்பிட்ட தனிப்பயனாக்கங்களை இது செயல்படுத்துகிறது.
@override	SPFx இல், ஒரு அலங்கரிப்பாளர் ஒரு முறை அல்லது சொத்து செயல்பாட்டை மீறுகிறது என்பதைக் குறிக்கிறது. ஷேர்பாயிண்ட் கூறுகளின் நடத்தையை மாற்றியமைக்கும் போது இது அவசியம்.
spyOn()	ஜாஸ்மினுடன் யூனிட் சோதனையின் போது செயல்பாட்டு அழைப்புகளை கண்காணிக்கிறது. இந்தச் சூழ்நிலையில், சோதனையின் போது பாப்அப் சரியான முறையில் தொடங்கப்படும் என்பதற்கு உத்தரவாதம் அளிக்க window.open() உடன் இது பயன்படுத்தப்படுகிறது.
expect()	இந்த கட்டளை மல்லிகையில் அலகு சோதனைக்கு பயன்படுத்தப்படுகிறது. இது window.open() சரியான வாதங்களுடன் அழைக்கப்பட்டதா என்பதைச் சரிபார்க்கிறது, பாப்அப் விரும்பிய அமைப்புகளுடன் தோன்றும் என்பதை உறுதிப்படுத்துகிறது.

SPFx இல் பாப்அப் சாளர தீர்வைப் புரிந்துகொள்வது

மேலே பட்டியலிடப்பட்டுள்ள ஸ்கிரிப்ட்கள் PnP மாடர்ன் சர்ச் WebPart (SPFx) க்குள் உள்ள இணைப்புகளின் இயல்புநிலை நடத்தையை சரிசெய்கிறது. இயல்பாக, இணைப்புகள் இதைப் பயன்படுத்துகின்றன இலக்கு="_வெற்று" புதிய தாவலில் திறக்க குறிச்சொல். இருப்பினும், இந்த இணைப்புகளை பாப்அப் விண்டோவில் திறந்து, அதன் மூலம் பயனர் தொடர்புகளை அதிகரிப்பதே இங்கு நோக்கமாகும். இதை நிறைவேற்ற, நாங்கள் பயன்படுத்தினோம் window.open() செயல்பாடு, புதிய உலாவி சாளரத்தில் அல்லது பாப்அப்பில் URLகளைத் திறக்க டெவலப்பர்களை அனுமதிக்கிறது. பாப்அப் விரும்பியபடி செயல்படுவதை உறுதிசெய்ய, அகலம், உயரம் மற்றும் பிற பண்புக்கூறுகள் (சுருள்ப்பட்டிகள் அல்லது மறுஅளவிடுதல் போன்றவை) போன்ற குறிப்பிட்ட அளவுருக்கள் மூலம் இந்தச் செயல்பாட்டைச் சரிசெய்யலாம்.

ஆங்கர் குறிச்சொற்களின் இயல்புநிலை கிளிக் நடத்தையை மேலெழுதுவது அணுகுமுறையின் ஒரு முக்கிய அங்கமாகும். இது செய்யப்படுகிறது Event.preventDefault(), இது புதிய தாவலில் இணைப்பைத் திறப்பதைத் தடுக்கிறது. அதற்குப் பதிலாக, ஒரு நிகழ்வு கேட்பவரை இணைப்பில் இணைக்கிறோம், இது தனிப்பயன் செயல்பாட்டைச் செயல்படுத்துகிறது (இந்த விஷயத்தில், openInPopup()) கிளிக் நிகழ்வைக் கையாளுகிறது மற்றும் URL ஐ பாப்அப் சாளரத்தில் திறக்கிறது. இது இணைப்பின் நடத்தையின் மீது டெவலப்பர்களுக்கு கூடுதல் கட்டுப்பாட்டை அனுமதிக்கிறது மற்றும் PnP நவீன தேடல் WebPart இல் மிகவும் நிலையான பயனர் அனுபவத்தை வழங்குகிறது.

முன்-இறுதி நடத்தையைக் கையாள்வதோடு, SPFx இன் உள்ளமைக்கப்பட்ட அலங்காரங்களைப் பயன்படுத்தி பின்தள அணுகுமுறையையும் நாங்கள் ஆய்வு செய்தோம். @ஓவர்ரைடு. இந்த அணுகுமுறை டெவலப்பர்களை தனிப்பயன் WebPartகளில் நேரடியாக JavaScript ஐ செருகுவதற்கு உதவுகிறது, மேலும் தேடல் முடிவுகளின் நடத்தையை மாற்றியமைக்கிறது. SPFx இல் ரெண்டரிங் செயல்முறையை மேலெழுதுவது, இணைப்பு கிளிக்குகளைக் கையாளும் மற்றும் பாப்அப் சாளரத்தில் தேவையான உள்ளடக்கத்தைத் திறக்கும் ஜாவாஸ்கிரிப்ட் குறியீட்டை உட்செலுத்த அனுமதிக்கிறது. இந்த நுட்பம், ஷேர்பாயிண்ட் சூழலின் பல பகுதிகளில் தீர்வை மிகவும் மட்டுப்படுத்தி மீண்டும் பயன்படுத்தக்கூடியதாக ஆக்குகிறது, எனவே பராமரிப்பை மேம்படுத்துகிறது.

பாப்அப் அம்சம் பல சூழல்களிலும் உலாவிகளிலும் சரியாகச் செயல்படுகிறதா என்பதை உறுதிப்படுத்துவதற்கு யூனிட் சோதனை முக்கியமானது. பயன்படுத்தி உளவாளி() ஒரு மல்லிகை சோதனை கட்டமைப்பில் அதை உறுதிப்படுத்துகிறது window.open() முறை சரியான வாதங்களுடன் செயல்படுத்தப்படுகிறது. இந்த மாதிரியான சோதனையானது, மேம்பாட்டின் தொடக்கத்தில் சாத்தியமான சிக்கல்களைக் கண்டறிந்து, பாப்அப் சாளரங்கள் திட்டமிட்டபடி செயல்படுவதற்கு உத்தரவாதம் அளிக்கிறது. இந்த தீர்வு ஷேர்பாயின்ட்டின் PnP நவீன தேடல் வெப்பார்ட்டில் முன்-இறுதி நிகழ்வு கையாளுதல், பின்தளத்தில் தனிப்பயனாக்கம் மற்றும் அலகு சோதனை ஆகியவற்றை ஒருங்கிணைப்பதன் மூலம் பயனர் தொடர்புகளை வலுப்படுத்துகிறது.

தீர்வு 1: பாப்அப் சாளரத்தை உருவாக்க JavaScript `window.open` ஐப் பயன்படுத்துதல்

இந்த அணுகுமுறை ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி புதிய தாவலில் இணைப்பைத் திறக்கும் இயல்புநிலை நடத்தையை பாப்அப் சாளரத்துடன் மாற்றுகிறது, இது ஷேர்பாயிண்ட் சூழலில் 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: ஜாவாஸ்கிரிப்ட் ஊசி மூலம் SPFx ஐப் பயன்படுத்தி பின்நிலை அணுகுமுறை

இந்த அணுகுமுறை ஷேர்பாயிண்ட் ஃபிரேம்வொர்க்கை (SPFx) பயன்படுத்தி ஜாவாஸ்கிரிப்டை தனிப்பயன் வெப்பார்ட்டில் செலுத்துகிறது, இது ஜாவாஸ்கிரிப்ட் முறைகளைப் பயன்படுத்தி பாப்அப் விண்டோவில் இணைப்புகளைத் திறக்க அனுமதிக்கிறது.

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