SPFxలో అనుకూల పాప్అప్ లింక్లతో వినియోగదారు అనుభవాన్ని మెరుగుపరచడం
ఆధునిక షేర్పాయింట్ అభివృద్ధిలో, కాన్ఫిగర్ చేయదగిన శోధన ఫలితాలను అందించడానికి PnP ఆధునిక శోధన వెబ్పార్ట్ (SPFx)ని ఉపయోగించడం వినియోగదారు అనుభవాన్ని గణనీయంగా మెరుగుపరుస్తుంది. లింక్లు ఎలా తెరవబడతాయో నియంత్రించడం డెవలపర్లలో ఒక ప్రసిద్ధ లక్షణం, ముఖ్యంగా "వివరణాత్మక జాబితా" లేఅవుట్తో. సాధారణంగా, లింక్లు కొత్త ట్యాబ్లో తెరవబడతాయి, అయితే మనం వాటిని పాప్అప్ విండోలో తెరవాలనుకుంటే?
ఈ పోస్ట్లో, PnP ఆధునిక శోధన వెబ్పార్ట్ యొక్క లింక్ ప్రవర్తనను మార్చడం ద్వారా ఈ కార్యాచరణను ఎలా అమలు చేయాలో మేము పరిశీలిస్తాము. శోధన ఫలితాలను కొత్త ట్యాబ్లో తెరవడం కంటే, అనుకూలీకరించిన పాప్అప్ విండోలో లింక్ని ఎలా బలవంతంగా తెరవాలో చూపుతాము, ఫలితంగా మరింత సమగ్రమైన వినియోగదారు అనుభవం లభిస్తుంది.
మీరు కొత్త ట్యాబ్కి డిఫాల్ట్గా ఉండే `` వంటి ఫార్ములాను ఉపయోగించినప్పుడు సవాలు తలెత్తుతుంది. అయినప్పటికీ, JavaScriptని ఉపయోగించడం ద్వారా, మేము ఈ ప్రవర్తనను భర్తీ చేయవచ్చు మరియు నియంత్రిత పాప్అప్ విండోలో లింక్ని తెరవవచ్చు. ఇది ఒకే బ్రౌజింగ్ సెషన్లో కంటెంట్ను ప్రదర్శించడంలో మరింత సౌలభ్యాన్ని అనుమతిస్తుంది.
వివరణాత్మక జాబితా లేఅవుట్ని మెరుగుపరచడానికి JavaScript మరియు SPFxని ఉపయోగించడంపై దృష్టి సారించి, ఈ లక్షణాన్ని అభివృద్ధి చేయడానికి అవసరమైన దశలను మేము మీకు తెలియజేస్తాము. మీ SharePoint సైట్ అతుకులు లేకుండా మరియు వినియోగదారు-స్నేహపూర్వకంగా ఉందని నిర్ధారించుకోవడానికి మేము పరిష్కారాన్ని అనుసరిస్తున్నప్పుడు చూస్తూ ఉండండి.
ఆదేశం | ఉపయోగం యొక్క ఉదాహరణ |
---|---|
window.open() | ఈ ఆదేశం కొత్త బ్రౌజర్ విండో లేదా ట్యాబ్ను తెరుస్తుంది. ఈ పద్ధతి వెడల్పు, ఎత్తు మరియు స్క్రోల్బార్లు వంటి నిర్దిష్ట కొలతలు మరియు లక్షణాలతో పాప్అప్ విండోను తెరుస్తుంది. |
event.preventDefault() | క్లిక్ చేసిన లింక్ యొక్క డిఫాల్ట్ ప్రవర్తనను నిరోధిస్తుంది, అంటే అదే లేదా కొత్త ట్యాబ్లో URLని తెరవడం. బదులుగా పాప్అప్ను తెరవడం వంటి లింక్ ఎలా పని చేస్తుందో అనుకూలీకరించడానికి ఇది మమ్మల్ని అనుమతిస్తుంది. |
querySelectorAll() | డేటా-పాప్అప్ లక్షణం అన్ని యాంకర్ ఎలిమెంట్లను ఎంచుకుంటుంది () ఈ పద్ధతి నోడ్లిస్ట్ను అందిస్తుంది, ఇది ఈవెంట్ శ్రోతలను ఒకేసారి అనేక భాగాలకు వర్తింపజేయడానికి అనుమతిస్తుంది. |
forEach() | querySelectorAll() ద్వారా రూపొందించబడిన నోడ్లిస్ట్లోని ప్రతి ఎంట్రీ ఒక చర్యను అందుకుంటుంది (ఉదాహరణకు, ఈవెంట్ లిజనర్ను జోడించడం). PnP ఆధునిక శోధనలో అనేక డైనమిక్ లింక్ ఎలిమెంట్లను నిర్వహించడానికి ఇది వర్తిస్తుంది. |
addEventListener() | ఈ టెక్నిక్ openInPopup() ఫంక్షన్ని ట్రిగ్గర్ చేసే ప్రతి లింక్కి క్లిక్ ఈవెంట్ లిజనర్ని జోడిస్తుంది. డిఫాల్ట్ క్లిక్ ప్రవర్తనను భర్తీ చేయడానికి ఇది అవసరం. |
import { override } | ఈ డెకరేటర్ షేర్పాయింట్ ఫ్రేమ్వర్క్ (SPFx)లో భాగం మరియు SPFx WebParts డిఫాల్ట్ ప్రవర్తనను భర్తీ చేయడానికి ఉపయోగించబడుతుంది. పాప్అప్ కార్యాచరణను అందించడానికి జావాస్క్రిప్ట్ను ఇంజెక్ట్ చేయడం వంటి నిర్దిష్ట అనుకూలీకరణలను ఇది ప్రారంభిస్తుంది. |
@override | SPFxలో, డెకరేటర్ ఒక పద్ధతి లేదా ఆస్తి కార్యాచరణను భర్తీ చేస్తుందని సూచిస్తుంది. SharePoint భాగాల ప్రవర్తనను సవరించేటప్పుడు ఇది అవసరం. |
spyOn() | జాస్మిన్తో యూనిట్ టెస్టింగ్ సమయంలో ఫంక్షన్ కాల్లను పర్యవేక్షిస్తుంది. ఈ దృష్టాంతంలో, పరీక్ష సమయంలో పాపప్ సముచితంగా ప్రారంభించబడిందని హామీ ఇవ్వడానికి ఇది window.open()తో ఉపయోగించబడుతుంది. |
expect() | ఈ కమాండ్ జాస్మిన్లో యూనిట్ టెస్టింగ్ కోసం ఉపయోగించబడుతుంది. ఇది window.open() సరైన ఆర్గ్యుమెంట్లతో పిలవబడిందని తనిఖీ చేస్తుంది, పాప్అప్ కావలసిన సెట్టింగ్లతో కనిపిస్తుంది అని హామీ ఇస్తుంది. |
SPFxలో పాప్అప్ విండో సొల్యూషన్ను అర్థం చేసుకోవడం
పైన జాబితా చేయబడిన స్క్రిప్ట్లు PnP ఆధునిక శోధన వెబ్పార్ట్ (SPFx)లోని లింక్ల డిఫాల్ట్ ప్రవర్తనను సర్దుబాటు చేస్తాయి. డిఫాల్ట్గా, లింక్లు దీనిని ఉపయోగిస్తాయి కొత్త ట్యాబ్లో తెరవడానికి ట్యాగ్ చేయండి. అయితే, పాప్అప్ విండోలో ఈ లింక్లను తెరవడం, తద్వారా వినియోగదారు పరస్పర చర్యను పెంచడం ఇక్కడ ఉద్దేశ్యం. దీనిని నెరవేర్చడానికి, మేము ఉపయోగించాము ఫంక్షన్, ఇది కొత్త బ్రౌజర్ విండో లేదా పాప్అప్లో URLలను తెరవడానికి డెవలపర్లను అనుమతిస్తుంది. పాప్అప్ అనుకున్న విధంగా పని చేస్తుందని నిర్ధారించడానికి వెడల్పు, ఎత్తు మరియు ఇతర గుణాలు (స్క్రోల్బార్లు లేదా పునఃపరిమాణం వంటివి) వంటి నిర్దిష్ట పారామితులతో ఈ ఫంక్షన్ని సర్దుబాటు చేయవచ్చు.
యాంకర్ ట్యాగ్ల డిఫాల్ట్ క్లిక్ ప్రవర్తనను భర్తీ చేయడం అనేది విధానంలో కీలకమైన అంశం. దీనితో చేయబడుతుంది , ఇది కొత్త ట్యాబ్లో లింక్ను తెరవకుండా నిరోధిస్తుంది. బదులుగా, మేము కస్టమ్ ఫంక్షన్ని సక్రియం చేసే లింక్కి ఈవెంట్ లిజనర్ని అటాచ్ చేస్తాము (ఈ సందర్భంలో, ) క్లిక్ ఈవెంట్ను నిర్వహిస్తుంది మరియు పాప్అప్ విండోలో URLని తెరుస్తుంది. ఇది లింక్ ప్రవర్తనపై డెవలపర్లకు మరింత నియంత్రణను అనుమతిస్తుంది మరియు PnP ఆధునిక శోధన వెబ్పార్ట్లో మరింత స్థిరమైన వినియోగదారు అనుభవాన్ని అందిస్తుంది.
ఫ్రంట్-ఎండ్ ప్రవర్తనతో పాటుగా, మేము SPFx యొక్క అంతర్నిర్మిత డెకరేటర్లను ఉపయోగించి బ్యాకెండ్ విధానాన్ని కూడా పరిశీలించాము . ఈ విధానం డెవలపర్లను కస్టమ్ వెబ్పార్ట్లలోకి నేరుగా జావాస్క్రిప్ట్ను ఇన్సర్ట్ చేయడానికి అనుమతిస్తుంది, శోధన ఫలితాల ప్రవర్తనను మరింతగా మారుస్తుంది. SPFxలో రెండరింగ్ ప్రక్రియను ఓవర్రైడ్ చేయడం వలన లింక్ క్లిక్లను నిర్వహించే మరియు పాప్అప్ విండోలో అవసరమైన మెటీరియల్ని తెరిచే JavaScript కోడ్ని ఇంజెక్ట్ చేయడానికి మమ్మల్ని అనుమతిస్తుంది. ఈ టెక్నిక్ పరిష్కారాన్ని మరింత మాడ్యులర్గా మరియు షేర్పాయింట్ ఎన్విరాన్మెంట్లోని బహుళ ప్రాంతాలలో పునర్వినియోగపరచదగినదిగా చేస్తుంది, అందువల్ల నిర్వహణను మెరుగుపరుస్తుంది.
పాప్అప్ ఫీచర్ బహుళ వాతావరణాలు మరియు బ్రౌజర్లలో సరిగ్గా పనిచేస్తుందని నిర్ధారించడానికి యూనిట్ పరీక్ష కీలకం. ఉపయోగించి జాస్మిన్ టెస్టింగ్ ఫ్రేమ్వర్క్లో ధృవీకరిస్తుంది పద్ధతి సరైన వాదనలతో అమలు చేయబడుతుంది. ఈ రకమైన పరీక్ష అభివృద్ధి ప్రక్రియ ప్రారంభంలో సంభావ్య సమస్యలను గుర్తిస్తుంది మరియు పాప్అప్ విండోలు ప్రణాళికాబద్ధంగా పనిచేస్తాయని హామీ ఇస్తుంది. ఈ పరిష్కారం షేర్పాయింట్ యొక్క PnP ఆధునిక శోధన వెబ్పార్ట్లో ఫ్రంట్-ఎండ్ ఈవెంట్ హ్యాండ్లింగ్, బ్యాకెండ్ అనుకూలీకరణ మరియు యూనిట్ టెస్టింగ్ను ఏకీకృతం చేయడం ద్వారా వినియోగదారు పరస్పర చర్యలను బలపరుస్తుంది.
పరిష్కారం 1: పాప్అప్ విండోను సృష్టించడానికి JavaScript `window.open`ని ఉపయోగించడం
కొత్త ట్యాబ్లో లింక్ను తెరవడం యొక్క డిఫాల్ట్ ప్రవర్తనను పాపప్ విండోతో భర్తీ చేయడానికి ఈ విధానం JavaScriptను ఉపయోగిస్తుంది, ఇది 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: JavaScript ఇంజెక్షన్తో SPFxని ఉపయోగించి బ్యాకెండ్ అప్రోచ్
ఈ విధానం జావాస్క్రిప్ట్ను అనుకూల వెబ్పార్ట్లోకి ఇంజెక్ట్ చేయడానికి SharePoint ఫ్రేమ్వర్క్ (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');
}
జావాస్క్రిప్ట్ పాప్అప్ బిహేవియర్ కోసం యూనిట్ టెస్ట్
పాప్అప్ కార్యాచరణ బ్రౌజర్లు మరియు పరిసరాలలో స్థిరంగా ఉంటుందని యూనిట్ పరీక్షలు హామీ ఇస్తాయి. ఫ్రంట్-ఎండ్ ధ్రువీకరణ కోసం ఇక్కడ ప్రాథమిక జాస్మిన్ పరీక్ష ఉంది.
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 వెబ్పార్ట్లలో లింక్లను అనుకూలీకరించడానికి కూడా డైనమిక్గా జావాస్క్రిప్ట్ కోడ్ని చొప్పించడం అవసరం. షేర్పాయింట్ ఫ్రేమ్వర్క్ (SPFx) వంటి పద్ధతులను అందిస్తుంది మరియు దీనిని సాధించడం కోసం. కస్టమ్ జావాస్క్రిప్ట్ను చొప్పించడం ద్వారా, డెవలపర్లు వెబ్పార్ట్కు గణనీయమైన మార్పులు చేయకుండా శోధన ఫలితాల ఐటెమ్ల ప్రవర్తనను మార్చవచ్చు. ఈ సౌలభ్యం అన్ని శోధన ఫలితాల లింక్లకు గ్లోబల్ సర్దుబాట్లను సులభతరం చేస్తుంది, పాప్అప్ విండోలో తెరవడం వంటి కావలసిన ప్రవర్తన ప్లాట్ఫారమ్ అంతటా ఒకే విధంగా ఉండేలా చేస్తుంది.
చివరగా, ఏదైనా వెబ్ ఆధారిత సిస్టమ్లో పనితీరు మరియు వినియోగదారు అనుభవం కీలకమైన అంశాలు మరియు ఇక్కడ కూడా అదే నిజం. జావాస్క్రిప్ట్ వినియోగాన్ని ఆప్టిమైజ్ చేయడం మరియు రిసోర్స్-ఇంటెన్సివ్ యాక్టివిటీలను పరిమితం చేయడం ద్వారా, ఈ అనుకూలీకరణలు పేజీ లోడ్ సమయాలు లేదా ప్రతిస్పందనపై గణనీయమైన ప్రభావం చూపవని మేము హామీ ఇవ్వగలము. సమర్ధవంతమైన జావాస్క్రిప్ట్ ఉపయోగం, బ్యాకెండ్ SPFx సవరణలతో కలిపి, పనితీరును త్యాగం చేయకుండా అధిక స్థాయి సౌలభ్యాన్ని అందిస్తుంది, దీని ఫలితంగా SharePoint ప్లాట్ఫారమ్ అంతటా అతుకులు లేని వినియోగదారు అనుభవం లభిస్తుంది.
- జావాస్క్రిప్ట్తో పాప్అప్ విండోలో నేను లింక్ను ఎలా తెరవగలను?
- మీరు ఉపయోగించవచ్చు జావాస్క్రిప్ట్లో ఫంక్షన్. పరిమాణం మరియు స్క్రోల్ బార్ల వంటి నిర్దిష్ట లక్షణాలతో కొత్త బ్రౌజర్ విండో లేదా పాపప్ని తెరవడానికి ఈ ఫంక్షన్ మిమ్మల్ని అనుమతిస్తుంది.
- ఏమి చేస్తుంది చేస్తావా?
- ది ఒక ఈవెంట్ దాని డిఫాల్ట్ చర్యను చేయకుండా పద్ధతి నిరోధిస్తుంది. ఈ సందర్భంలో, పాప్అప్ని ప్రదర్శించడం వంటి నిర్దిష్ట చర్యలను అనుమతించేటప్పుడు కొత్త ట్యాబ్లో లింక్ తెరవకుండా ఇది నిరోధిస్తుంది.
- SPFxలోని అనేక లింక్లకు అనుకూల ప్రవర్తనను నేను ఎలా వర్తింపజేయగలను?
- ఉపయోగించి JavaScriptలో, మీరు బహుళ భాగాలను ఎంచుకోవచ్చు మరియు ఈవెంట్ శ్రోతలను వాటికి జోడించవచ్చు, వారందరూ ఒకే ప్రవర్తనను అనుసరిస్తారని హామీ ఇస్తారు.
- SPFx WebParts యొక్క డిఫాల్ట్ రెండరింగ్ని నేను ఎలా భర్తీ చేయాలి?
- SPFx వెబ్పార్ట్ల ప్రవర్తనను సర్దుబాటు చేయడానికి, ఉపయోగించండి డెకరేటర్. ఇది వెబ్పార్ట్ యొక్క రెండరింగ్ ప్రక్రియలో కస్టమ్ జావాస్క్రిప్ట్ను నేరుగా ఇంజెక్ట్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది.
- పాప్అప్ విండో సరిగ్గా తెరవబడుతుందో లేదో తెలుసుకోవడానికి ఉత్తమ సాంకేతికత ఏమిటి?
- జాస్మిన్ వంటి ఫ్రేమ్వర్క్లో యూనిట్ పరీక్షలను ఉపయోగించి, మీరు ఉపయోగించవచ్చు ఉంటే పర్యవేక్షించడానికి ఫంక్షన్ ఊహించిన పారామితులతో సముచితంగా పిలువబడుతుంది.
PnP మోడరన్ సెర్చ్ వెబ్పార్ట్ (SPFx)లోని జావాస్క్రిప్ట్ని ఉపయోగించి పాప్అప్ విండోలో లింక్లు తెరిచే విధానాన్ని అనుకూలీకరించవచ్చు. ఈ మార్పు నియంత్రిత పాప్అప్లో వివరణాత్మక కంటెంట్కు యాక్సెస్ను అందించేటప్పుడు ప్రస్తుత ట్యాబ్లో వారిని నిమగ్నమై ఉంచడం ద్వారా వినియోగదారు పరస్పర చర్యను మెరుగుపరుస్తుంది.
స్థిరమైన ప్రవర్తనను నిర్వహించడానికి, వంటి పద్ధతులను ఉపయోగించండి మరియు డైనమిక్గా జావాస్క్రిప్ట్ని SPFx వెబ్పార్ట్లలోకి ఇంజెక్ట్ చేయండి. ఇంకా, యూనిట్ పరీక్ష ఈ మార్పులు అనేక సందర్భాలలో బాగా పని చేసేలా చేయడంలో సహాయపడుతుంది, దీని ఫలితంగా SharePoint శోధన ఫలితం అనుకూలీకరణకు విశ్వసనీయమైన, వినియోగదారు-స్నేహపూర్వక పరిష్కారం లభిస్తుంది.
- PnP ఆధునిక శోధన వెబ్పార్ట్ (SPFx) మరియు అనుకూలీకరించే లింక్ ప్రవర్తనకు సంబంధించిన సమాచారం అధికారిక డాక్యుమెంటేషన్ నుండి తీసుకోబడింది. మరిన్ని వివరాల కోసం, సందర్శించండి PnP ఆధునిక శోధన GitHub రిపోజిటరీ .
- వంటి జావాస్క్రిప్ట్ పద్ధతులను ఉపయోగించడంపై మార్గదర్శకత్వం మరియు ఈవెంట్ శ్రోతలు నుండి ప్రస్తావించబడింది MDN వెబ్ డాక్స్ జావాస్క్రిప్ట్ కోసం.
- JavaScript ఇంజెక్షన్ మరియు సహా SharePoint ఫ్రేమ్వర్క్ (SPFx) అనుకూలీకరణల గురించిన వివరాలు , లో చూడవచ్చు షేర్పాయింట్ ఫ్రేమ్వర్క్ అవలోకనం .