Како отворити везе у искачућем прозору у ПнП Модерн Сеарцх ВебПарт (СФк)

Побољшање корисничког искуства помоћу прилагођених искачућих веза у СПФк-у

У савременом СхареПоинт развоју, коришћење ПнП Модерн Сеарцх ВебПарт (СПФк) за пружање конфигурабилних резултата претраге може значајно побољшати корисничко искуство. Контрола отварања линкова је популарна функција међу програмерима, посебно са распоредом „Детаљне листе“. Обично се везе отварају у новој картици, али шта ако желимо да их отворимо у искачућем прозору?

У овом посту ћемо погледати како да имплементирамо ову функционалност променом понашања везе ПнП модерног веб сегмента за претрагу. Уместо да отварамо резултате претраге на новој картици, показаћемо како да натерамо да се веза отвори у прилагођеном искачућем прозору, што ће резултирати интегрисанијим корисничким искуством.

Изазов настаје када користите формулу као што је `<а хреф="{{слот итем @роот.слотс.ПревиевУрл}}" таргет="_бланк">`, која подразумевано поставља нову картицу. Међутим, коришћењем ЈаваСцрипт-а, можемо заобићи ово понашање и отворити везу у контролисаном искачућем прозору. Ово омогућава већу флексибилност у приказивању садржаја у оквиру исте сесије прегледања.

Провешћемо вас кроз кораке потребне за развој ове функције, са фокусом на коришћење ЈаваСцрипт-а и СПФк-а за побољшање изгледа детаљне листе. Пратите нас док пролазимо кроз решење како бисмо осигурали да ваша СхареПоинт локација буде беспрекорна и лака за коришћење.

Разумевање решења искачућих прозора у СПФк-у

Горе наведене скрипте прилагођавају подразумевано понашање веза у оквиру ПнП модерног веб сегмента претраге (СПФк). Подразумевано, везе користе таргет="_бланк" ознаку за отварање у новој картици. Међутим, сврха је да се ове везе отворе у искачућем прозору, чиме се повећава интеракција корисника. Да бисмо то постигли, користили смо виндов.опен() функција, која програмерима омогућава отварање УРЛ-ова у новом прозору или искачућем прозору. Ова функција се може подесити помоћу специфичних параметара, као што су ширина, висина и други атрибути (као што су траке за померање или могућност промене величине), како би се осигурало да искачући прозор ради како је предвиђено.

Заобилажење подразумеваног понашања кликова сидрених ознака је витална компонента приступа. Ово се ради са евент.превентДефаулт(), што спречава отварање везе у новој картици. Уместо тога, везу прилажемо слушалац догађаја, који активира прилагођену функцију (у овом случају, опенИнПопуп()) који обрађује догађај клика и отвара УРЛ у искачућем прозору. Ово омогућава програмерима већу контролу над понашањем везе и резултира доследнијим корисничким искуством у оквиру ПнП Модерн Сеарцх ВебПарт.

Поред бављења фронт-енд понашањем, такође смо испитали позадински приступ користећи СПФк уграђене декораторе као што су @оверриде. Овај приступ омогућава програмерима да директно уметну ЈаваСцрипт у прилагођене веб делове, додатно модификујући понашање резултата претраге. Надјачавање процеса приказивања у СПФк-у нам омогућава да убацимо ЈаваСцрипт код који управља кликовима на линкове и отвара потребан материјал у искачућем прозору. Ова техника чини решење модуларнијим и употребљивијим у више области СхареПоинт окружења, чиме се побољшава одржавање.

Јединично тестирање је кључно да би се осигурало да искачућа функција исправно ради у више окружења и претраживача. Коришћење спиОн() у оквиру тестирања Јасмине потврђује да је виндов.опен() метода се извршава са правим аргументима. Овај облик тестирања идентификује потенцијалне проблеме рано у процесу развоја и гарантује да искачући прозори функционишу како је планирано. Ово решење јача интеракције корисника у СхареПоинт-овом ПнП модерном веб-делу за претрагу интегришући руковање догађајима на фронт-енд, прилагођавање позадинског дела и тестирање јединица.

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

Истраживање руковања догађајима и динамичке ЈаваСцрипт ињекције у СПФк-у

Када радите са ПнП Модерн Сеарцх ВебПарт (СПФк), једна корисна карактеристика за програмере је могућност динамичког прилагођавања понашања елемената, као што су везе. Употреба ЈаваСцрипт руковања догађајима пружа мноштво опција за персонализацију интеракција корисника. Коришћење слушалаца догађаја за снимање и контролу кликова на линкове ствара интерактивније искуство. Снимањем кликова, можемо да заобиђемо нормално понашање и отворимо УРЛ адресе у контролисаном искачућем прозору. Ово обезбеђује несметан прелаз без ометања тренутне картице или прозора корисника.

Прилагођавање веза у СПФк ВебПартс такође захтева динамичко уметање ЈаваСцрипт кода. СхареПоинт Фрамеворк (СПФк) пружа методе као што су @оверриде и рендер() за постизање овога. Уметањем прилагођеног ЈаваСцрипт-а, програмери могу да промене понашање ставки резултата претраге без потребе да праве значајне измене на самом ВебПарт-у. Ова флексибилност олакшава глобална прилагођавања свих веза резултата претраге, обезбеђујући да је жељено понашање—као што је отварање у искачућем прозору—уједначено на целој платформи.

Коначно, перформансе и корисничко искуство су критични фактори у било ком систему заснованом на вебу, а исто је и овде. Оптимизујући употребу ЈаваСцрипт-а и ограничавајући активности које захтевају велике ресурсе, можемо да осигурамо да ова прилагођавања немају значајан утицај на време учитавања странице или одзив. Ефикасно коришћење ЈаваСцрипт-а, у комбинацији са позадинским СПФк модификацијама, обезбеђује висок ниво флексибилности без жртвовања перформанси, што резултира беспрекорним корисничким искуством на целој СхареПоинт платформи.