Linkkien avaaminen ponnahdusikkunassa PnP Modern Search WebPartissa (SFx)

Paranna käyttökokemusta mukautetuilla ponnahduslinkeillä SPFx:ssä

Nykyaikaisessa SharePoint-kehityksessä PnP Modern Search WebPart (SPFx) -ominaisuuden käyttäminen konfiguroitavien hakutulosten tarjoamiseen voi parantaa käyttökokemusta merkittävästi. Linkkien avautumisen hallinta on suosittu ominaisuus kehittäjien keskuudessa, varsinkin "Yksityiskohtainen luettelo" -asettelussa. Yleensä linkit avautuvat uuteen välilehteen, mutta entä jos haluamme avata ne ponnahdusikkunassa?

Tässä viestissä tarkastelemme, kuinka tämä toiminto toteutetaan muuttamalla PnP Modern Search WebPartin linkkikäyttäytymistä. Sen sijaan, että avaamme hakutulokset uudessa välilehdessä, näytämme, kuinka linkki pakotetaan avautumaan mukautetussa ponnahdusikkunassa, mikä johtaa integroidumpaan käyttökokemukseen.

Haaste syntyy, kun käytät kaavaa, kuten `", joka on oletuksena uusi välilehti. JavaScriptiä käyttämällä voimme kuitenkin ohittaa tämän toiminnan ja avata linkin ohjatussa ponnahdusikkunassa. Tämä mahdollistaa enemmän joustavuutta sisällön näyttämisessä saman selausistunnon aikana.

Ohjaamme sinut tämän ominaisuuden kehittämiseen tarvittaviin vaiheisiin keskittyen JavaScriptin ja SPFx:n käyttämiseen yksityiskohtaisen luettelon asettelun parantamiseen. Pysy kuulolla, kun käymme läpi ratkaisun varmistaaksesi, että SharePoint-sivustosi on saumaton ja käyttäjäystävällinen.

Ponnahdusikkunaratkaisun ymmärtäminen SPFx:ssä

Yllä luetellut komentosarjat säätävät linkkien oletuskäyttäytymistä PnP Modern Search WebPartissa (SPFx). Oletusarvoisesti linkit käyttävät target="_blank" -tagi avataksesi uudelle välilehdelle. Tarkoituksena on kuitenkin avata nämä linkit ponnahdusikkunassa, mikä lisää käyttäjän vuorovaikutusta. Tämän saavuttamiseksi käytimme window.open() toiminto, jonka avulla kehittäjät voivat avata URL-osoitteita uudessa selainikkunassa tai ponnahdusikkunassa. Tätä toimintoa voidaan säätää tietyillä parametreilla, kuten leveydellä, korkeudella ja muilla ominaisuuksilla (kuten vierityspalkkeilla tai koon muuttamisella), jotta varmistetaan, että ponnahdusikkuna toimii tarkoitetulla tavalla.

Ankkuritunnisteiden oletusnapsautuskäyttäytymisen ohittaminen on olennainen osa lähestymistapaa. Tämä tehdään kanssa event.preventDefault(), joka estää linkkiä avautumasta uuteen välilehteen. Sen sijaan liitämme linkkiin tapahtumakuuntelijan, joka aktivoi mukautetun toiminnon (tässä tapauksessa openInPopup()), joka käsittelee napsautustapahtuman ja avaa URL-osoitteen ponnahdusikkunassa. Tämä antaa kehittäjille mahdollisuuden hallita linkin toimintaa paremmin ja johtaa johdonmukaisempaan käyttökokemukseen PnP Modern Search WebPartissa.

Etupään käyttäytymisen käsittelyn lisäksi tutkimme myös taustaratkaisua käyttämällä SPFx:n sisäänrakennettuja koristeita, kuten @ohittaa. Tämän lähestymistavan avulla kehittäjät voivat lisätä JavaScriptiä suoraan mukautettuihin WebOsiin, mikä muuttaa hakutulosten toimintaa entisestään. Renderöintiprosessin ohittaminen SPFx:ssä antaa meille mahdollisuuden syöttää JavaScript-koodia, joka käsittelee linkkien napsautuksia ja avaa tarvittavan materiaalin ponnahdusikkunassa. Tämä tekniikka tekee ratkaisusta modulaarisemman ja uudelleenkäytettävyyden useilla SharePoint-ympäristön alueilla, mikä parantaa ylläpitoa.

Yksikkötestaus on kriittinen sen varmistamiseksi, että ponnahdusikkuna toimii oikein useissa ympäristöissä ja selaimissa. Käyttämällä spyOn() Jasmine-testauskehyksessä vahvistaa, että window.open() menetelmä suoritetaan oikeilla argumenteilla. Tämä testausmuoto tunnistaa mahdolliset ongelmat varhaisessa kehitysprosessissa ja takaa, että ponnahdusikkunat toimivat suunnitellusti. Tämä ratkaisu vahvistaa käyttäjien vuorovaikutusta SharePointin PnP Modern Search WebPartissa integroimalla käyttöliittymän tapahtumien käsittelyn, taustajärjestelmän mukauttamisen ja yksikkötestauksen.

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

Tapahtumankäsittelyn ja dynaamisen JavaScript-injektion tutkiminen SPFx:ssä

Kun työskentelet PnP Modern Search WebPartin (SPFx) kanssa, yksi hyödyllinen ominaisuus kehittäjille on kyky säätää dynaamisesti elementtien, kuten linkkien, käyttäytymistä. JavaScript-tapahtumien käsittelyn käyttö tarjoaa lukuisia vaihtoehtoja käyttäjien vuorovaikutusten mukauttamiseen. Tapahtumaseurainten käyttö linkkien napsautusten tallentamiseen ja hallitsemiseen luo interaktiivisemman kokemuksen. Tallentamalla napsautustapahtumia voimme ohittaa normaalin toiminnan ja avata URL-osoitteita ohjatussa ponnahdusikkunassa. Tämä varmistaa sujuvan siirtymisen häiritsemättä käyttäjän nykyistä välilehteä tai ikkunaa.

Linkkien mukauttaminen SPFx WebPartsissa edellyttää myös JavaScript-koodin lisäämistä dynaamisesti. SharePoint Framework (SPFx) tarjoaa menetelmiä, kuten @ohittaa ja render() tämän toteuttamisesta. Lisäämällä mukautetun JavaScriptin kehittäjät voivat muuttaa hakutuloskohteiden käyttäytymistä ilman, että heidän tarvitsee tehdä merkittäviä muutoksia itse WebPartiin. Tämän joustavuuden ansiosta on helppo tehdä yleisiä säätöjä kaikkiin hakutuloslinkkeihin ja varmistaa, että haluttu toimintatapa – kuten avautuminen ponnahdusikkunassa – on yhtenäinen koko alustalla.

Lopuksi, suorituskyky ja käyttökokemus ovat kriittisiä tekijöitä kaikissa verkkopohjaisissa järjestelmissä, ja sama pätee myös täällä. Optimoimalla JavaScriptin käytön ja rajoittamalla resurssiintensiivistä toimintaa voimme taata, että näillä muokkauksilla ei ole merkittävää vaikutusta sivun latausaikoihin tai reagointikykyyn. Tehokas JavaScript-käyttö yhdistettynä taustajärjestelmän SPFx-muokkauksiin tarjoaa korkean tason joustavuutta suorituskyvystä tinkimättä, mikä johtaa saumattomaan käyttökokemukseen koko SharePoint-alustalla.