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.

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 target="_blank" 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 window.open() 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 event.preventDefault(), kas neļauj saitei atvērties jaunā cilnē. Tā vietā saitei pievienojam notikumu uztvērēju, kas aktivizē pielāgotu funkciju (šajā gadījumā openInPopup()), 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, @override. Šī 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 spyOn() Jasmine testēšanas sistēmā apstiprina, ka window.open() 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ā @override un renderēt () 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ā.