Fatal编程技术网
  • reactjs/
  • Reactjs 在SPFX命令集中使用SP.model对话框

Reactjs 在SPFX命令集中使用SP.model对话框

reactjs typescript sharepoint

Reactjs 在SPFX命令集中使用SP.model对话框,reactjs,typescript,sharepoint,spfx,Reactjs,Typescript,Sharepoint,Spfx,我的要求是使用列表中的命令集在模式对话框中打开一个SharePoint页面。我遵循了这一点： 这个问题: 这是我的.ts文件代码 import { override } from '@microsoft/decorators'; import { Log } from '@microsoft/sp-core-library'; import { BaseListViewCommandSet,

我的要求是使用列表中的命令集在模式对话框中打开一个SharePoint页面。我遵循了这一点：

这个问题:

这是我的.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'
                  });
                });

               }
            }

从'@microsoft/decorators'导入{override}；
从'@microsoft/sp core library'导入{Log}；
进口{
BaseListViewCommandSet，
指挥部，
IListViewCommandSetListViewUpdatedParameters，
IListViewCommandSetExecuteEventParameters
}来自“@microsoft/sp listview可扩展性”；
从'@microsoft/sp Dialog'导入{Dialog}；
从'@microsoft/sp loader'导入{SPComponentLoader}；
从“DocManagerCommandSetString”导入*作为字符串；
要求（'sp-init'）；
要求（'microsoft-ajax'）；
需要（'sp-runtime'）；
要求（“sharepoint”）；
/**
*如果命令集使用ClientSideComponentProperties JSON输入，
*它将被反序列化到BaseExtension.properties对象中。
*您可以定义一个接口来描述它。
*/
导出接口IDocManagerCommandSetProperties{
//这是一个示例；替换为您自己的属性
sampleTextOne：字符串；
样本文本二：字符串；
}
const LOG_SOURCE:string='DocManagerCommandSet'；
导出默认类DocManagerCommandSet扩展BaseListViewCommandSet{
@凌驾
public onInit（）：承诺{
Log.info（Log_源，“初始化的DocManagerCommandSet”）；
返回承诺。解决（）；
}
@凌驾
public onListViewUpdated（事件：IListViewCommandSetListViewUpdatedParameters）：无效{
const compareOneCommand:Command=this.tryGetCommand（'Command_1'）；
如果（比较命令）{
//除非仅选择了一行，否则应隐藏此命令。
compareOneCommand.visible=event.selectedRows.length==1；
}
}
@凌驾
公共OneExecute（事件：IListViewCommandSetExecuteEventParameters）：无效{
开关（event.itemId）{
案例“命令1”：
alert（`this.properties.sampleTextOne}`）；
打破
案例“命令2”：
//DocManagerCommandSet._loadSPJSOMScripts（）；
变量选项={
标题：“我的对话标题”，
宽度：400，
身高：600，
url:“/\u layouts/DialogPage.aspx”}；
var值=SP.UI.ModalDialog.showModalDialog（选项）；
//alert（`${this.properties.sampletextwo}`）；
打破
违约：
抛出新错误（“未知命令”）；
}
}
私有静态getSiteCollectionUrl（）：字符串{
让baseUrl=window.location.protocol+“/”+window.location.host；
const pathname=window.location.pathname；
const siteCollectionDetector=“/sites/”；
如果（路径名.indexOf（siteCollectionDetector）>=0）{
baseUrl+=pathname.substring（0，pathname.indexOf（“/”，siteCollectionDetector.length））；
} 
返回baseUrl；
} 
私有静态_loadSPJSOMScripts（）{
const siteColUrl=”https://shelldevelopment.sharepoint.com/sites/SPODA0332/";
加载脚本（siteColUrl+'/_layouts/15/init.js'，{
globalExportsName:“$\u global\u init”
}) 
.然后（（）：承诺=>{
返回SPComponentLoader.loadScript（siteColUrl+'/_layouts/15/MicrosoftAjax.js'，{
全局端口名称：“Sys”
}); 
}) 
.然后（（）：承诺=>{
返回SPComponentLoader.loadScript（siteColUrl+'/_layouts/15/SP.Runtime.js'，{
全局端口名称：“SP”
}); 
}) 
.然后（（）：承诺=>{
返回SPComponentLoader.loadScript（siteColUrl+'/_layouts/15/SP.js'，{
全局端口名称：“SP”
}); 
}).然后（（）：承诺=>{
返回SPComponentLoader.loadScript（'/_layouts/15/sp.init.js'{
全局端口名称：“SP”
});
}).然后（（）：承诺=>{
返回SPComponentLoader.loadScript（'/_layouts/15/sp.ui.dialog.js'{
全局端口名称：“SP”
});
});
}
}
我得到以下错误：

在行中找不到名称“SP” 
SP.UI.ModalDialog.showModalDialog（选项）

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

理论上，您需要取消注释
//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(_ => {});
}
也就是说，可能有更好的方法。

请在ts文件顶部参考此文件，确保您提供的路径正确。是否有更好的方法使用spfx扩展在对话框窗口中打开SharePoint modern页面？我没有收到此错误，但没有打开任何对话框 
public onInit(): Promise<void> {
    return Promise.resolve()
      .then(_ => {
          return DocManagerCommandSet._loadSPJSOMScripts();
      });
}

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