Cách mở liên kết trong cửa sổ bật lên trong PnP Modern Search WebPart (SFx)

Nâng cao trải nghiệm người dùng với các liên kết bật lên tùy chỉnh trong SPFx

Trong quá trình phát triển SharePoint hiện đại, việc sử dụng PnP Modern Search WebPart (SPFx) để cung cấp kết quả tìm kiếm có thể định cấu hình có thể cải thiện đáng kể trải nghiệm người dùng. Kiểm soát cách mở liên kết là một tính năng phổ biến của các nhà phát triển, đặc biệt là với bố cục "Danh sách chi tiết". Thông thường, các liên kết sẽ mở trong một tab mới, nhưng nếu chúng ta muốn mở chúng trong cửa sổ bật lên thì sao?

Trong bài đăng này, chúng ta sẽ xem xét cách triển khai chức năng này bằng cách thay đổi hành vi liên kết của WebPart Tìm kiếm Hiện đại PnP. Thay vì mở kết quả tìm kiếm trong tab mới, chúng tôi sẽ hướng dẫn cách buộc liên kết mở trong cửa sổ bật lên tùy chỉnh, mang lại trải nghiệm người dùng tích hợp hơn.

Thử thách nảy sinh khi bạn sử dụng một công thức như ``, mặc định là một tab mới. Tuy nhiên, bằng cách sử dụng JavaScript, chúng tôi có thể ghi đè hành vi này và mở liên kết trong cửa sổ bật lên được kiểm soát. Điều này cho phép linh hoạt hơn trong việc hiển thị nội dung trong cùng một phiên duyệt.

Chúng tôi sẽ hướng dẫn bạn các bước cần thiết để phát triển tính năng này, tập trung vào việc sử dụng JavaScript và SPFx để cải thiện bố cục Danh sách chi tiết. Hãy chú ý theo dõi khi chúng tôi hướng dẫn giải pháp để đảm bảo trang SharePoint của bạn liền mạch và thân thiện với người dùng.

Tìm hiểu giải pháp cửa sổ bật lên trong SPFx

Các tập lệnh được liệt kê ở trên điều chỉnh hành vi mặc định của các liên kết trong WebPart Tìm kiếm Hiện đại PnP (SPFx). Theo mặc định, các liên kết sử dụng mục tiêu="_blank" thẻ để mở trong một tab mới. Tuy nhiên, mục đích ở đây là mở các liên kết này trong cửa sổ bật lên, từ đó tăng khả năng tương tác của người dùng. Để thực hiện được điều này, chúng tôi đã sử dụng window.open() chức năng cho phép các nhà phát triển mở URL trong cửa sổ trình duyệt hoặc cửa sổ bật lên mới. Chức năng này có thể được điều chỉnh bằng các tham số cụ thể, chẳng hạn như chiều rộng, chiều cao và các thuộc tính khác (chẳng hạn như thanh cuộn hoặc khả năng thay đổi kích thước), để đảm bảo rằng cửa sổ bật lên hoạt động như dự định.

Ghi đè hành vi nhấp chuột mặc định của thẻ liên kết là một thành phần quan trọng của phương pháp này. Việc này được thực hiện với sự kiện.preventDefault(), điều này ngăn liên kết mở trong tab mới. Thay vào đó, chúng tôi đính kèm trình xử lý sự kiện vào liên kết để kích hoạt chức năng tùy chỉnh (trong trường hợp này là openInPopup()) xử lý sự kiện nhấp chuột và mở URL trong cửa sổ bật lên. Điều này cho phép các nhà phát triển kiểm soát nhiều hơn hành vi của liên kết và mang lại trải nghiệm người dùng nhất quán hơn trong WebPart Tìm kiếm Hiện đại PnP.

