Как открывать ссылки во всплывающем окне в веб-части современного поиска PnP (SFx)

Улучшение пользовательского опыта с помощью пользовательских всплывающих ссылок в SPFx

В современной разработке SharePoint использование веб-части современного поиска PnP (SPFx) для предоставления настраиваемых результатов поиска может значительно улучшить взаимодействие с пользователем. Контроль открытия ссылок — популярная функция среди разработчиков, особенно в макете «Подробный список». Обычно ссылки открываются в новой вкладке, но что, если мы хотим открыть их во всплывающем окне?

В этом посте мы рассмотрим, как реализовать эту функцию, изменив поведение ссылок веб-части современного поиска PnP. Вместо того, чтобы открывать результаты поиска на новой вкладке, мы покажем, как заставить ссылку открываться в настраиваемом всплывающем окне, что приведет к более интегрированному пользовательскому интерфейсу.

Проблема возникает, когда вы используете такую ​​формулу, как ``, которая по умолчанию соответствует новой вкладке. Однако, используя JavaScript, мы можем переопределить это поведение и открыть ссылку в контролируемом всплывающем окне. Это обеспечивает большую гибкость при отображении контента в рамках одного сеанса просмотра.

Мы покажем вам шаги, необходимые для разработки этой функции, уделив особое внимание использованию JavaScript и SPFx для улучшения макета подробного списка. Следите за обновлениями, пока мы рассматриваем решение, чтобы обеспечить бесперебойную работу и удобство вашего сайта SharePoint.

Понимание решения всплывающих окон в SPFx

Перечисленные выше сценарии настраивают поведение ссылок по умолчанию в веб-части современного поиска PnP (SPFx). По умолчанию ссылки используют цель="_blank" тег для открытия в новой вкладке. Однако цель здесь — открыть эти ссылки во всплывающем окне, тем самым увеличивая взаимодействие с пользователем. Для этого мы использовали окно.открыть() функция, которая позволяет разработчикам открывать URL-адреса в новом окне или всплывающем окне браузера. Эту функцию можно настроить с помощью определенных параметров, таких как ширина, высота и другие атрибуты (например, полосы прокрутки или возможность изменения размера), чтобы всплывающее окно работало должным образом.

Переопределение поведения тегов привязки по умолчанию при щелчке является жизненно важным компонентом этого подхода. Это делается с событие.preventDefault(), что предотвращает открытие ссылки в новой вкладке. Вместо этого мы прикрепляем к ссылке прослушиватель событий, который активирует пользовательскую функцию (в данном случае openInPopup()), который обрабатывает событие клика и открывает URL-адрес во всплывающем окне. Это позволяет разработчикам лучше контролировать поведение ссылки и обеспечивает более согласованное взаимодействие с пользователем в веб-части современного поиска PnP.

Помимо работы с поведением внешнего интерфейса, мы также рассмотрели внутренний подход с использованием встроенных декораторов SPFx, таких как @переопределить. Этот подход позволяет разработчикам напрямую вставлять JavaScript в пользовательские веб-части, дополнительно изменяя поведение результатов поиска. Переопределение процесса рендеринга в SPFx позволяет нам внедрить код JavaScript, который обрабатывает клики по ссылкам и открывает необходимый материал во всплывающем окне. Этот метод делает решение более модульным и допускающим многократное использование в различных областях среды SharePoint, что улучшает обслуживание.

Модульное тестирование имеет решающее значение для обеспечения правильной работы функции всплывающих окон в различных средах и браузерах. С использованием шпионить() в среде тестирования Jasmine подтверждает, что окно.открыть() метод выполняется с правильными аргументами. Эта форма тестирования выявляет потенциальные проблемы на ранних этапах процесса разработки и гарантирует, что всплывающие окна работают так, как запланировано. Это решение улучшает взаимодействие с пользователем в веб-части современного поиска PnP SharePoint за счет интеграции внешней обработки событий, внутренней настройки и модульного тестирования.

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

Изучение обработки событий и динамического внедрения JavaScript в SPFx

При работе с веб-частью современного поиска PnP (SPFx) одной из полезных функций для разработчиков является возможность динамической настройки поведения элементов, таких как ссылки. Использование обработки событий JavaScript предоставляет множество возможностей для персонализации взаимодействия с пользователем. Использование прослушивателей событий для захвата и контроля кликов по ссылкам создает более интерактивный опыт. Записывая события кликов, мы можем переопределить обычное поведение и открывать URL-адреса в контролируемом всплывающем окне. Это обеспечивает плавный переход, не нарушая текущую вкладку или окно пользователя.

Настройка ссылок в веб-частях SPFx также требует динамической вставки кода JavaScript. SharePoint Framework (SPFx) предоставляет такие методы, как @переопределить и оказывать() для достижения этого. Вставляя собственный код JavaScript, разработчики могут изменять поведение элементов результатов поиска без необходимости внесения существенных изменений в саму веб-часть. Такая гибкость позволяет легко вносить глобальные настройки во все ссылки на результаты поиска, гарантируя, что желаемое поведение, например открытие во всплывающем окне, будет единообразным для всей платформы.

Наконец, производительность и удобство использования являются критическими факторами в любой веб-системе, и то же самое справедливо и здесь. Оптимизируя использование JavaScript и ограничивая ресурсоемкие действия, мы можем гарантировать, что эти настройки не окажут существенного влияния на время загрузки страницы или скорость отклика. Эффективное использование JavaScript в сочетании с модификациями серверной части SPFx обеспечивает высокий уровень гибкости без ущерба для производительности, что обеспечивает удобство работы пользователей на всей платформе SharePoint.