Як відкривати посилання у спливаючому вікні в PnP Modern Search WebPart (SFx)

Покращення взаємодії з користувачем за допомогою спеціальних спливаючих посилань у SPFx

У сучасній розробці SharePoint використання PnP Modern Search WebPart (SPFx) для надання настроюваних результатів пошуку може значно покращити взаємодію з користувачем. Керування тим, як відкриваються посилання, є популярною функцією серед розробників, особливо з макетом «Детальний список». Зазвичай посилання відкриваються в новій вкладці, але що, якщо ми хочемо відкрити їх у спливаючому вікні?

У цій публікації ми розглянемо, як реалізувати цю функціональність, змінивши поведінку посилання веб-частини PnP Modern Search. Замість того, щоб відкривати результати пошуку в новій вкладці, ми покажемо, як примусово відкрити посилання в настроюваному спливаючому вікні, що забезпечить більш інтегровану взаємодію з користувачем.

Проблема виникає, коли ви використовуєте формулу на зразок ``, яка за умовчанням відкриває нову вкладку. Однак за допомогою JavaScript ми можемо змінити цю поведінку та відкрити посилання в контрольованому спливаючому вікні. Це забезпечує більшу гнучкість у відображенні вмісту в межах одного сеансу перегляду.

Ми розповімо вам про кроки, необхідні для розробки цієї функції, зосередивши увагу на використанні JavaScript і SPFx для покращення макета детального списку. Залишайтеся з нами, поки ми ознайомимося з рішенням, щоб переконатися, що ваш сайт SharePoint буде бездоганним і зручним для користувачів.

Команда	Приклад використання
window.open()	Ця команда відкриє нове вікно або вкладку браузера. Цей метод відкриває спливаюче вікно з певними розмірами та властивостями, такими як ширина, висота та смуги прокрутки.
event.preventDefault()	Запобігає типовій поведінці натиснутого посилання, яка полягає у відкритті URL-адреси в тій самій або новій вкладці. Це дозволяє нам налаштовувати роботу посилання, наприклад відкривати спливаюче вікно.
querySelectorAll()	Атрибут data-popup вибирає всі елементи прив’язки (). Цей метод повертає NodeList, який дозволяє нам застосовувати слухачі подій до кількох компонентів одночасно.
forEach()	Кожний запис у NodeList, створений за допомогою querySelectorAll(), отримує дію (наприклад, прикріплення слухача подій). Це стосується керування багатьма елементами динамічного посилання в PnP Modern Search.
addEventListener()	Ця техніка додає прослуховувач події кліку до кожного посилання, яке запускає функцію openInPopup(). Це необхідно для перевизначення типової поведінки клацання.
import { override }	Цей декоратор є частиною SharePoint Framework (SPFx) і використовується для заміни поведінки SPFx WebParts за замовчуванням. Це дозволяє виконувати певні налаштування, як-от ін’єкцію JavaScript для забезпечення функцій спливаючих вікон.
@override	У SPFx декоратор вказує, що метод або властивість перекриває функціональність. Це необхідно під час зміни поведінки компонентів SharePoint.
spyOn()	Відстежує виклики функцій під час модульного тестування за допомогою Jasmine. У цьому сценарії він використовується з window.open(), щоб гарантувати належний запуск спливаючого вікна під час тестування.
expect()	Ця команда використовується для модульного тестування в Jasmine. Він перевіряє, чи було викликано window.open() із правильними аргументами, гарантуючи, що спливаюче вікно з’явиться з потрібними налаштуваннями.

Розуміння рішення спливаючого вікна в SPFx

Перелічені вище сценарії регулюють типову поведінку посилань у PnP Modern Search WebPart (SPFx). За замовчуванням посилання використовують тег для відкриття в новій вкладці. Однак мета полягає в тому, щоб відкрити ці посилання у спливаючому вікні, тим самим посиливши взаємодію з користувачем. Щоб досягти цього, ми використали функція, яка дозволяє розробникам відкривати URL-адреси в новому вікні або спливаючому вікні браузера. Цю функцію можна регулювати за допомогою певних параметрів, таких як ширина, висота та інші атрибути (наприклад, смуги прокручування або зміна розміру), щоб забезпечити належну роботу спливаючого вікна.

Перевизначення стандартної поведінки клацання тегів прив’язки є життєво важливим компонентом підходу. Це робиться за допомогою , що запобігає відкриттю посилання в новій вкладці. Замість цього ми приєднуємо до посилання прослуховувач подій, який активує спеціальну функцію (у цьому випадку ), який обробляє подію клацання та відкриває URL-адресу у спливаючому вікні. Це дозволяє розробникам більше контролювати поведінку посилання та забезпечує більш узгоджену взаємодію з користувачем у PnP Modern Search WebPart.

