SharePoint Framework (SPFx) WebPart CDN Üzerinden jQuery ve jQuery Plugins Kullanımı

0 80

Bu makalemizde CDN üzerinden jQuery yükleyip, api tarafında hava durumu için sorgumuzu jquery ajax ile çekeceğiz. Source code için GitHub linkinden ulaşabilirsiniz.

Örnek WebPart Görünümü

Şimdi adım adım ilerleyelim 🙂

  • jQuery typings yüklememiz gerekiyor. (Proje içerisinde kullanabilmek için)
npm install --save @types/jquery
  • Sonrasında jQuery CDN upload etmek için WebPart içerisindeki render() method unu aşağıdaki gibi güncelleyiniz. Bu kısımda önce jQuery yüklüyoruz ve ReactDom.render() methodunu yükleme işlemi tamamlandıktan sonra tetikliyoruz. Microsoft https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library linkte yer alan config içerisine yazılmasını belirtmiş fakat güncelliğini yitirmiş sanırım, bir kaç okuduğum makalede çok sağlıklı çalışmadığını belirtmiş. Bu yüzdende aşağıdaki methodu önermektedir.
 public render(): void {
    SPComponentLoader.loadScript('https://code.jquery.com/jquery-3.1.0.min.js', {
      globalExportsName: 'jQuery'
    }).then(($: any) => {
      const element: React.ReactElement<IWeatherProps> = React.createElement(
        Weather,
        {
          weatherService: WeatherService,
          location: this.properties.location
        }
      );

      ReactDom.render(element, this.domElement);
    });

  }
  • Sonrasında “WeatherService.ts” içerisinde jquery kullanıp, gerekli sorgumuzu yapıyoruz.
import * as $ from 'jquery';

WebPart ile CDN üzerinden ilgili script lerinizi çekip, kullanmak bu kadar basit, okuduğunuz için çok teşekkürler 🙂

Bunları da beğenebilirsin Yazarın diğer kitapları

Themetf