Zlepšenie používateľskej skúsenosti pomocou vlastných kontextových odkazov v SPFx
V modernom vývoji SharePointu môže používanie PnP Modern Search WebPart (SPFx) na poskytovanie konfigurovateľných výsledkov vyhľadávania výrazne zlepšiť používateľskú skúsenosť. Ovládanie otvárania odkazov je obľúbenou funkciou medzi vývojármi, najmä s rozložením „Podrobný zoznam“. Normálne sa odkazy otvárajú na novej karte, ale čo ak ich chceme otvoriť v kontextovom okne?
V tomto príspevku sa pozrieme na to, ako implementovať túto funkciu zmenou správania odkazu webovej časti PnP Modern Search WebPart. Namiesto otvárania výsledkov vyhľadávania na novej karte si ukážeme, ako vynútiť otvorenie odkazu v prispôsobenom kontextovom okne, čo vedie k integrovanejšej používateľskej skúsenosti.
Problém nastáva, keď použijete vzorec ako ``, ktorý je predvolene nastavený na novú kartu. Pomocou JavaScriptu však môžeme toto správanie prepísať a odkaz otvoriť v kontrolovanom vyskakovacom okne. To umožňuje väčšiu flexibilitu pri zobrazovaní obsahu v rámci rovnakej relácie prehliadania.
Prevedieme vás krokmi potrebnými na vývoj tejto funkcie so zameraním na používanie JavaScriptu a SPFx na zlepšenie rozloženia podrobného zoznamu. Zostaňte naladení, keď prechádzame riešením, aby ste sa uistili, že vaša lokalita SharePoint bude bezproblémová a užívateľsky prívetivá.
| Príkaz | Príklad použitia |
|---|---|
| window.open() | Tento príkaz otvorí nové okno alebo kartu prehliadača. Táto metóda otvorí kontextové okno s určitými rozmermi a vlastnosťami, ako je šírka, výška a posuvníky. |
| event.preventDefault() | Zabráni predvolenému správaniu odkazu, na ktorý sa klikne, čo znamená otvorenie adresy URL na rovnakej alebo novej karte. To nám umožňuje prispôsobiť spôsob fungovania odkazu, ako napríklad otvorenie kontextového okna. |
| querySelectorAll() | Atribút data-popup vyberá všetky prvky kotvy (). Táto metóda vracia NodeList, čo nám umožňuje aplikovať poslucháčov udalostí na niekoľko komponentov súčasne. |
| forEach() | Každá položka v zozname NodeList vytvorená pomocou querySelectorAll() dostane akciu (napríklad pripojenie poslucháča udalostí). Týka sa to správy mnohých prvkov dynamického prepojenia v modernom vyhľadávaní PnP. |
| addEventListener() | Táto technika pridáva prijímač udalosti kliknutia ku každému odkazu, ktorý spúšťa funkciu openInPopup(). Je to nevyhnutné na prepísanie predvoleného kliknutia. |
| import { override } | Tento dekorátor je súčasťou SharePoint Framework (SPFx) a používa sa na prepísanie predvoleného správania SPFx WebParts. Umožňuje špecifické prispôsobenia, ako napríklad vkladanie JavaScriptu na poskytovanie funkcií kontextových okien. |
| @override | V SPFx dekorátor označuje, že metóda alebo vlastnosť má prednosť pred funkčnosťou. Je to potrebné pri úprave správania komponentov SharePointu. |
| spyOn() | Monitoruje volania funkcií počas testovania jednotky s Jasmine. V tomto scenári sa používa s window.open(), aby sa zaručilo správne spustenie kontextového okna počas testovania. |
| expect() | Tento príkaz sa používa na testovanie jednotiek v Jasmine. Skontroluje, či bola funkcia window.open() zavolaná so správnymi argumentmi, čo zaručuje, že sa kontextové okno zobrazí s požadovanými nastaveniami. |
Pochopenie riešenia kontextového okna v SPFx
Skripty uvedené vyššie upravujú predvolené správanie odkazov v rámci PnP Modern Search WebPart (SPFx). Odkazy štandardne používajú na otvorenie na novej karte. Účelom je však otvárať tieto odkazy vo vyskakovacom okne, čím sa zvyšuje interakcia používateľa. Aby sme to dosiahli, použili sme funkcia, ktorá umožňuje vývojárom otvárať adresy URL v novom okne prehliadača alebo kontextovom okne. Túto funkciu je možné upraviť pomocou špecifických parametrov, ako je šírka, výška a ďalšie atribúty (ako posuvníky alebo možnosť zmeny veľkosti), aby sa zabezpečilo, že vyskakovacie okno bude fungovať podľa plánu.
Prepísanie predvoleného kliknutia kotvových značiek je dôležitou súčasťou prístupu. Toto sa robí s , čo bráni otvoreniu odkazu na novej karte. Namiesto toho k odkazu pripojíme prijímač udalostí, ktorý aktivuje vlastnú funkciu (v tomto prípade ), ktorý spracuje udalosť kliknutia a otvorí adresu URL vo vyskakovacom okne. To umožňuje vývojárom väčšiu kontrolu nad správaním odkazu a výsledkom je konzistentnejšia používateľská skúsenosť v rámci PnP Modern Search WebPart.
Okrem riešenia front-endového správania sme tiež skúmali backendový prístup pomocou vstavaných dekorátorov SPFx, ako sú . Tento prístup umožňuje vývojárom priamo vkladať JavaScript do vlastných WebParts, čím ďalej upravuje správanie výsledkov vyhľadávania. Prepísanie procesu vykresľovania v SPFx nám umožňuje vložiť kód JavaScript, ktorý spracováva kliknutia na odkazy a otvára potrebný materiál vo vyskakovacom okne. Vďaka tejto technike je riešenie modulárnejšie a opakovane použiteľné vo viacerých oblastiach prostredia SharePoint, čím sa zlepšuje údržba.
Testovanie jednotiek je rozhodujúce na zabezpečenie správneho fungovania kontextových okien vo viacerých prostrediach a prehliadačoch. Používanie v rámci testovania Jasmine potvrdzuje, že metóda sa vykonáva so správnymi argumentmi. Táto forma testovania identifikuje potenciálne problémy na začiatku procesu vývoja a zaručuje, že vyskakovacie okná fungujú podľa plánu. Toto riešenie posilňuje interakciu používateľov vo webovej časti PnP Modern Search WebPart SharePoint integráciou front-end spracovania udalostí, prispôsobenia backendu a testovania jednotiek.
Riešenie 1: Pomocou JavaScriptu `window.open` vytvorte kontextové okno
Tento prístup používa JavaScript na nahradenie predvoleného správania otvárania odkazu na novej karte kontextovým oknom, čo je ideálne pre dynamické front-end riešenia vytvorené pomocou SPFx v kontexte SharePointu.
<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>
Riešenie 2: Pridanie vloženého JavaScriptu priamo do značky odkazu
Táto metóda vkladá JavaScript inline do značky odkazu HTML, vďaka čomu je ideálna pre ľahký dynamický front-end systém, ktorý má málo externých závislostí.
<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.
Riešenie 3: Backendový prístup pomocou SPFx s vkladaním JavaScriptu
Tento prístup využíva SharePoint Framework (SPFx) na vloženie JavaScriptu do vlastnej webovej časti, čo umožňuje otváranie odkazov v kontextovom okne pomocou metód 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 jednotky pre správanie kontextového okna JavaScriptu
Testy jednotiek môžu zaručiť, že funkčnosť kontextových okien je konzistentná vo všetkých prehliadačoch a prostrediach. Tu je základný test Jasmine na overenie front-endu.
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));});});
Skúmanie spracovania udalostí a dynamického vkladania JavaScriptu v SPFx
Pri práci s PnP Modern Search WebPart (SPFx) je jednou z užitočných funkcií pre vývojárov možnosť dynamicky upravovať správanie prvkov, ako sú odkazy. Použitie spracovania udalostí JavaScriptu poskytuje množstvo možností na prispôsobenie interakcií používateľov. Používanie poslucháčov udalostí na zachytenie a ovládanie kliknutí na odkazy vytvára interaktívnejší zážitok. Zachytením udalostí kliknutia môžeme prepísať normálne správanie a otvárať adresy URL v kontrolovanom kontextovom okne. To zaisťuje plynulý prechod bez narušenia aktuálnej karty alebo okna používateľa.
Prispôsobenie odkazov v SPFx WebParts tiež vyžaduje dynamické vkladanie kódu JavaScript. SharePoint Framework (SPFx) poskytuje metódy ako a za splnenie tohto. Vložením vlastného JavaScriptu môžu vývojári zmeniť správanie položiek výsledkov vyhľadávania bez toho, aby museli výrazne upravovať samotnú webovú časť. Táto flexibilita uľahčuje vykonávanie globálnych úprav všetkých odkazov výsledkov vyhľadávania, čím sa zaisťuje, že požadované správanie – ako napríklad otváranie vo vyskakovacom okne – je jednotné na celej platforme.
Napokon, výkon a používateľská skúsenosť sú kritickými faktormi v akomkoľvek webovom systéme a to isté platí aj tu. Optimalizáciou používania JavaScriptu a obmedzením aktivít náročných na zdroje môžeme zaručiť, že tieto prispôsobenia nebudú mať významný vplyv na časy načítania stránky alebo odozvu. Efektívne používanie JavaScriptu v kombinácii s úpravami backendu SPFx poskytuje vysokú úroveň flexibility bez obetovania výkonu, výsledkom čoho je bezproblémová používateľská skúsenosť na celej platforme SharePoint.
- Ako otvorím odkaz vo vyskakovacom okne pomocou JavaScriptu?
- Môžete použiť funkciu v JavaScripte. Táto funkcia vám umožňuje otvoriť nové okno prehliadača alebo vyskakovacie okno so špecifickými vlastnosťami, ako sú veľkosť a posuvníky.
- Čo robí robiť?
- The metóda bráni udalosti vykonať jej predvolenú akciu. V tomto prípade bráni otvoreniu odkazu na novej karte a zároveň umožňuje špecifické akcie, ako je napríklad zobrazenie kontextového okna.
- Ako použijem vlastné správanie na množstvo odkazov v SPFx?
- Používanie v JavaScripte si môžete vybrať viacero komponentov a pripojiť k nim poslucháčov udalostí, čím sa zaručí, že sa všetky budú správať rovnako.
- Ako prepíšem predvolené vykresľovanie SPFx WebParts?
- Ak chcete upraviť správanie SPFx WebParts, použite dekoratér. To vám umožní vložiť vlastný JavaScript priamo do procesu vykresľovania WebPart.
- Aká je najlepšia technika na určenie, či sa kontextové okno otvára správne?
- Pomocou jednotkových testov v rámci, ako je Jasmine, môžete použiť sledovať, či funkcia sa volá vhodne s predpokladanými parametrami.
Spôsob, akým sa odkazy otvárajú vo vyskakovacom okne, je možné prispôsobiť pomocou JavaScriptu v rámci PnP Modern Search WebPart (SPFx). Táto zmena zlepšuje interakciu používateľov tým, že ich udržiava na aktuálnej karte a zároveň poskytuje prístup k podrobnému obsahu v kontrolovanom kontextovom okne.
Ak chcete zachovať konzistentné správanie, použite techniky ako a dynamicky vkladať JavaScript do SPFx WebParts. Testovanie jednotiek navyše pomáha zabezpečiť, aby tieto zmeny dobre fungovali v mnohých kontextoch, výsledkom čoho je spoľahlivé a užívateľsky prívetivé riešenie na prispôsobenie výsledkov vyhľadávania SharePoint.
- Informácie týkajúce sa PnP Modern Search WebPart (SPFx) a prispôsobenia správania odkazov boli získané z oficiálnej dokumentácie. Ďalšie podrobnosti nájdete na stránke PnP Modern Search GitHub Repository .
- Návod na používanie JavaScriptových metód ako napr a poslucháčov udalostí sa odvolávalo na Webové dokumenty MDN pre JavaScript.
- Podrobnosti o prispôsobeniach SharePoint Framework (SPFx) vrátane vstrekovania JavaScriptu a , možno nájsť v Prehľad rámca SharePoint .