PnP நவீன தேடல் WebPart (SFx) இல் பாப்அப் சாளரத்தில் இணைப்புகளை எவ்வாறு திறப்பது

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

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

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

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

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

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

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

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

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

பாப்அப் அம்சம் பல சூழல்களிலும் உலாவிகளிலும் சரியாகச் செயல்படுகிறதா என்பதை உறுதிப்படுத்துவதற்கு யூனிட் சோதனை முக்கியமானது. பயன்படுத்தி உளவாளி() ஒரு மல்லிகை சோதனை கட்டமைப்பில் அதை உறுதிப்படுத்துகிறது 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 Modern Search WebPart (SPFx) உடன் பணிபுரியும் போது, ​​டெவலப்பர்களுக்கான ஒரு பயனுள்ள அம்சம், இணைப்புகள் போன்ற கூறுகள் எவ்வாறு செயல்படுகின்றன என்பதை மாறும் வகையில் சரிசெய்யும் திறன் ஆகும். JavaScript நிகழ்வு கையாளுதலின் பயன்பாடு பயனர் தொடர்புகளைத் தனிப்பயனாக்குவதற்கான ஏராளமான விருப்பங்களை வழங்குகிறது. இணைப்பு கிளிக்குகளைப் பிடிக்கவும் கட்டுப்படுத்தவும் நிகழ்வு கேட்பவர்களைப் பயன்படுத்துவது மேலும் ஊடாடும் அனுபவத்தை உருவாக்குகிறது. கிளிக் நிகழ்வுகளைப் படம்பிடிப்பதன் மூலம், நாம் இயல்பான நடத்தையை மீறலாம் மற்றும் கட்டுப்படுத்தப்பட்ட பாப்அப் சாளரத்தில் URLகளைத் திறக்கலாம். இது பயனரின் தற்போதைய தாவல் அல்லது சாளரத்தை தொந்தரவு செய்யாமல் ஒரு மென்மையான மாற்றத்தை உறுதி செய்கிறது.

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

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