PnP モダン検索 Web パーツ (SFx) のポップアップ ウィンドウでリンクを開く方法

SPFx のカスタム ポップアップ リンクによるユーザー エクスペリエンスの向上

最新の SharePoint 開発では、PnP モダン検索 Web パーツ (SPFx) を使用して構成可能な検索結果を提供すると、ユーザー エクスペリエンスを大幅に向上させることができます。リンクを開く方法を制御することは、特に「詳細リスト」レイアウトで開発者の間で人気のある機能です。通常、リンクは新しいタブで開きますが、ポップアップ ウィンドウで開きたい場合はどうすればよいでしょうか。

この投稿では、PnP モダン検索 Web パーツのリンク動作を変更することでこの機能を実装する方法を説明します。検索結果を新しいタブで開くのではなく、カスタマイズされたポップアップ ウィンドウでリンクを強制的に開くことで、より統合されたユーザー エクスペリエンスを実現する方法を示します。

この問題は、デフォルトで新しいタブが表示される「」のような数式を使用するときに発生します。ただし、JavaScript を使用すると、この動作をオーバーライドして、制御されたポップアップ ウィンドウでリンクを開くことができます。これにより、同じブラウジング セッション内でコンテンツをより柔軟に表示できるようになります。

詳細リストのレイアウトを改善するための JavaScript と SPFx の使用に焦点を当てて、この機能の開発に必要な手順を説明します。 SharePoint サイトがシームレスでユーザーフレンドリーであることを保証するためのソリューションを順を追って説明しますので、ご期待ください。

SPFx のポップアップ ウィンドウ ソリューションを理解する

上記のスクリプトは、PnP モダン検索 Web パーツ (SPFx) 内のリンクの既定の動作を調整します。デフォルトでは、リンクは ターゲット = "_空白" 新しいタブで開くタグ。ただし、ここでの目的は、これらのリンクをポップアップ ウィンドウで開き、それによってユーザーの対話を増やすことです。これを実現するために、 window.open() この機能を使用すると、開発者は新しいブラウザ ウィンドウまたはポップアップで URL を開くことができます。この関数は、幅、高さ、その他の属性 (スクロールバーやサイズ変更機能など) などの特定のパラメーターを使用して調整して、ポップアップが意図したとおりに動作するようにすることができます。

アンカー タグのデフォルトのクリック動作をオーバーライドすることは、このアプローチの重要なコンポーネントです。これは次のように行われます イベント.preventDefault()これにより、リンクが新しいタブで開かなくなります。代わりに、イベント リスナーをリンクにアタッチして、カスタム関数をアクティブにします (この場合、 openInPopup()) クリック イベントを処理し、ポップアップ ウィンドウで URL を開きます。これにより、開発者はリンクの動作をより詳細に制御できるようになり、PnP モダン検索 Web パーツ内でのユーザー エクスペリエンスの一貫性が向上します。

フロントエンドの動作に対処することに加えて、次のような SPFx の組み込みデコレータを使用したバックエンドのアプローチも検討しました。 @オーバーライド。このアプローチにより、開発者は JavaScript をカスタム WebPart に直接挿入し、検索結果の動作をさらに変更できるようになります。 SPFx でレンダリング プロセスをオーバーライドすると、リンクのクリックを処理し、必要なマテリアルをポップアップ ウィンドウで開く JavaScript コードを挿入できるようになります。この手法により、ソリューションがよりモジュール化され、SharePoint 環境の複数の領域にわたって再利用可能になり、メンテナンスが向上します。

単体テストは、ポップアップ機能が複数の環境およびブラウザーで適切に動作することを確認するために重要です。使用する スパイオン() Jasmine テスト フレームワークでは、 window.open() メソッドは正しい引数を使用して実行されます。この形式のテストでは、開発プロセスの早い段階で潜在的な問題を特定し、ポップアップ ウィンドウが計画どおりに機能することを保証します。このソリューションは、フロントエンド イベント処理、バックエンドのカスタマイズ、単体テストを統合することにより、SharePoint の PnP 最新検索 Web パーツでのユーザー インタラクションを強化します。

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

SPFx でのイベント処理と動的 JavaScript インジェクションの探索

PnP モダン検索 Web パーツ (SPFx) を使用する場合、開発者にとって便利な機能の 1 つは、リンクなどの要素の動作を動的に調整できる機能です。 JavaScript イベント処理を使用すると、ユーザー インタラクションをパーソナライズするための多数のオプションが提供されます。イベント リスナーを使用してリンク クリックをキャプチャおよび制御すると、よりインタラクティブなエクスペリエンスが作成されます。クリック イベントをキャプチャすることで、通常の動作をオーバーライドし、制御されたポップアップ ウィンドウで URL を開くことができます。これにより、ユーザーの現在のタブやウィンドウを妨げることなく、スムーズな移行が保証されます。

SPFx WebParts のリンクをカスタマイズするには、JavaScript コードを動的に挿入することも必要です。 SharePoint Framework (SPFx) は、次のようなメソッドを提供します。 @オーバーライド そして 与える（） これを達成するために。カスタム JavaScript を挿入すると、開発者は WebPart 自体に大幅な変更を加えることなく、検索結果アイテムの動作を変更できます。この柔軟性により、すべての検索結果リンクをグローバルに調整することが容易になり、ポップアップ ウィンドウで開くなどの望ましい動作がプラットフォーム全体で均一になることが保証されます。

最後に、パフォーマンスとユーザー エクスペリエンスは、Web ベースのシステムにおいて重要な要素であり、ここでも同じことが当てはまります。 JavaScript の使用を最適化し、リソースを大量に消費するアクティビティを制限することで、これらのカスタマイズがページの読み込み時間や応答性に大きな影響を与えないことを保証できます。 JavaScript を効率的に使用し、バックエンドの SPFx 変更と組み合わせることで、パフォーマンスを犠牲にすることなく高レベルの柔軟性が提供され、SharePoint プラットフォーム全体でシームレスなユーザー エクスペリエンスが実現します。