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

0
Genel, SharePoint Framework (SPFx)

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 = 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 WeatherItem from '../models/WeatherItem';
import { IService } from '../models/IService';

import * as $ from 'jquery';

export class WeatherService implements IService {
    private static instance: WeatherService;

    private constructor() {
    }

    static getInstance() {
        if (!WeatherService.instance) {
            WeatherService.instance = new WeatherService();
        }
        return WeatherService.instance;
    }

    getItems(location: string): Promise<WeatherItem> {
        return new Promise((resolve, reject) => {

            $.ajax({
                dataType: "json",
                url: `https://api.openweathermap.org/data/2.5/weather?appid=001673e88732dd7e6a8643fc620f88a8&q=${location}&units=metric`,
                success: (response) => {
                    resolve({
                        Title: response.name,
                        IconUri: `http://openweathermap.org/img/w/${response.weather[0].icon}.png`,
                        Temp: response.main.temp.toFixed(0)
                    });
                },
                error: (error) => reject(error)
            });

            // alternative   
            // fetch(`https://api.openweathermap.org/data/2.5/weather?appid=001673e88732dd7e6a8643fc620f88a8&q=${location}&units=metric`).then(response => response.json())
            //     .then((response) => {
            //         resolve({
            //             Title: response.name,
            //             IconUri: `http://openweathermap.org/img/w/${response.weather[0].icon}.png`,
            //             Temp: response.main.temp.toFixed(0)
            //         });
            //     })
            //     .catch(error => reject(error));

        });
    }
}

export default WeatherService.getInstance();
import * as $ from 'jquery';

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

Leave a Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

CollabTR SharePoint Office 365 Teams Eğitim Danışmanlık Hizmetleri

Ankara

K. Subayevleri Mah. Şabanözü Sk. No:3/2 Keçiören

İstanbul

Maltepe Mah. Eski Çırpıcı Yolu Sk. No: 3 B / 40 Zeytinburnu

Antalya

Lara

info@collabtr.com

0 312 317 33 43

0 530 296 21 17

0 542 826 08 60