Author Details

avatar-teacher

Evolvous

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

Create a custom dialog box using SPFX

In this blog, we will see how we can create a custom dialog box on the SharePoint page using SPFX. Many times, we want a confirmation pop-up before proceeding with further action. For displaying dialog boxes on the SharePoint page, SharePoint has an npm.

The npm package has a Dialog class that helps to display text on the SP page (alert, prompt methods). For more information on the Dialog class, click here.

If we want to customize the dialog box with some HTML, we can extend BaseDialog class. In this blog, we will use the SPFX extension command set to create the custom dialog box.

Below are the steps for creating a custom dialog box on the SharePoint page.

Create SPFX command set extension solution:

First, open your node.js command prompt and use the below commands to create a solution.

  1. md DemoCustomDialog
  2. cd DemoCustomDialog
  3. yo @microsoft/sharepoint

For creating the solution, use below options:

Create a custom dialog box using SPFX - Evolvous

Project generation will take some time. Once the project is generated, open the project solution in the VS code.

Steps to create a custom dialog box:

Now we are going to create a new type script file in our solution. Go to srcextensionsdemoCustomDialog folder. Add CustomDialogBox.ts file.

Add the below code in the file:

import { BaseDialog, IDialogConfiguration } from '@microsoft/sp-dialog';
export default class CustomDialog extends BaseDialog {
public valueFromExtension: string;
public valueFromDailog:string;
public render(): void {
var html:string = "";
html +=  `

`;
html+=  `

Do you want to proceed with selected file?

`;
html+=  `

File name :&nbsp`+ this.valueFromExtension + `

`;
html +=  `
`;
html +=  `
`;
html+= `

 

               

 

             

`;

this.domElement.innerHTML += html;

this._setButtonEventHandlers();

}

// METHOD TO BIND EVENT HANDLER TO BUTTON CLICK

private _setButtonEventHandlers(): void {
const webPart: CustomDialog = this;
this.domElement.querySelector('#OkButton').addEventListener('click', () => {
this.valueFromDailog = "Yes"; //document.getElementById("inputParam")["value"] ;
this.close();
});
this.domElement.querySelector('#NoButton').addEventListener('click', () => {
this.valueFromDailog = "No"; //document.getElementById("inputParam")["value"] ;
this.close();
});
}
public getConfig(): IDialogConfiguration {
return {
isBlocking: false
};     }
protected onAfterClose(): void {
super.onAfterClose();
}
}

In the above type script file, we have created two variabls, valueFromExtension and valueFromDialog.

The valueFromExtension variable is used to take data from the extension to show on the custom dialog box. Here we are passing the currently selected file name from the command set extension. The valueFromDialog variable holds data passed from the dialog box to the command set extension for your further functionality.

Here, we are passing the value “Yes” on the click of okbutton and “No” on the click of nobutton.

We can have any number of data passing from and to a custom dialog box and command set extension as per our requirements.

Call the dialog box in the extension:

Go to srcextensionsdemoCustomDialog folder. Open the extension file DemoCustomDialogCommandSet.ts .

Add the following import statement:

import CustomDialog from './CustomDialogBox';

Now, we are going to modify onExecute method of this typescript file. Replace onExecute method with the following code.

public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
switch (event.itemId) {
case 'COMMAND_1':
const dialog: CustomDialog = new CustomDialog();
dialog.valueFromExtension = event.selectedRows[0].getValueByName("FileLeafRef");
dialog.show().then(() => {
if(dialog.valueFromDailog =="Yes"){
// Write your code here if response from dialog box is Yes
Dialog.alert('Value from confirmation pop-up: '+dialog.valueFromDailog).catch(() => {
// handle error
})
}
else(
// Write your code here if response from dialog box is No
// Here I am just refreshing page
location.reload()
);
});
break;
case 'COMMAND_2':
Dialog.alert(`${this.properties.sampleTextTwo}`).catch(() => {
/* handle error */
});
break;
default:
throw new Error('Unknown command');
}
}

We have two commands (COMMAND_1 and COMMAND_2) from the default extension created by yeoman, where COMMAND_1 will be visible only when an item is selected from the list view. For demonstration, we have modified the code under COMMAND_1 only and kept COMMAND_2 as it is.

In switch with case COMMAND_1, we have first created an object of customDialog and set its parameter. Here, we are passing the file name of the selected item using even.selectedRows object to the dialog box.

const dialog: CustomDialog = new CustomDialog();
dialog.valueFromExtension =
event.selectedRows[0].getValueByName("FileLeafRef");

The next thing we are doing is calling the dialog show method and using the promise method which will execute code once the Custom Dialog box is closed. We are checking values passed from the dialog box. If the value is “Yes” then, we are showing the default Dialog.alert method to display parameters passed from Custom Dialog.

If the value is “No” I am just reloading the page. You can write code as per your requirement.

Test the extension using gulp serve:

Now we will test our work by running gulp. Open /config/serve.json file. Set pageUrl property to some document library view’s url as shown below:

"pageUrl":
"https://evolvous.sharepoint.com/sites/TestSiteBharti/Shared%20Documents
/Forms/AllItems.aspx"

Open the node.js command prompt, set the path to your project directory, and run the gulp serve command as follows:

Create a custom dialog box using SPFX - Evolvous

It will open the document library view for you. Select any file from the library, and click on the command bar, you can see Command One and Command Two extensions. Select Command One extension. It will show the following custom dialog box. We got the file name from the extension to our custom dialog box.

Test the extension using gulp serve - Evolvous

If we click on the Yes button it will show the following alert box and if we click on the No button it will refresh the page for us.

Create a custom dialog box using SPFX - Evolvous

In this way, you can create a custom dialog box using SPFX and pass data to/from the extension/custom dialog box as per your requirements.

I hope you found this blog helpful.