Recently, we were developing a SPFx webpart in which we needed to open a dialog. For that we decide to use Office Fabric UI Dialog control. For that we used this link as reference. The Microsoft blog explains the code well. We were able to open the dialog as expected. We needed one more functionality that if user clicks outside the dialog, it should not be closed.
For that we found we can set “IsBlocking” flag to true. We applied the code as mentioned below:
For that we found we can set “IsBlocking” flag to true. We applied the code as mentioned below:
export default class ColorPickerDialog extends BaseDialog {
public message: string;
public colorCode: IColor;
public render(): void {
ReactDOM.render(<ColorPickerDialogContent
close={ this.close }
message={ this.message }
defaultColor={ this.colorCode }
submit={ this._submit }
/>, this.domElement);
}
public getConfig(): IDialogConfiguration {
return { isBlocking: false };
}
protected onAfterClose(): void {
super.onAfterClose();
// Clean up the element for the next dialog
ReactDOM.unmountComponentAtNode(this.domElement);
}
private _submit = (color: IColor) => {
this.colorCode = color;
this.close();
}
}
Analysis:
The blog was written in 2017. So, we thought with the updates in SPFx version, there might be change in the code. We tried to find online if we can get any updated code for the same. But we are not able to find it anywhere. So, we decide to put a query in GitHub for solution. We found an old issue there which provide us the resolution.
You can remove getConfig() method from ColorPickerDialog class as it is of no use.
It has been 6 years since the posting of the issue and still the blog is not updated. There isn’t any other resource that mentioned this. So, I am writing this again to help anyone who is stuck in the issue.
The blog was written in 2017. So, we thought with the updates in SPFx version, there might be change in the code. We tried to find online if we can get any updated code for the same. But we are not able to find it anywhere. So, we decide to put a query in GitHub for solution. We found an old issue there which provide us the resolution.
Resolution:
const dialog: ColorPickerDialog = new ColorPickerDialog({isBlocking: true});
@override
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
switch (event.itemId) {
case 'COMMAND_1':
Dialog.alert(`${this.properties.sampleTextOne}`);
// actual code provided in the code
//const dialog: ColorPickerDialog = new ColorPickerDialog();
//code that needs to be updated.
const dialog: ColorPickerDialog = new ColorPickerDialog({isBlocking: true});
dialog.message = 'Pick a color:';
// Use 'FFFFFF' as the default color for first usage
let defaultColor : IColor = { hex: 'FFFFFF', str: '', r: null, g: null, b: null, h: null, s: null, v: null };
dialog.colorCode = this._colorCode|| defaultColor;
dialog.show().then(() => {
this._colorCode = dialog.colorCode;
Dialog.alert(`Picked color: ${dialog.colorCode.hex}`);
});
break;
default:
throw new Error('Unknown command');
}
}
You can remove getConfig() method from ColorPickerDialog class as it is of no use.
It has been 6 years since the posting of the issue and still the blog is not updated. There isn’t any other resource that mentioned this. So, I am writing this again to help anyone who is stuck in the issue.
References:
