PnP Modern Search WebPart'ta (SFx) Bağlantıları Açılır Pencerede Açma

SPFx'teki Özel Açılır Pencere Bağlantılarıyla Kullanıcı Deneyimini İyileştirme

Modern SharePoint geliştirmede, yapılandırılabilir arama sonuçları sağlamak için PnP Modern Arama Web Bölümünü (SPFx) kullanmak, kullanıcı deneyimini önemli ölçüde iyileştirebilir. Bağlantıların nasıl açılacağını kontrol etmek, özellikle "Ayrıntılı Liste" düzeniyle geliştiriciler arasında popüler bir özelliktir. Normalde bağlantılar yeni bir sekmede açılır, ancak bunları bir açılır pencerede açmak istersek ne olur?

Bu yazıda, PnP Modern Arama Web Bölümü'nün bağlantı davranışını değiştirerek bu işlevselliğin nasıl uygulanacağına bakacağız. Arama sonuçlarını yeni bir sekmede açmak yerine, bağlantıyı özelleştirilmiş bir açılır pencerede açılmaya nasıl zorlayacağımızı göstereceğiz, böylece daha entegre bir kullanıcı deneyimi elde edeceğiz.

Bu zorluk, varsayılan olarak yeni bir sekmeye ayarlanan `` gibi bir formül kullandığınızda ortaya çıkar. Ancak JavaScript kullanarak bu davranışı geçersiz kılabilir ve bağlantıyı kontrollü bir açılır pencerede açabiliriz. Bu, aynı tarama oturumunda içeriğin görüntülenmesinde daha fazla esneklik sağlar.

Ayrıntılı Liste düzenini geliştirmek için JavaScript ve SPFx kullanımına odaklanarak, bu özelliği geliştirmek için gereken adımlarda size yol göstereceğiz. SharePoint sitenizin kusursuz ve kullanıcı dostu olmasını sağlamak için çözümü incelerken bizi takip etmeye devam edin.

SPFx'teki Açılır Pencere Çözümünü Anlamak

Yukarıda listelenen komut dosyaları, bir PnP Modern Arama Web Bölümü (SPFx) içindeki bağlantıların varsayılan davranışını ayarlar. Varsayılan olarak bağlantılar şunu kullanır: hedef = "_ boş" Yeni bir sekmede açılacak etiketi seçin. Ancak burada amaç bu bağlantıların açılır pencerede açılmasını sağlayarak kullanıcı etkileşimini arttırmaktır. Bunu başarmak için şunları kullandık: pencere.open() geliştiricilerin URL'leri yeni bir tarayıcı penceresinde veya açılır pencerede açmasına olanak tanıyan işlev. Bu işlev, açılır pencerenin amaçlandığı gibi performans göstermesini sağlamak için genişlik, yükseklik ve diğer özellikler (kaydırma çubukları veya yeniden boyutlandırılabilirlik gibi) gibi belirli parametrelerle ayarlanabilir.

Bağlantı etiketlerinin varsayılan tıklama davranışını geçersiz kılmak, yaklaşımın hayati bir bileşenidir. Bu ile yapılır event.preventDefault()bağlantının yeni sekmede açılmasını engeller. Bunun yerine, bağlantıya özel bir işlevi etkinleştiren bir olay dinleyicisi ekleriz (bu durumda, openInPopup()) tıklama olayını işleyen ve URL'yi bir açılır pencerede açan. Bu, geliştiricilerin bağlantının davranışı üzerinde daha fazla kontrol sahibi olmasına olanak tanır ve PnP Modern Arama Web Bölümünde daha tutarlı bir kullanıcı deneyimi sağlar.

Ön uç davranışıyla ilgilenmenin yanı sıra, SPFx'in yerleşik dekoratörlerini kullanan bir arka uç yaklaşımını da inceledik: @geçersiz kıl. Bu yaklaşım, geliştiricilerin özel Web Bölümlerine doğrudan JavaScript eklemesine olanak tanır ve arama sonuçlarının davranışını daha da değiştirir. SPFx'te oluşturma sürecini geçersiz kılmak, bağlantı tıklamalarını işleyen ve gerekli materyali bir açılır pencerede açan JavaScript kodunu eklememize olanak tanır. Bu teknik, çözümü daha modüler hale getirir ve SharePoint ortamının birden çok alanında yeniden kullanılabilir hale getirir, dolayısıyla bakımı iyileştirir.

Birim testi, açılır pencere özelliğinin birden fazla ortamda ve tarayıcıda düzgün şekilde çalışmasını sağlamak için kritik öneme sahiptir. Kullanma casusOn() Jasmine test çerçevesinde şunu doğrular: pencere.open() yöntem doğru argümanlarla yürütülür. Bu test şekli, olası sorunları geliştirme sürecinin erken safhalarında tespit eder ve açılır pencerelerin planlandığı gibi çalışmasını garanti eder. Bu çözüm, ön uç olay işleme, arka uç özelleştirme ve birim testini entegre ederek SharePoint'in PnP Modern Arama Web Bölümündeki kullanıcı etkileşimlerini güçlendirir.

<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'te Olay İşleme ve Dinamik JavaScript Eklemeyi Keşfetmek

PnP Modern Search WebPart (SPFx) ile çalışırken geliştiriciler için yararlı özelliklerden biri, bağlantılar gibi öğelerin nasıl davranacağını dinamik olarak ayarlama yeteneğidir. JavaScript olay işlemenin kullanımı, kullanıcı etkileşimlerini kişiselleştirmek için çok sayıda seçenek sunar. Bağlantı tıklamalarını yakalamak ve kontrol etmek için olay dinleyicilerini kullanmak, daha etkileşimli bir deneyim oluşturur. Tıklama olaylarını yakalayarak normal davranışı geçersiz kılabilir ve URL'leri kontrollü bir açılır pencerede açabiliriz. Bu, kullanıcının geçerli sekmesini veya penceresini bozmadan yumuşak bir geçiş sağlar.

SPFx WebParts'taki bağlantıların özelleştirilmesi aynı zamanda JavaScript kodunun dinamik olarak eklenmesini de gerektirir. SharePoint Framework (SPFx) aşağıdaki gibi yöntemler sağlar: @geçersiz kıl Ve oluşturma() bunu başardığın için. Geliştiriciler, özel JavaScript ekleyerek, WebPart'ın kendisinde önemli değişiklikler yapmak zorunda kalmadan arama sonucu öğelerinin davranışını değiştirebilir. Bu esneklik, tüm arama sonucu bağlantılarında genel ayarlamalar yapmayı kolaylaştırarak istenen davranışın (açılır pencerede açılma gibi) platform genelinde aynı olmasını sağlar.

Son olarak, performans ve kullanıcı deneyimi herhangi bir web tabanlı sistemde kritik faktörlerdir ve aynı durum burada da geçerlidir. JavaScript kullanımını optimize ederek ve yoğun kaynak kullanan etkinlikleri sınırlayarak, bu özelleştirmelerin sayfa yükleme süreleri veya yanıt verme hızı üzerinde önemli bir etkisinin olmayacağını garanti edebiliriz. Verimli JavaScript kullanımı, arka uç SPFx değişiklikleriyle birleştiğinde performanstan ödün vermeden yüksek düzeyde esneklik sağlayarak SharePoint platformunda sorunsuz bir kullanıcı deneyimi sağlar.