Окрім роботи з інтерфейсом, ми також досліджували підхід до серверної частини, використовуючи вбудовані декоратори SPFx, як-от . Цей підхід дозволяє розробникам безпосередньо вставляти JavaScript у спеціальні веб-частини, додатково змінюючи поведінку результатів пошуку. Заміна процесу візуалізації в SPFx дозволяє нам впроваджувати код JavaScript, який обробляє натискання посилань і відкриває необхідні матеріали у спливаючому вікні. Ця техніка робить рішення більш модульним і придатним для багаторазового використання в кількох областях середовища SharePoint, що покращує обслуговування.

Модульне тестування має вирішальне значення для забезпечення належної роботи функції спливаючих вікон у багатьох середовищах і браузерах. Використання у системі тестування Jasmine підтверджує, що метод виконується з правильними аргументами. Ця форма тестування визначає потенційні проблеми на ранніх стадіях процесу розробки та гарантує, що спливаючі вікна функціонують, як планувалося. Це рішення посилює взаємодію користувачів у веб-частині SharePoint PnP Modern Search WebPart шляхом інтеграції зовнішньої обробки подій, налаштування серверної частини та модульного тестування.

<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 Modern Search WebPart (SPFx) однією корисною функцією для розробників є можливість динамічно налаштовувати поведінку елементів, наприклад посилань. Використання обробки подій JavaScript надає безліч можливостей для персоналізації взаємодії користувача. Використання прослуховувачів подій для захоплення та керування кліками посилань створює більш інтерактивний досвід. Записуючи події кліків, ми можемо перевизначати звичайну поведінку та відкривати URL-адреси в контрольованому спливаючому вікні. Це забезпечує плавний перехід без порушення поточної вкладки або вікна користувача.

Налаштування посилань у SPFx WebParts також вимагає динамічного вставлення коду JavaScript. SharePoint Framework (SPFx) надає такі методи, як і для досягнення цього. Вставивши настроюваний JavaScript, розробники можуть змінити поведінку елементів результатів пошуку, не вносячи значних змін у саму веб-частину. Ця гнучкість дозволяє легко вносити глобальні налаштування до всіх посилань результатів пошуку, гарантуючи, що бажана поведінка, наприклад відкриття у спливаючому вікні, є однаковою на всій платформі.

Нарешті, продуктивність і користувальницький досвід є критичними факторами в будь-якій веб-системі, і це стосується і тут. Завдяки оптимізації використання JavaScript і обмеженню ресурсомістких дій ми можемо гарантувати, що ці налаштування не матимуть істотного впливу на час завантаження сторінки або швидкість реагування. Ефективне використання JavaScript у поєднанні з модифікаціями серверної версії SPFx забезпечує високий рівень гнучкості без шкоди для продуктивності, що забезпечує безперебійну роботу користувача на всій платформі SharePoint.

1. Як відкрити посилання у спливаючому вікні за допомогою JavaScript?
2. Ви можете використовувати функція в JavaScript. Ця функція дозволяє відкривати нове вікно браузера або спливаюче вікно з певними властивостями, такими як розмір і смуги прокручування.
3. Що робить робити?
4. The метод запобігає виконанню подією дії за замовчуванням. У цьому випадку це запобігає відкриттю посилання в новій вкладці, дозволяючи певні дії, такі як відображення спливаючого вікна.
5. Як застосувати спеціальну поведінку до численних посилань у SPFx?
6. Використання у JavaScript ви можете вибрати кілька компонентів і прикріпити до них слухачі подій, гарантуючи, що всі вони будуть виконувати однакову поведінку.
7. Як змінити стандартне відтворення SPFx WebParts?
8. Щоб налаштувати поведінку SPFx WebParts, використовуйте декоратор. Це дає змогу вставляти настроюваний JavaScript безпосередньо в процес візуалізації WebPart.
9. Який метод найкраще визначити, чи правильно відкривається спливаюче вікно?
10. Ви можете використовувати модульні тести у фреймворку, наприклад Jasmine контролювати, якщо функція викликається відповідно з очікуваними параметрами.

Спосіб відкриття посилань у спливаючому вікні можна налаштувати за допомогою JavaScript у PnP Modern Search WebPart (SPFx). Ця зміна покращує взаємодію з користувачем, утримуючи його на поточній вкладці, надаючи доступ до детального вмісту в контрольованому спливаючому вікні.

Щоб підтримувати послідовну поведінку, використовуйте такі методи, як і динамічно вводити JavaScript у SPFx WebParts. Крім того, модульне тестування допомагає переконатися, що ці зміни добре працюють у багатьох контекстах, створюючи надійне та зручне рішення для налаштування результатів пошуку SharePoint.