reactjs - 在 SPFX 命令集中使用 SP.Modal 对话框

问题描述

我的要求是使用列表中的命令集在模式对话框中打开SharePoint页面。我遵循了这个： MSDN tutorial to create command set

这是我的.ts文件代码

            import { override } from '@microsoft/decorators';
            import { Log } from '@microsoft/sp-core-library';
            import {
              BaseListViewCommandSet,
              Command,
              IListViewCommandSetListViewUpdatedParameters,
              IListViewCommandSetExecuteEventParameters
            } from '@microsoft/sp-listview-extensibility';
            import { Dialog } from '@microsoft/sp-dialog';
            import { SPComponentLoader } from '@microsoft/sp-loader';
            import * as strings from 'DocManagerCommandSetStrings';
            require('sp-init');
              require('microsoft-ajax');
              require('sp-runtime');
              require('sharepoint');
            /**
             * If your command set uses the ClientSideComponentProperties JSON input,
             * it will be deserialized into the BaseExtension.properties object.
             * You can define an interface to describe it.
             */
            export interface IDocManagerCommandSetProperties {
              // This is an example; replace with your own properties
              sampleTextOne: string;
              sampleTextTwo: string;
            }

            const LOG_SOURCE: string = 'DocManagerCommandSet';

            export default class DocManagerCommandSet extends BaseListViewCommandSet<IDocManagerCommandSetProperties> {

              @override
              public onInit(): Promise<void> {
                Log.info(LOG_SOURCE, 'Initialized DocManagerCommandSet');
                return Promise.resolve();

              }

              @override
              public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
                const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
                if (compareOneCommand) {
                  // This command should be hidden unless exactly one row is selected.
                  compareOneCommand.visible = event.selectedRows.length === 1;
                }
              }

              @override
              public onExecute(event: IListViewCommandSetExecuteEventParameters): void {

                switch (event.itemId) {
                  case 'COMMAND_1':
                    Dialog.alert(`${this.properties.sampleTextOne}`);
                    break;
                  case 'COMMAND_2':
            //DocManagerCommandSet._loadSPJSOMScripts();

                  var options = {
                title: "My Dialog Title",
                width: 400,
                height: 600,
                url: "/_layouts/DialogPage.aspx" };
                var value = SP.UI.ModalDialog.showModalDialog(options);
                  //  Dialog.alert(`${this.properties.sampleTextTwo}`);
                    break;
                  default:
                    throw new Error('Unknown command');
                }
              }
             private static getSiteCollectionUrl(): string { 
                 let baseUrl = window.location.protocol + "//" + window.location.host; 
               const pathname = window.location.pathname; 
                 const siteCollectionDetector = "/sites/"; 
                 if (pathname.indexOf(siteCollectionDetector) >= 0) { 
                   baseUrl += pathname.substring(0, pathname.indexOf("/", siteCollectionDetector.length)); 
                 } 
                 return baseUrl; 
               } 

               private static _loadSPJSOMScripts() {
                 const siteColUrl = "https://shelldevelopment.sharepoint.com/sites/SPODA0332/";
                 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('/_layouts/15/sp.init.js', {
                    globalExportsName: 'SP'
                  });
                }).then((): Promise<{}> => {
                  return SPComponentLoader.loadScript('/_layouts/15/sp.ui.dialog.js', {
                    globalExportsName: 'SP'
                  });
                });

               }
            }

我收到以下错误：

找不到名称“SP”。在该行中 SP.UI.ModalDialog.showModalDialog(options)

请提供一些见解，因为我是 SPFX 的初学者

标签： reactjstypescriptsharepointspfx

从理论上讲，您需要取消注释//DocManagerCommandSet._loadSPJSOMScripts();并等待承诺返回。

更新 loadSPJSOMScripts 消息以返回承诺：

private static _loadSPJSOMScripts(): Promise<void> {
    const siteColUrl = "https://shelldevelopment.sharepoint.com/sites/SPODA0332/";
    return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', { 
        globalExportsName: '$_global_init' 
    }) 
    // [the rest of the calls... ] 
    .then(_ => {});
}

在 onInit() 中加载：

public onInit(): Promise<void> {
    return Promise.resolve()
      .then(_ => {
          return DocManagerCommandSet._loadSPJSOMScripts();
      });
}

或在您的 onExecute 中：

@override
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    let launchModal = false;
    switch (event.itemId) {
        case 'COMMAND_1':
            Dialog.alert(`${this.properties.sampleTextOne}`);
            break;
        case 'COMMAND_2':
            launchModal = true;
            break;
        // ...
    }
    if (launchModal) {
        DocManagerCommandSet._loadSPJSOMScripts()
            .then(_ => {
                var options = {
                    title: "My Dialog Title",
                    width: 400,
                    height: 600,
                    url: "/_layouts/DialogPage.aspx" 
                };
                var value = SP.UI.ModalDialog.showModalDialog(options);
            });
    }
}

话虽如此，在 SPFX 中使用 JSOM可能有更好的方法。

reactjs - 在 SPFX 命令集中使用 SP.Modal 对话框

问题描述

解决方案

推荐阅读