PnP Modern Search WebPart(SFx)의 팝업 창에서 링크를 여는 방법

SPFx의 사용자 정의 팝업 링크로 사용자 경험 향상

최신 SharePoint 개발에서 PnP Modern Search WebPart(SPFx)를 사용하여 구성 가능한 검색 결과를 제공하면 사용자 환경이 크게 향상될 수 있습니다. 링크가 열리는 방식을 제어하는 ​​것은 특히 "세부 목록" 레이아웃에서 개발자들 사이에서 인기 있는 기능입니다. 일반적으로 링크는 새 탭에서 열리지만 팝업 창에서 열고 싶다면 어떻게 해야 할까요?

이 게시물에서는 PnP Modern Search WebPart의 링크 동작을 변경하여 이 기능을 구현하는 방법을 살펴보겠습니다. 새 탭에서 검색 결과를 여는 대신 링크를 사용자 정의된 팝업 창에서 강제로 열어 더욱 통합된 사용자 경험을 제공하는 방법을 보여 드리겠습니다.

새 탭이 기본값으로 설정되는 ``와 같은 수식을 사용할 때 문제가 발생합니다. 그러나 JavaScript를 사용하면 이 동작을 무시하고 제어된 팝업 창에서 링크를 열 수 있습니다. 이를 통해 동일한 탐색 세션 내에서 콘텐츠를 더 유연하게 표시할 수 있습니다.

JavaScript 및 SPFx를 사용하여 세부 목록 레이아웃을 개선하는 데 중점을 두고 이 기능을 개발하는 데 필요한 단계를 안내해 드리겠습니다. 귀하의 SharePoint 사이트가 원활하고 사용자 친화적인지 확인하기 위한 솔루션을 살펴보는 동안 계속 지켜봐 주시기 바랍니다.

SPFx의 팝업 창 솔루션 이해

위에 나열된 스크립트는 PnP Modern Search WebPart(SPFx) 내 링크의 기본 동작을 조정합니다. 기본적으로 링크는 타겟="_공백" 새 탭에서 열려면 태그를 지정하세요. 그러나 여기서의 목적은 팝업 창에서 이러한 링크를 열어 사용자 상호 작용을 늘리는 것입니다. 이를 달성하기 위해 우리는 다음을 사용했습니다. 창.열기() 개발자가 새 브라우저 창이나 팝업에서 URL을 열 수 있는 기능입니다. 팝업이 의도한 대로 작동하도록 하기 위해 너비, 높이 및 기타 속성(스크롤 막대 또는 크기 조정 가능성 등)과 같은 특정 매개변수를 사용하여 이 기능을 조정할 수 있습니다.

앵커 태그의 기본 클릭 동작을 재정의하는 것은 접근 방식의 중요한 구성 요소입니다. 이 작업은 다음과 같이 수행됩니다. event.preventDefault(), 이는 링크가 새 탭에서 열리지 않도록 방지합니다. 대신, 사용자 정의 기능을 활성화하는 이벤트 리스너를 링크에 연결합니다(이 경우 오픈인팝업())는 클릭 이벤트를 처리하고 팝업 창에서 URL을 엽니다. 이를 통해 개발자는 링크 동작을 더 효과적으로 제어할 수 있으며 PnP Modern Search WebPart 내에서 보다 일관된 사용자 경험을 얻을 수 있습니다.

프런트엔드 동작을 처리하는 것 외에도 다음과 같은 SPFx의 내장 데코레이터를 사용하는 백엔드 접근 방식도 조사했습니다. @보수. 이 접근 방식을 사용하면 개발자는 JavaScript를 사용자 정의 WebPart에 직접 삽입하여 검색 결과의 동작을 추가로 수정할 수 있습니다. 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));
   });
});

SPFx에서 이벤트 처리 및 동적 JavaScript 주입 살펴보기

PnP Modern Search WebPart(SPFx)로 작업할 때 개발자에게 유용한 기능 중 하나는 링크와 같은 요소의 작동 방식을 동적으로 조정하는 기능입니다. JavaScript 이벤트 처리를 사용하면 사용자 상호 작용을 개인화하기 위한 다양한 옵션이 제공됩니다. 이벤트 리스너를 사용하여 링크 클릭을 캡처하고 제어하면 더욱 상호 작용적인 환경이 만들어집니다. 클릭 이벤트를 캡처함으로써 정상적인 동작을 무시하고 제어된 팝업 창에서 URL을 열 수 있습니다. 이렇게 하면 사용자의 현재 탭이나 창을 방해하지 않고 원활하게 전환할 수 있습니다.

SPFx WebParts에서 링크를 사용자 정의하려면 JavaScript 코드를 동적으로 삽입해야 합니다. SharePoint 프레임워크(SPFx)는 다음과 같은 방법을 제공합니다. @보수 그리고 세우다() 이를 달성하기 위해. 사용자 정의 JavaScript를 삽입하면 개발자는 WebPart 자체를 크게 수정하지 않고도 검색 결과 항목의 동작을 변경할 수 있습니다. 이러한 유연성을 통해 모든 검색 결과 링크를 전체적으로 쉽게 조정할 수 있으므로 팝업 창에서 열기와 같은 원하는 동작이 플랫폼 전체에서 균일하게 유지됩니다.

마지막으로 성능과 사용자 경험은 모든 웹 기반 시스템에서 중요한 요소이며 여기에서도 마찬가지입니다. JavaScript 사용을 최적화하고 리소스 집약적인 활동을 제한함으로써 이러한 사용자 정의가 페이지 로드 시간이나 응답성에 큰 영향을 미치지 않도록 할 수 있습니다. 백엔드 SPFx 수정과 결합된 효율적인 JavaScript 사용은 성능 저하 없이 높은 수준의 유연성을 제공하여 SharePoint 플랫폼 전체에서 원활한 사용자 환경을 제공합니다.