The code below opens a new item in Iframe/modal dialog. But when the user saves or closes the modal form i would like it to be closed and not redirected to any other page.

Is there any way I can close the modal form when the item is saved.

The option to create a custom form with all the controls seems a bit long winded.

<PrimaryButton text={'Open Dialog'} onClick={this._onClick.bind(this)} />
<PrimaryButton text={'Open Clients Form'} onClick={this._onClientClick.bind(this)} />
    isBlocking: true
    type: DialogType.close,
    showCloseButton: true
  height={'900px'} />

How do i get a handle of the Iframe and check if the src is still pointing to the same url . I can close the modal dialog.

private _closeModal = (): void => {
    this.setState({ showModForm: false });
  private _onDlgDismiss(): void {
      isDlgOpen: false

  private _onDlgLoaded(): void {

    console.log('dlg is loaeded');

You can create a custom dialog box in SPFx to achieve it.

The following articles for your reference.

SPFx: Modal Dialog, show classic SharePoint forms

Use custom dialog boxes with SharePoint Framework Extensions

  • Thank you for the reply. I did you the code sample from the link you suggested. As explained in the question i need to close the iframe after the item is saved. By default the item is saved but redirected to another page or to the allitems page by default. – user1339913 Jul 10 '19 at 16:40

Use the pnp-SPFX-Controls for open page in popup as similar to classic



You can use the callback from iframeOnLoad. Check the url to see ith the dialog should stay open. If not: just call the dissmiss handler like this:

      url={state.iframeUrl} hidden={!state.iframeShow}
      iframeOnLoad={(iframe) => this.onIFrameLoad(iframe)}
      onDismiss={(event) => this.onIFrameDismiss(event)}
      modalProps={{ isBlocking: true, containerClassName: '' }}
      dialogContentProps={{ type: DialogType.close, showCloseButton: true }}
      width='800px' height='600px'

      private async onIFrameLoad(iframe: any) {
        // HTMLIFrameElement .contentWindow .location .href
        let keepOpen = iframe.contentWindow.location.href.indexOf('Form.aspx?ID=') > 0;
        if (!keepOpen) {

      private async onIFrameDismiss(event: React.MouseEvent) {
        this.setState({ iframeShow: false });

using https://sharepoint.github.io/sp-dev-fx-controls-react/controls/IFrameDialog/#how-to-use-this-control-in-your-solutions

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.