Advertisement

Responsive Advertisement

How to add SharePoint reference files into SPFx with Typescript solution


This below code sample shows how to load (SharePoint) JavaScript libraries
The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data and support for open source tooling. Import this below namespace in your solution.

Image result for sharepoint framework
Image Source:https://cdn-images-1.medium.com/max/1200/1*UOpi5-1883Iuu1Cx4PPBvg.png

import { SPComponentLoader } from '@microsoft/sp-loader';

Reference: https://github.com/SharePoint/sp-dev-fx-webparts/blob/4a4fccf69b075f4395230690d35bf45e0c4f5500/samples/react-taxonomypicker/src/controls/PropertyPaneTaxonomyPicker/components/TaxonomyPickerLoader.tsx



Private _loadSPJSOMScripts() {
     const siteColUrl = Utils.getSiteCollectionUrl();
     try {
       SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', {
         globalExportsName: '$_global_init'
       })
         .then((): Promise<{}> => {
           return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/MicrosoftAjax.js', {
             globalExportsName: 'Sys'
           });
         })
         .then((): Promise<{}> => {
           return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.Runtime.js', {
             globalExportsName: 'SP'
           });
         })
         .then((): Promise<{}> => {
           return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.js', {
             globalExportsName: 'SP'
           });
         })
         .then((): Promise<{}> => {
           return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.taxonomy.js', {
             globalExportsName: 'SP'
           });
         })
         .then((): void => {
           this.setState({ loadingScripts: false });
         })
         .catch((reason: any) => {
           this.setState({ loadingScripts: false, errors: [...this.state.errors, reason] });
         });
     } catch (error) {
       this.setState({ loadingScripts: false, errors: [...this.state.errors, error] });
     }
   }


Post a Comment

0 Comments