Pages

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


Gowtham

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

No comments:

Post a Comment