Kuidas avada linke hüpikaknas PnP kaasaegse otsingu veebiosas (SFx)

Kasutajakogemuse täiustamine SPFx-i kohandatud hüpikakna linkidega

Kaasaegses SharePointi arenduses võib PnP Modern Search WebParti (SPFx) kasutamine konfigureeritavate otsingutulemuste pakkumiseks kasutajakogemust märkimisväärselt parandada. Linkide avanemise juhtimine on arendajate seas populaarne funktsioon, eriti üksikasjaliku loendi paigutusega. Tavaliselt avanevad lingid uuel vahelehel, aga mis siis, kui tahame need avada hüpikaknas?

Selles postituses vaatleme, kuidas seda funktsiooni rakendada, muutes PnP kaasaegse otsingu veebiosa lingi käitumist. Selle asemel, et avada otsingutulemusi uuel vahelehel, näitame, kuidas sundida linki avama kohandatud hüpikaknas, mille tulemuseks on integreeritum kasutajakogemus.

Väljakutse tekib siis, kui kasutate sellist valemit nagu `", mis vaikimisi kuvab uue vahekaardi. Kuid JavaScripti kasutades saame selle käitumise alistada ja lingi avada kontrollitud hüpikaknas. See võimaldab sama sirvimisseansi jooksul sisu kuvamisel suuremat paindlikkust.

Juhendame teid selle funktsiooni arendamiseks vajalike sammudega, keskendudes JavaScripti ja SPFx-i kasutamisele üksikasjaliku loendi paigutuse täiustamiseks. Olge kursis, kui me lahenduse läbi käime, et teie SharePointi sait oleks sujuv ja kasutajasõbralik.

Hüpikakna lahenduse mõistmine SPFx-is

Eespool loetletud skriptid kohandavad PnP kaasaegse otsingu veebiosa (SPFx) linkide vaikekäitumist. Vaikimisi kasutavad lingid target="_blank" uuel vahelehel avamiseks. Kuid siin on eesmärk avada need lingid hüpikaknas, suurendades seeläbi kasutajate suhtlust. Selle saavutamiseks kasutasime window.open() funktsioon, mis võimaldab arendajatel avada URL-e uues brauseriaknas või hüpikaknas. Seda funktsiooni saab reguleerida konkreetsete parameetritega, nagu laius, kõrgus ja muud atribuudid (nt kerimisribad või suuruse muutmine), et tagada hüpikakna kavandatud toimimine.

Ankrumärgendite kliki vaikekäitumise alistamine on selle lähenemisviisi oluline komponent. Seda tehakse koos event.preventDefault(), mis takistab lingi avanemist uuel vahelehel. Selle asemel lisame lingile sündmustekuulaja, mis aktiveerib kohandatud funktsiooni (antud juhul openInPopup()), mis käsitleb klõpsusündmust ja avab URL-i hüpikaknas. See võimaldab arendajatel lingi käitumist paremini kontrollida ja tagab PnP kaasaegse otsingu veebiosas ühtlasema kasutuskogemuse.

Lisaks esiotsa käitumisega tegelemisele uurisime ka taustaprogrammi, kasutades SPFx-i sisseehitatud dekoraatoreid, nagu @alista. See lähenemisviis võimaldab arendajatel sisestada JavaScripti otse kohandatud veebiosadesse, muutes otsingutulemuste käitumist veelgi. Renderdusprotsessi tühistamine SPFx-is võimaldab meil sisestada JavaScripti koodi, mis käsitleb lingiklõpse ja avab hüpikaknas vajaliku materjali. See tehnika muudab lahenduse modulaarsemaks ja SharePointi keskkonna mitmes piirkonnas korduvkasutatavaks, parandades seega hooldust.

Ühiku testimine on kriitilise tähtsusega tagamaks, et hüpikakna funktsioon toimiks õigesti mitmes keskkonnas ja brauseris. Kasutades spyOn() Jasmine testimisraamistikus kinnitab, et window.open() meetod käivitatakse õigete argumentidega. See testimisvorm tuvastab võimalikud probleemid arendusprotsessi varajases staadiumis ja tagab, et hüpikaknad toimivad plaanipäraselt. See lahendus tugevdab kasutajate suhtlust SharePointi PnP Modern Search WebPartis, integreerides esiotsa sündmuste haldamise, taustaprogrammi kohandamise ja üksuste testimise.

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

Sündmuste haldamise ja dünaamilise JavaScripti sisestamise uurimine SPFx-is

PnP Modern Search WebPartiga (SPFx) töötades on arendajatele üks kasulik funktsioon võimalus dünaamiliselt reguleerida elementide, näiteks linkide käitumist. JavaScripti sündmuste käsitlemise kasutamine pakub kasutaja interaktsioonide isikupärastamiseks palju võimalusi. Sündmuskuulajate kasutamine lingiklõpsude jäädvustamiseks ja juhtimiseks loob interaktiivsema kogemuse. Klikisündmusi jäädvustades võime alistada tavapärase käitumise ja avada URL-id kontrollitud hüpikaknas. See tagab sujuva ülemineku, häirimata kasutaja praegust vahekaarti või akent.

Linkide kohandamine SPFx WebPartsis nõuab ka JavaScripti koodi dünaamilist sisestamist. SharePointi raamistik (SPFx) pakub selliseid meetodeid nagu @alista ja render () selle saavutamise eest. Kohandatud JavaScripti sisestamisega saavad arendajad muuta otsingutulemuste üksuste käitumist, ilma et nad peaksid veebiosas endas olulisi muudatusi tegema. See paindlikkus muudab kõigi otsingutulemuste linkide üldise kohandamise lihtsaks, tagades, et soovitud käitumine (nt hüpikaknas avamine) on kogu platvormil ühtlane.

Lõpuks on jõudlus ja kasutajakogemus igas veebipõhises süsteemis kriitilised tegurid ja sama kehtib ka siin. JavaScripti kasutamist optimeerides ja ressursimahukaid tegevusi piirates võime tagada, et need kohandused ei mõjuta oluliselt lehe laadimisaegu ega reageerimisvõimet. Tõhus JavaScripti kasutamine koos taustaprogrammi SPFx modifikatsioonidega tagab suure paindlikkuse ilma jõudlust ohverdamata, mille tulemuseks on sujuv kasutuskogemus kogu SharePointi platvormil.