Kaip atidaryti nuorodas iššokančiame lange PnP Modern Search WebPart (SFx)

Vartotojo patirties gerinimas naudojant pasirinktines SPFx iššokančiųjų langų nuorodas

Šiuolaikinio „SharePoint“ kūrimo metu naudojant PnP modernios paieškos žiniatinklio dalį (SPFx), kad būtų pateikti konfigūruojami paieškos rezultatai, galima žymiai pagerinti vartotojo patirtį. Nuorodų atidarymo valdymas yra populiari kūrėjų funkcija, ypač naudojant „Detaliojo sąrašo“ išdėstymą. Paprastai nuorodos atidaromos naujame skirtuke, bet ką daryti, jei norime jas atidaryti iššokančiajame lange?

Šiame įraše apžvelgsime, kaip įdiegti šią funkciją pakeičiant PnP modernios paieškos žiniatinklio dalies nuorodų elgseną. Užuot atidarę paieškos rezultatus naujame skirtuke, parodysime, kaip priverstinai atsidaryti nuorodą tinkintame iššokančiame lange, kad naudotojo patirtis būtų labiau integruota.

Iššūkis kyla, kai naudojate tokią formulę kaip `", kuri pagal numatytuosius nustatymus rodomas naujame skirtuke. Tačiau naudodami „JavaScript“ galime nepaisyti šio elgesio ir atidaryti nuorodą kontroliuojamame iššokančiame lange. Tai suteikia daugiau lankstumo rodant turinį tos pačios naršymo sesijos metu.

Supažindinsime su veiksmais, kurių reikia norint sukurti šią funkciją, daugiausia dėmesio skirdami „JavaScript“ ir SPFx naudojimui, kad patobulintume išsamaus sąrašo išdėstymą. Stebėkite naujienas, kai ieškome sprendimo, kad jūsų „SharePoint“ svetainė būtų sklandi ir patogi naudoti.

Iššokančiųjų langų sprendimo supratimas naudojant SPFx

Aukščiau išvardyti scenarijai koreguoja numatytąjį nuorodų veikimą PnP modernios paieškos žiniatinklio dalyje (SPFx). Pagal numatytuosius nustatymus nuorodos naudoja target="_blank" žymą, kad atidarytumėte naujame skirtuke. Tačiau tikslas yra atidaryti šias nuorodas iššokančiajame lange, taip padidinant vartotojo sąveiką. Norėdami tai padaryti, mes panaudojome window.open() funkcija, leidžianti kūrėjams atidaryti URL naujame naršyklės lange arba iššokančiajame lange. Šią funkciją galima koreguoti naudojant tam tikrus parametrus, tokius kaip plotis, aukštis ir kiti atributai (pvz., slinkties juostos arba dydžio keitimas), kad iššokantis langas veiktų taip, kaip numatyta.

Nepaisyti numatytojo prieraišo žymų spustelėjimo elgesio yra labai svarbus šio metodo komponentas. Tai daroma su event.preventDefault(), kuri neleidžia nuorodai atidaryti naujame skirtuke. Vietoj to prie nuorodos pridedame įvykių klausytoją, kuris suaktyvina pasirinktinę funkciją (šiuo atveju, openInPopup()), kuris apdoroja paspaudimo įvykį ir atidaro URL iššokančiajame lange. Tai leidžia kūrėjams labiau kontroliuoti nuorodos veikimą ir užtikrina nuoseklesnę vartotojo patirtį PnP modernios paieškos žiniatinklio dalyje.

Be to, kad nagrinėjome priekinės dalies elgseną, mes taip pat išnagrinėjome užpakalinės dalies metodą, naudodami SPFx integruotus dekoratorius, pvz. @override. Šis metodas leidžia kūrėjams tiesiogiai įterpti „JavaScript“ į tinkintas žiniatinklio dalis ir toliau keisti paieškos rezultatų veikimą. SPFx atvaizdavimo proceso nepaisymas leidžia įterpti JavaScript kodą, kuris tvarko nuorodų paspaudimus ir atidaro reikiamą medžiagą iššokančiame lange. Dėl šios technikos sprendimas tampa moduliškesnis ir pakartotinai naudojamas keliose SharePoint aplinkos srityse, todėl pagerėja priežiūra.

Vienetų testavimas yra labai svarbus siekiant užtikrinti, kad iššokančioji funkcija tinkamai veiktų įvairiose aplinkose ir naršyklėse. Naudojant spyOn () Jasmine testavimo sistemoje patvirtina, kad window.open() metodas vykdomas su tinkamais argumentais. Ši testavimo forma nustato galimas problemas ankstyvame kūrimo etape ir garantuoja, kad iššokantys langai veiks taip, kaip planuota. Šis sprendimas sustiprina vartotojų sąveiką „SharePoint PnP Modern Search WebPart“, integruodamas sąsajos įvykių tvarkymą, užpakalinės programos tinkinimą ir vienetų testavimą.

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

Įvykių tvarkymo ir dinaminio JavaScript įvedimo tyrinėjimas naudojant SPFx

Dirbant su PnP Modern Search WebPart (SPFx), viena naudinga kūrėjams funkcija yra galimybė dinamiškai koreguoti elementų, pvz., nuorodų, veikimą. „JavaScript“ įvykių apdorojimo naudojimas suteikia daugybę galimybių pritaikyti vartotojo sąveiką. Įvykių klausytojų naudojimas nuorodų paspaudimams užfiksuoti ir valdyti sukuria interaktyvesnę patirtį. Užfiksuodami paspaudimų įvykius galime nepaisyti įprasto elgesio ir atidaryti URL valdomame iššokančiame lange. Tai užtikrina sklandų perėjimą nepažeidžiant dabartinio vartotojo skirtuko ar lango.

Norint tinkinti nuorodas į SPFx WebParts, taip pat reikia dinamiškai įterpti JavaScript kodą. „SharePoint Framework“ (SPFx) pateikia tokius metodus kaip @override ir pateikti () kad tai įvykdytų. Įterpdami tinkintą „JavaScript“, kūrėjai gali pakeisti paieškos rezultatų elementų veikimą neatlikdami reikšmingų pačios žiniatinklio dalies pakeitimų. Dėl šio lankstumo lengva atlikti visuotinius visų paieškos rezultatų nuorodų koregavimus ir užtikrinti, kad norima elgsena, pvz., atsidarymas iššokančiajame lange, būtų vienoda visoje platformoje.

Galiausiai, našumas ir vartotojo patirtis yra esminiai veiksniai bet kurioje žiniatinklio sistemoje, taip pat ir čia. Optimizuodami „JavaScript“ naudojimą ir apribodami daug išteklių reikalaujančią veiklą, galime užtikrinti, kad šie tinkinimai neturės didelės įtakos puslapio įkėlimo laikui ar atsakui. Veiksmingas „JavaScript“ naudojimas kartu su SPFx modifikacijomis užtikrina didelį lankstumą neprarandant našumo, todėl visos „SharePoint“ platformos naudotojo patirtis yra sklandi.