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.

Komento	Käyttöesimerkki
window.open()	Tämä komento avaa uuden selainikkunan tai välilehden. Tämä menetelmä avaa ponnahdusikkunan, jossa on tietyt mitat ja ominaisuudet, kuten leveys, korkeus ja vierityspalkit.
event.preventDefault()	Estää napsautetun linkin oletuskäytön, joka on URL-osoitteen avaaminen samassa tai uudessa välilehdessä. Tämän avulla voimme mukauttaa linkin toimintaa, esimerkiksi avata ponnahdusikkunan.
querySelectorAll()	Data-popup-attribuutti valitsee kaikki ankkurielementit (). Tämä menetelmä palauttaa NodeList-luettelon, jonka avulla voimme soveltaa tapahtumakuuntelijoita useisiin komponentteihin samanaikaisesti.
forEach()	Jokainen querySelectorAll():n tuottama NodeList-merkintä vastaanottaa toiminnon (esimerkiksi tapahtumakuuntelijan liittämisen). Tämä koskee monien dynaamisten linkkielementtien hallintaa PnP Modern Searchissa.
addEventListener()	Tämä tekniikka lisää napsautustapahtuman kuuntelijan jokaiseen linkkiin, joka käynnistää openInPopup()-funktion. Se on välttämätön oletusnapsautuskäyttäytymisen ohittamiseksi.
import { override }	Tämä koristelu on osa SharePoint Frameworkia (SPFx) ja sitä käytetään ohittamaan SPFx WebPartsin oletuskäyttäytyminen. Se mahdollistaa tietyt mukautukset, kuten JavaScriptin lisäämisen ponnahdusikkunoiden tarjoamiseksi.
@override	SPFx:ssä sisustaja osoittaa, että menetelmä tai ominaisuus ohittaa toiminnallisuuden. Tämä on tarpeen, kun muutetaan SharePoint-komponenttien toimintaa.
spyOn()	Valvoo toimintokutsuja yksikkötestauksen aikana Jasmine kanssa. Tässä skenaariossa sitä käytetään windows.open():n kanssa varmistamaan, että ponnahdusikkuna käynnistetään asianmukaisesti testauksen aikana.
expect()	Tätä komentoa käytetään yksikkötestaukseen Jasminessa. Se tarkistaa, että window.open() kutsuttiin oikeilla argumenteilla, mikä takaa, että ponnahdusikkuna tulee näkyviin halutuilla asetuksilla.

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 -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 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 , joka estää linkkiä avautumasta uuteen välilehteen. Sen sijaan liitämme linkkiin tapahtumakuuntelijan, joka aktivoi mukautetun toiminnon (tässä tapauksessa ), 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 . 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ä Jasmine-testauskehyksessä vahvistaa, että 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 ja 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.

1. Kuinka avaan linkin ponnahdusikkunassa JavaScriptillä?
2. Voit käyttää toiminto JavaScriptissä. Tämän toiminnon avulla voit avata uuden selainikkunan tai ponnahdusikkunan, jossa on tietyt ominaisuudet, kuten koko ja vierityspalkit.
3. Mitä tekee tehdä?
4. The menetelmä estää tapahtumaa suorittamasta oletustoimintoaan. Tässä tapauksessa se estää linkkiä avautumasta uudelle välilehdelle ja sallii tiettyjä toimintoja, kuten ponnahdusikkunan näyttämisen.
5. Kuinka voin soveltaa mukautettua toimintaa useisiin SPFx-linkkeihin?
6. Käyttämällä JavaScriptissä voit valita useita komponentteja ja liittää niihin tapahtumakuuntelijoita, mikä takaa, että ne kaikki noudattavat samaa toimintaa.
7. Kuinka ohitan SPFx-verkkoosien oletusmuodon?
8. Voit säätää SPFx-verkkoosien toimintaa käyttämällä sisustusarkkitehti. Tämän avulla voit lisätä mukautetun JavaScriptin suoraan WebPartin hahmonnusprosessiin.
9. Mikä on paras tekniikka selvittääksesi, avautuuko ponnahdusikkuna oikein?
10. Voit käyttää yksikkötestejä Jasminen kaltaisessa kehyksessä seurata, jos funktiota kutsutaan asianmukaisesti odotettujen parametrien kanssa.

Tapa, jolla linkit avautuvat ponnahdusikkunassa, voidaan mukauttaa JavaScriptin avulla PnP Modern Search WebPartissa (SPFx). Tämä muutos parantaa käyttäjien vuorovaikutusta pitämällä heidät aktiivisena nykyisellä välilehdellä ja tarjoamalla pääsyn yksityiskohtaiseen sisältöön ohjatussa ponnahdusikkunassa.

Käytä tekniikoita, kuten ja lisää dynaamisesti JavaScript SPFx-verkkoosiin. Lisäksi yksikkötestaus auttaa varmistamaan, että nämä muutokset toimivat hyvin monissa yhteyksissä, mikä johtaa luotettavaan ja käyttäjäystävälliseen ratkaisuun SharePoint-hakutulosten mukauttamiseen.