Using SP.Modal dialog in SPFX command set - reactjs

Question

My requirement is to open a SharePoint page in a modal dialogue using command set in a list. I have followed this:
MSDN tutorial to create command set
and this question:
How to refernence sp.js
This is my .ts file code
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'
});
});
}
}
I am getting the following error:
cannot find the name 'SP'.in the line
SP.UI.ModalDialog.showModalDialog(options)
Kindly provide some insights as I am a beginner in SPFX

Answer 1

Theoretically you need to uncomment //DocManagerCommandSet._loadSPJSOMScripts(); and wait for the promise to return.
Update the loadSPJSOMScripts message to return the promise:
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(_ => {});
}
to load in the onInit():
public onInit(): Promise<void> {
return Promise.resolve()
.then(_ => {
return DocManagerCommandSet._loadSPJSOMScripts();
});
}
Or in your 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);
});
}
}
That being said, there may be better ways to work with JSOM in SPFX.