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

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

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

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

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

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

명령	사용예
window.open()	이 명령은 새 브라우저 창이나 탭을 엽니다. 이 메서드는 너비, 높이, 스크롤 막대와 같은 특정 크기 및 속성이 포함된 팝업 창을 엽니다.
event.preventDefault()	동일한 탭이나 새 탭에서 URL을 여는 클릭된 링크의 기본 동작을 방지합니다. 이를 통해 대신 팝업을 여는 등 링크 작동 방식을 사용자 정의할 수 있습니다.
querySelectorAll()	data-popup 속성은 모든 앵커 요소(). 이 메소드는 NodeList를 반환하므로 이벤트 리스너를 여러 구성 요소에 동시에 적용할 수 있습니다.
forEach()	querySelectorAll()에 의해 생성된 NodeList의 각 항목은 작업(예: 이벤트 리스너 연결)을 수신합니다. 이는 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를 사용자 정의 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 플랫폼 전체에서 원활한 사용자 환경을 제공합니다.

1. JavaScript를 사용하여 팝업 창에서 링크를 어떻게 열 수 있나요?
2. 당신은 사용할 수 있습니다 JavaScript의 함수. 이 기능을 사용하면 크기 및 스크롤 막대와 같은 특정 속성이 포함된 새 브라우저 창이나 팝업을 열 수 있습니다.
3. 무엇을 하다?
4. 그만큼 메소드는 이벤트가 기본 작업을 수행하는 것을 방지합니다. 이 경우 팝업 표시와 같은 특정 작업은 허용하면서 링크가 새 탭에서 열리는 것을 방지합니다.
5. SPFx의 수많은 링크에 사용자 정의 동작을 어떻게 적용합니까?
6. 사용 JavaScript에서는 여러 구성 요소를 선택하고 해당 구성 요소에 이벤트 리스너를 연결하여 모두 동일한 동작을 따르도록 보장할 수 있습니다.
7. SPFx WebParts의 기본 렌더링을 어떻게 재정의합니까?
8. SPFx WebParts의 동작을 조정하려면 데코레이터. 이를 통해 사용자 정의 JavaScript를 WebPart의 렌더링 프로세스에 직접 삽입할 수 있습니다.
9. 팝업 창이 제대로 열리는지 확인하는 가장 좋은 방법은 무엇입니까?
10. Jasmine과 같은 프레임워크에서 단위 테스트를 사용하면 다음을 사용할 수 있습니다. 있는지 모니터링하기 위해 함수는 예상 매개변수를 사용하여 적절하게 호출됩니다.

팝업 창에서 링크가 열리는 방식은 PnP Modern Search WebPart(SPFx) 내에서 JavaScript를 사용하여 사용자 정의할 수 있습니다. 이 변경으로 사용자는 현재 탭에 계속 참여하면서 제어된 팝업의 세부 콘텐츠에 액세스할 수 있으므로 사용자 상호 작용이 향상됩니다.

일관된 동작을 유지하려면 다음과 같은 기술을 사용하십시오. SPFx WebParts에 JavaScript를 동적으로 삽입합니다. 또한 단위 테스트를 통해 이러한 변경 사항이 여러 상황에서 잘 작동하는지 확인하고 결과적으로 SharePoint 검색 결과 사용자 지정을 위한 신뢰할 수 있고 사용자 친화적인 솔루션을 얻을 수 있습니다.