Millora de l'experiència de l'usuari amb enllaços emergents personalitzats a SPFx
En el desenvolupament modern de SharePoint, l'ús de PnP Modern Search WebPart (SPFx) per proporcionar resultats de cerca configurables pot millorar significativament l'experiència de l'usuari. Controlar com s'obren els enllaços és una característica popular entre els desenvolupadors, especialment amb el disseny "Llista detallada". Normalment, els enllaços s'obren en una pestanya nova, però què passa si els volem obrir en una finestra emergent?
En aquesta publicació, veurem com implementar aquesta funcionalitat canviant el comportament de l'enllaç de la part web de cerca moderna PnP. En lloc d'obrir els resultats de la cerca en una pestanya nova, mostrarem com forçar l'enllaç a obrir-se en una finestra emergent personalitzada, donant lloc a una experiència d'usuari més integrada.
El repte sorgeix quan utilitzeu una fórmula com ``, que per defecte és una pestanya nova. Tanmateix, utilitzant JavaScript, podem anul·lar aquest comportament i obrir l'enllaç en una finestra emergent controlada. Això permet més flexibilitat a l'hora de mostrar contingut dins de la mateixa sessió de navegació.
Us explicarem els passos necessaris per desenvolupar aquesta funció, centrant-vos en l'ús de JavaScript i SPFx per millorar el disseny de la llista detallada. Estigueu atents mentre passem per la solució per garantir que el vostre lloc de SharePoint sigui perfecte i fàcil d'utilitzar.
| Comandament | Exemple d'ús |
|---|---|
| window.open() | Aquesta ordre obrirà una nova finestra o pestanya del navegador. Aquest mètode obre una finestra emergent amb certes dimensions i propietats, com ara l'amplada, l'alçada i les barres de desplaçament. |
| event.preventDefault() | Impedeix el comportament predeterminat d'un enllaç clicat, que és obrir l'URL a la mateixa pestanya o a una nova. Això ens permet personalitzar com actua l'enllaç, com ara obrir una finestra emergent. |
| querySelectorAll() | L'atribut data-popup selecciona tots els elements d'ancoratge (). Aquest mètode retorna una NodeList, que ens permet aplicar escoltes d'esdeveniments a diversos components simultàniament. |
| forEach() | Cada entrada de NodeList produïda per querySelectorAll() rep una acció (per exemple, adjuntar un escolta d'esdeveniments). Això s'aplica a la gestió de molts elements d'enllaç dinàmic a la cerca moderna PnP. |
| addEventListener() | Aquesta tècnica afegeix un oient d'esdeveniments de clic a cada enllaç que activa la funció openInPopup(). És necessari per anul·lar el comportament de clic predeterminat. |
| import { override } | Aquest decorador forma part del SharePoint Framework (SPFx) i s'utilitza per anul·lar el comportament predeterminat de SPFx WebParts. Permet personalitzacions específiques, com ara la injecció de JavaScript per proporcionar una funcionalitat emergent. |
| @override | A SPFx, un decorador indica que un mètode o propietat anul·la la funcionalitat. Això és necessari quan es modifica el comportament dels components del SharePoint. |
| spyOn() | Supervisa les trucades de funció durant les proves d'unitat amb Jasmine. En aquest escenari, s'utilitza amb window.open() per garantir que la finestra emergent s'inicia correctament durant la prova. |
| expect() | Aquesta ordre s'utilitza per a proves d'unitats a Jasmine. Comprova que window.open() s'ha cridat amb els arguments correctes, garantint que la finestra emergent apareix amb la configuració desitjada. |
Entendre la solució de la finestra emergent a SPFx
Els scripts enumerats anteriorment ajusten el comportament predeterminat dels enllaços dins d'una part web de cerca moderna PnP (SPFx). De manera predeterminada, els enllaços utilitzen target="_blank" etiqueta per obrir-lo en una pestanya nova. Tanmateix, el propòsit aquí és obrir aquests enllaços en una finestra emergent, augmentant així la interacció de l'usuari. Per aconseguir-ho, hem utilitzat el window.open() funció, que permet als desenvolupadors obrir URL en una finestra o finestra emergent del navegador. Aquesta funció es pot ajustar amb paràmetres específics, com ara l'amplada, l'alçada i altres atributs (com ara barres de desplaçament o redimensionament), per assegurar-se que la finestra emergent funciona com es pretén.
La substitució del comportament de clic predeterminat de les etiquetes d'ancoratge és un component vital de l'enfocament. Això es fa amb event.preventDefault(), que impedeix que l'enllaç s'obri en una pestanya nova. En lloc d'això, adjuntem un oient d'esdeveniments a l'enllaç, que activa una funció personalitzada (en aquest cas, openInPopup()) que gestiona l'esdeveniment de clic i obre l'URL en una finestra emergent. Això permet als desenvolupadors més control sobre el comportament de l'enllaç i es tradueix en una experiència d'usuari més coherent a la part web de cerca moderna PnP.
A més de tractar amb el comportament del front-end, també vam examinar un enfocament del backend utilitzant els decoradors integrats de SPFx com ara @override. Aquest enfocament permet als desenvolupadors inserir directament JavaScript a les WebParts personalitzades, modificant encara més el comportament dels resultats de la cerca. La substitució del procés de representació a SPFx ens permet injectar codi JavaScript que gestiona els clics d'enllaç i obre el material necessari en una finestra emergent. Aquesta tècnica fa que la solució sigui més modular i reutilitzable en diverses àrees d'un entorn de SharePoint, per tant, millora el manteniment.
Les proves unitàries són fonamentals per garantir que la funció emergent funcioni correctament en diversos entorns i navegadors. Utilitzant spyOn() en un marc de proves de Jasmine valida que el window.open() El mètode s'executa amb els arguments adequats. Aquesta forma de prova identifica problemes potencials al principi del procés de desenvolupament i garanteix que les finestres emergents funcionin com estava previst. Aquesta solució reforça les interaccions dels usuaris a la part web de cerca moderna PnP de SharePoint integrant la gestió d'esdeveniments de front-end, la personalització de backend i les proves d'unitat.
Solució 1: utilitzant JavaScript `window.open` per crear una finestra emergent
Aquest enfocament utilitza JavaScript per substituir el comportament predeterminat d'obrir un enllaç en una pestanya nova per una finestra emergent, que és ideal per a solucions frontals dinàmiques creades amb SPFx en un context de SharePoint.
<script>function openInPopup(url) {// Define popup window featuresconst features = 'width=800,height=600,resizable=yes,scrollbars=yes';// Open URL in popupwindow.open(url, '_blank', features);}// Override link behaviordocument.querySelectorAll('a[data-popup="true"]').forEach(function (link) {link.addEventListener('click', function (event) {event.preventDefault(); // Prevent default link behavioropenInPopup(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>
Solució 2: afegir JavaScript en línia directament a l'etiqueta d'enllaç
Aquest mètode incorpora JavaScript en línia dins de l'etiqueta d'enllaç HTML, el que el fa ideal per a un sistema frontal dinàmic lleuger que té poques dependències externes.
<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.
Solució 3: enfocament de backend utilitzant SPFx amb injecció de JavaScript
Aquest enfocament utilitza el SharePoint Framework (SPFx) per injectar JavaScript en un WebPart personalitzat, permetent que els enllaços s'obrin en una finestra emergent mitjançant mètodes JavaScript.
import { override } from '@microsoft/decorators';import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';export default class PopupWebPart extends BaseClientSideWebPart {@overridepublic 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');}
Test unitari per al comportament emergent de JavaScript
Les proves unitàries poden garantir que la funcionalitat emergent sigui coherent en tots els navegadors i entorns. Aquí teniu una prova bàsica de Jasmine per a la validació frontal.
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));});});
Explorant la gestió d'esdeveniments i la injecció dinàmica de JavaScript a SPFx
Quan es treballa amb PnP Modern Search WebPart (SPFx), una característica útil per als desenvolupadors és la capacitat d'ajustar dinàmicament com es comporten els elements, com ara els enllaços. L'ús de la gestió d'esdeveniments de JavaScript ofereix una gran quantitat d'opcions per personalitzar les interaccions dels usuaris. L'ús d'oients d'esdeveniments per capturar i controlar els clics d'enllaços crea una experiència més interactiva. En capturar esdeveniments de clic, podem anul·lar el comportament normal i obrir URL en una finestra emergent controlada. Això garanteix una transició suau sense pertorbar la pestanya o finestra actual de l'usuari.
La personalització dels enllaços a SPFx WebParts també requereix la inserció dinàmica de codi JavaScript. El SharePoint Framework (SPFx) proporciona mètodes com @override i render () per aconseguir això. En inserir JavaScript personalitzat, els desenvolupadors poden canviar el comportament dels elements de resultats de la cerca sense haver de fer modificacions significatives a la WebPart. Aquesta flexibilitat facilita la realització d'ajustos globals a tots els enllaços de resultats de la cerca, assegurant que el comportament desitjat, com ara obrir-se en una finestra emergent, sigui uniforme a tota la plataforma.
Finalment, el rendiment i l'experiència de l'usuari són factors crítics en qualsevol sistema basat en web, i el mateix passa aquí. En optimitzar l'ús de JavaScript i limitar les activitats que consumeixen molts recursos, podem assegurar-nos que aquestes personalitzacions no tenen cap influència significativa en els temps de càrrega de la pàgina o la capacitat de resposta. L'ús eficient de JavaScript, combinat amb les modificacions SPFx de fons, proporciona un alt nivell de flexibilitat sense sacrificar el rendiment, donant lloc a una experiència d'usuari perfecta a tota la plataforma SharePoint.
Preguntes més freqüents sobre la personalització SPFx per a finestres emergents
- Com puc obrir un enllaç en una finestra emergent amb JavaScript?
- Podeu utilitzar el window.open() funció en JavaScript. Aquesta funció us permet obrir una nova finestra del navegador o una finestra emergent amb propietats específiques, com ara la mida i les barres de desplaçament.
- Què fa event.preventDefault() fer?
- El event.preventDefault() impedeix que un esdeveniment faci la seva acció per defecte. En aquest cas, impedeix que l'enllaç s'obri en una pestanya nova alhora que permet accions específiques, com ara mostrar una finestra emergent.
- Com aplico un comportament personalitzat a nombrosos enllaços a SPFx?
- Utilitzant querySelectorAll() a JavaScript, podeu triar diversos components i adjuntar-hi escoltes d'esdeveniments, garantint que tots segueixin el mateix comportament.
- Com anul·lo la representació predeterminada de SPFx WebParts?
- Per ajustar el comportament de SPFx WebParts, utilitzeu @override decorador. Això us permet injectar JavaScript personalitzat directament al procés de representació de la WebPart.
- Quina és la millor tècnica per determinar si una finestra emergent s'obre correctament?
- Podeu utilitzar proves unitàries en un marc com Jasmine spyOn() per controlar si el window.open() La funció es crida adequadament amb els paràmetres previstos.
Punts clau per implementar finestres emergents a SPFx
La manera com s'obren els enllaços en una finestra emergent es pot personalitzar mitjançant JavaScript dins de la part web de cerca moderna PnP (SPFx). Aquest canvi millora la interacció dels usuaris mantenint-los compromesos a la pestanya actual alhora que ofereix accés a contingut detallat en una finestra emergent controlada.
Per mantenir un comportament coherent, utilitzeu tècniques com event.preventDefault() i injecteu JavaScript dinàmicament a SPFx WebParts. A més, les proves unitàries ajuden a garantir que aquests canvis funcionin bé en molts contextos, donant com a resultat una solució fiable i fàcil d'utilitzar per a la personalització dels resultats de la cerca de SharePoint.
Referències i Recursos
- La informació sobre el PnP Modern Search WebPart (SPFx) i la personalització del comportament dels enllaços es va obtenir de la documentació oficial. Per a més detalls, visiteu el Repositori de GitHub de cerca moderna PnP .
- Orientació sobre l'ús de mètodes JavaScript com ara window.open() i es va fer referència als oients d'esdeveniments des del MDN Web Docs per a JavaScript.
- Detalls sobre les personalitzacions de SharePoint Framework (SPFx), inclosa la injecció de JavaScript i @override, es pot trobar a Visió general de SharePoint Framework .