5

I am trying to start learning the typescript and sharepoint framework. What I have been having trouble with is how to add references to SharePoint js files such as sp.js? For example, what I am trying to do right now is to open a modal dialog using the SP modal dialog framework available under SP.UI.ModalDialog.

Can someone please guide me in the right direction?

Thanks.

3

The SPFx Examples are a place to learn SPFx

https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples

Alas they hardly have documentation, and some archaic code patterns cry for a code review.
So don't just copy/paste code, always question if the code is correct!

The TaxonomyPicker shows how to load (SharePoint) JavaScript libraries.

It could do with a recursive or Promise.all approach, but this sequential solution is better readable for medior level developers.

You import the loader

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

Then use

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

There is a specific guidance article describing how to use SharePoint JSOM with SharePoint Framework client-side web parts available at https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/connect-to-sharepoint-using-jsom. The article explains the different possible approaches of loading JSOM and their pros and cons.

0

This is what's needed for a working (SharePoint)popup. Parts are from the guidance doc, part is trial and error.

public componentDidMount(): void {
    SPComponentLoader.loadScript('/_layouts/15/init.js', {
      globalExportsName: '$_global_init'
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
        globalExportsName: 'Sys'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/ScriptResx.ashx?name=sp.res&culture=en-us', {
        globalExportsName: 'Sys'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.Runtime.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/sp.init.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/sp.ui.dialog.js', {
        globalExportsName: 'SP'
      });
    });
  }

Then to show the popup you can add a method and use it on a button.

private showDialog() {
    console.log('yep');
    let options : SP.UI.IDialogOptions = {
      url: "https://your-url/",
      title: "ModalDialog",
      allowMaximize: false,
      showClose: true,
      width: 800,
      height: 830
    };
    SP.UI.ModalDialog.showModalDialog(options);
  }

And to test it you need to deploy your webpart, because in the workbench there is no styling...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.