Ngoài việc xử lý hành vi của giao diện người dùng, chúng tôi cũng đã kiểm tra cách tiếp cận phụ trợ bằng cách sử dụng các công cụ trang trí tích hợp của SPFx như @override. Cách tiếp cận này cho phép các nhà phát triển chèn trực tiếp JavaScript vào WebPart tùy chỉnh, sửa đổi thêm hành vi của kết quả tìm kiếm. Việc ghi đè quá trình kết xuất trong SPFx cho phép chúng tôi chèn mã JavaScript xử lý các lần nhấp vào liên kết và mở tài liệu cần thiết trong cửa sổ bật lên. Kỹ thuật này làm cho giải pháp trở nên mô-đun hơn và có thể tái sử dụng trên nhiều khu vực của môi trường SharePoint, từ đó cải thiện khả năng bảo trì.

Kiểm tra đơn vị là rất quan trọng để đảm bảo rằng tính năng bật lên hoạt động bình thường trên nhiều môi trường và trình duyệt. sử dụng gián điệp() trong khung thử nghiệm Jasmine xác nhận rằng window.open() phương thức được thực thi với các đối số phù hợp. Hình thức thử nghiệm này xác định sớm các vấn đề tiềm ẩn trong quá trình phát triển và đảm bảo rằng cửa sổ bật lên hoạt động theo kế hoạch. Giải pháp này tăng cường tương tác của người dùng trong WebPart Tìm kiếm Hiện đại PnP của SharePoint bằng cách tích hợp xử lý sự kiện giao diện người dùng, tùy chỉnh phụ trợ và thử nghiệm đơn vị.

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

Khám phá Xử lý sự kiện và Chèn JavaScript động trong SPFx

Khi làm việc với PnP Modern Search WebPart (SPFx), một tính năng hữu ích dành cho nhà phát triển là khả năng điều chỉnh linh hoạt cách các phần tử, chẳng hạn như liên kết, hoạt động. Việc sử dụng xử lý sự kiện JavaScript cung cấp rất nhiều tùy chọn để cá nhân hóa các tương tác của người dùng. Việc sử dụng trình xử lý sự kiện để nắm bắt và kiểm soát số lượt nhấp vào liên kết sẽ tạo ra trải nghiệm tương tác nhiều hơn. Bằng cách ghi lại các sự kiện nhấp chuột, chúng tôi có thể ghi đè hành vi thông thường và mở URL trong cửa sổ bật lên được kiểm soát. Điều này đảm bảo quá trình chuyển đổi suôn sẻ mà không làm phiền tab hoặc cửa sổ hiện tại của người dùng.

Việc tùy chỉnh các liên kết trong SPFx WebParts cũng yêu cầu chèn mã JavaScript động. SharePoint Framework (SPFx) cung cấp các phương thức như @override Và kết xuất() để hoàn thành việc này. Bằng cách chèn JavaScript tùy chỉnh, nhà phát triển có thể thay đổi hành vi của các mục kết quả tìm kiếm mà không cần phải thực hiện những sửa đổi đáng kể đối với chính WebPart. Tính linh hoạt này giúp dễ dàng thực hiện các điều chỉnh chung cho tất cả các liên kết kết quả tìm kiếm, đảm bảo rằng hành vi mong muốn—chẳng hạn như mở trong cửa sổ bật lên—là thống nhất trên toàn nền tảng.

Cuối cùng, hiệu suất và trải nghiệm người dùng là những yếu tố quan trọng trong bất kỳ hệ thống dựa trên web nào và điều này cũng đúng ở đây. Bằng cách tối ưu hóa việc sử dụng JavaScript và hạn chế các hoạt động tiêu tốn nhiều tài nguyên, chúng tôi có thể đảm bảo rằng những tùy chỉnh này không có ảnh hưởng đáng kể đến thời gian tải trang hoặc khả năng phản hồi. Việc sử dụng JavaScript hiệu quả, kết hợp với các sửa đổi SPFx phụ trợ, mang lại mức độ linh hoạt cao mà không làm giảm hiệu suất, mang lại trải nghiệm người dùng liền mạch trên toàn bộ nền tảng SharePoint.