Kā atvērt saites uznirstošajā logā PnP Modern Search WebPart (SFx)

Uzlabojiet lietotāja pieredzi, izmantojot pielāgotas uznirstošās saites SPFx

Mūsdienu SharePoint izstrādē, izmantojot PnP Modern Search WebPart (SPFx), lai nodrošinātu konfigurējamus meklēšanas rezultātus, var ievērojami uzlabot lietotāja pieredzi. Saišu atvēršanas kontrole ir populāra funkcija izstrādātāju vidū, īpaši izmantojot izkārtojumu “Detalizētais saraksts”. Parasti saites tiek atvērtas jaunā cilnē, bet ko darīt, ja mēs vēlamies tās atvērt uznirstošajā logā?

Šajā ziņojumā mēs apskatīsim, kā ieviest šo funkcionalitāti, mainot PnP modernās meklēšanas tīmekļa daļas saites darbību. Tā vietā, lai atvērtu meklēšanas rezultātus jaunā cilnē, mēs parādīsim, kā piespiest saiti atvērt pielāgotā uznirstošajā logā, tādējādi nodrošinot integrētāku lietotāja pieredzi.

Izaicinājums rodas, ja izmantojat tādu formulu kā `", kas pēc noklusējuma ir jauna cilne. Tomēr, izmantojot JavaScript, mēs varam ignorēt šo darbību un atvērt saiti kontrolētā uznirstošajā logā. Tas nodrošina lielāku elastību, parādot saturu tajā pašā pārlūkošanas sesijā.

Mēs sniegsim jums norādījumus, kas jāveic, lai izstrādātu šo līdzekli, īpašu uzmanību pievēršot JavaScript un SPFx izmantošanai, lai uzlabotu detalizētā saraksta izkārtojumu. Sekojiet līdzi jaunumiem, kamēr mēs iepazīstamies ar risinājumu, lai jūsu SharePoint vietne būtu nevainojama un lietotājam draudzīga.

Komanda	Lietošanas piemērs
window.open()	Šī komanda atvērs jaunu pārlūkprogrammas logu vai cilni. Šī metode atver uznirstošo logu ar noteiktiem izmēriem un īpašībām, piemēram, platumu, augstumu un ritjoslām.
event.preventDefault()	Novērš noklikšķinātās saites noklusējuma darbību, kas ir URL atvēršana tajā pašā vai jaunā cilnē. Tas ļauj mums pielāgot saites darbību, piemēram, atvērt uznirstošo logu.
querySelectorAll()	Datu uznirstošais atribūts atlasa visus enkura elementus (). Šī metode atgriež NodeList, kas ļauj mums vienlaikus piemērot notikumu klausītājus vairākiem komponentiem.
forEach()	Katrs ieraksts NodeList, ko veido querySelectorAll(), saņem darbību (piemēram, pievieno notikumu klausītāju). Tas attiecas uz daudzu dinamisko saišu elementu pārvaldību PnP modernajā meklēšanā.
addEventListener()	Šis paņēmiens pievieno klikšķu notikumu uztvērēju katrai saitei, kas aktivizē funkciju openInPopup(). Tas ir nepieciešams, lai ignorētu noklusējuma klikšķu darbību.
import { override }	Šis dekorētājs ir daļa no SharePoint Framework (SPFx) un tiek izmantots, lai ignorētu SPFx WebParts noklusējuma darbību. Tas nodrošina īpašus pielāgojumus, piemēram, JavaScript ievadīšanu, lai nodrošinātu uznirstošo logu funkcionalitāti.
@override	SPFx dekorētājs norāda, ka metode vai rekvizīts ignorē funkcionalitāti. Tas ir nepieciešams, mainot SharePoint komponentu darbību.
spyOn()	Pārrauga funkciju izsaukumus vienības testēšanas laikā ar Jasmine. Šajā scenārijā tas tiek izmantots kopā ar window.open(), lai nodrošinātu, ka uznirstošais logs tiek pareizi palaists testēšanas laikā.
expect()	Šī komanda tiek izmantota vienību testēšanai Jasmine. Tas pārbauda, ​​vai window.open() tika izsaukts ar pareiziem argumentiem, garantējot, ka uznirstošais logs tiek parādīts ar vajadzīgajiem iestatījumiem.

Izpratne par uznirstošo logu risinājumu SPFx

Iepriekš uzskaitītie skripti pielāgo saišu noklusējuma darbību PnP modernās meklēšanas tīmekļa daļā (SPFx). Pēc noklusējuma saitēm tiek izmantots tagu, lai atvērtu jaunā cilnē. Tomēr mērķis ir atvērt šīs saites uznirstošajā logā, tādējādi palielinot lietotāja mijiedarbību. Lai to paveiktu, mēs izmantojām funkcija, kas ļauj izstrādātājiem atvērt URL jaunā pārlūkprogrammas logā vai uznirstošajā logā. Šo funkciju var pielāgot, izmantojot īpašus parametrus, piemēram, platumu, augstumu un citus atribūtus (piemēram, ritjoslas vai izmēru maiņu), lai nodrošinātu, ka uznirstošais logs darbojas, kā paredzēts.

Enkura tagu noklusējuma klikšķu darbības ignorēšana ir būtiska pieejas sastāvdaļa. Tas tiek darīts ar , kas neļauj saitei atvērties jaunā cilnē. Tā vietā saitei pievienojam notikumu uztvērēju, kas aktivizē pielāgotu funkciju (šajā gadījumā ), kas apstrādā klikšķa notikumu un atver URL uznirstošajā logā. Tas ļauj izstrādātājiem vairāk kontrolēt saites darbību un nodrošina konsekventāku lietotāja pieredzi PnP modernās meklēšanas tīmekļa daļā.

Papildus priekšgala uzvedībai mēs pārbaudījām arī aizmugursistēmas pieeju, izmantojot SPFx iebūvētos dekoratorus, piemēram, . Šī pieeja ļauj izstrādātājiem tieši ievietot JavaScript pielāgotajās tīmekļa daļās, vēl vairāk mainot meklēšanas rezultātu darbību. Renderēšanas procesa ignorēšana SPFx ļauj mums ievadīt JavaScript kodu, kas apstrādā saišu klikšķus un atver nepieciešamo materiālu uznirstošajā logā. Šī metode padara risinājumu modulārāku un atkārtoti lietojamu vairākās SharePoint vides jomās, tādējādi uzlabojot apkopi.

Vienību pārbaude ir ļoti svarīga, lai nodrošinātu, ka uznirstošā funkcija darbojas pareizi vairākās vidēs un pārlūkprogrammās. Izmantojot Jasmine testēšanas sistēmā apstiprina, ka metode tiek izpildīta ar pareiziem argumentiem. Šis testēšanas veids identificē iespējamās problēmas izstrādes procesa sākumā un garantē, ka uznirstošie logi darbojas, kā plānots. Šis risinājums pastiprina lietotāju mijiedarbību SharePoint PnP Modern Search WebPart, integrējot priekšgala notikumu apstrādi, aizmugursistēmas pielāgošanu un vienību testēšanu.

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

Notikumu apstrādes un dinamiskās JavaScript injekcijas izpēte SPFx

Strādājot ar PnP Modern Search WebPart (SPFx), viena noderīga funkcija izstrādātājiem ir iespēja dinamiski pielāgot elementu, piemēram, saišu, darbību. JavaScript notikumu apstrādes izmantošana nodrošina daudz iespēju personalizēt lietotāju mijiedarbību. Notikumu uztvērēju izmantošana saišu klikšķu tveršanai un kontrolei rada interaktīvāku pieredzi. Tverot klikšķu notikumus, mēs varam ignorēt parasto darbību un atvērt URL kontrolētā uznirstošajā logā. Tas nodrošina vienmērīgu pāreju, netraucējot lietotāja pašreizējo cilni vai logu.

Lai pielāgotu saites SPFx WebParts, ir arī dinamiski jāievieto JavaScript kods. SharePoint Framework (SPFx) nodrošina tādas metodes kā un lai to paveiktu. Ievietojot pielāgotu JavaScript, izstrādātāji var mainīt meklēšanas rezultātu vienumu darbību, neveicot būtiskas izmaiņas pašā tīmekļa daļā. Šī elastība ļauj viegli veikt globālas korekcijas visām meklēšanas rezultātu saitēm, nodrošinot, ka vēlamā darbība, piemēram, atvēršana uznirstošajā logā, ir vienāda visā platformā.

Visbeidzot, veiktspēja un lietotāja pieredze ir kritiski faktori jebkurā tīmekļa sistēmā, un tas pats attiecas uz šo. Optimizējot JavaScript izmantošanu un ierobežojot resursietilpīgas darbības, mēs varam garantēt, ka šie pielāgojumi būtiski neietekmē lapas ielādes laiku vai atsaucību. Efektīva JavaScript izmantošana apvienojumā ar aizmugursistēmas SPFx modifikācijām nodrošina augstu elastības līmeni, nezaudējot veiktspēju, tādējādi nodrošinot nevainojamu lietotāja pieredzi visā SharePoint platformā.

1. Kā atvērt saiti uznirstošajā logā, izmantojot JavaScript?
2. Jūs varat izmantot funkcija JavaScript. Šī funkcija ļauj atvērt jaunu pārlūkprogrammas logu vai uznirstošo logu ar konkrētiem rekvizītiem, piemēram, izmēru un ritjoslām.
3. Ko dara darīt?
4. The metode neļauj notikumam veikt noklusējuma darbību. Šajā gadījumā tas neļauj saitei atvērties jaunā cilnē, vienlaikus atļaujot noteiktas darbības, piemēram, parādīt uznirstošo logu.
5. Kā piemērot pielāgotu darbību daudzām SPFx saitēm?
6. Izmantojot JavaScript jūs varat izvēlēties vairākus komponentus un pievienot tiem notikumu uztvērējus, garantējot, ka tie visi rīkojas vienādi.
7. Kā es varu ignorēt SPFx WebParts noklusējuma renderēšanu?
8. Lai pielāgotu SPFx WebParts darbību, izmantojiet dekorators. Tas ļauj ievadīt pielāgotu JavaScript tieši WebPart renderēšanas procesā.
9. Kāds ir labākais paņēmiens, lai noteiktu, vai uznirstošais logs tiek atvērts pareizi?
10. Izmantojot vienību testus tādā sistēmā kā Jasmine, varat izmantot lai uzraudzītu, vai funkcija tiek izsaukta atbilstoši paredzamajiem parametriem.

Saišu atvēršanas veidu uznirstošajā logā var pielāgot, izmantojot JavaScript PnP modernās meklēšanas tīmekļa daļā (SPFx). Šīs izmaiņas uzlabo lietotāju mijiedarbību, saglabājot viņu iesaistīšanos pašreizējā cilnē, vienlaikus nodrošinot piekļuvi detalizētam saturam kontrolētā uznirstošajā logā.

Lai saglabātu konsekventu uzvedību, izmantojiet tādas metodes kā un dinamiski ievadiet JavaScript SPFx WebParts. Turklāt vienību testēšana palīdz nodrošināt, ka šīs izmaiņas darbojas labi daudzos kontekstos, tādējādi radot uzticamu, lietotājam draudzīgu risinājumu SharePoint meklēšanas rezultātu pielāgošanai.