0

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)} />
<IFrameDialog
  url={'/Lists/MyList/NewForm.aspx'}
  iframeOnLoad={this._onDlgLoaded.bind(this)}
  hidden={!this.state.isDlgOpen}
  onDismiss={this._onDlgDismiss.bind(this)}
  modalProps={{
    isBlocking: true
  }}
  dialogContentProps={{
    type: DialogType.close,
    showCloseButton: true
  }}
  width={'800px'}
  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 {
    this.setState({
      isDlgOpen: false
    });
  }

  private _onDlgLoaded(): void {

    console.log('dlg is loaeded');
  }

4 Answers 4

1

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:

    <IFrameDialog
      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
        //alert(iframe.contentWindow.location.href);
        let keepOpen = iframe.contentWindow.location.href.indexOf('Form.aspx?ID=') > 0;
        if (!keepOpen) {
          this.onIFrameDismiss(null);
        }
      }

      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

1
  • Thank you @Arnd, it help to handle save and Cancel event in OOTB form May 6, 2021 at 8:23
0

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

1
  • 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. Jul 10, 2019 at 16:40
0

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

https://sharepoint.github.io/sp-dev-fx-controls-react/controls/IFrameDialog/

0
  1. You need to listen for the "beforeunload" event and then close the spfx controls react panel or modal.
isOpen={isOpen}
onDismiss{() => setIsOpen(false)}
iframeOnLoad={(iframe: HTMLIFrameElement) => {                            
     iframe.contentWindow.addEventListener("beforeunload", (ev: Event) => {
            setIsOpen(false);
      })
}}

By the way, you can use the old ways when opening a classic form with the ?isdlg=1 query string by using something like this:

(window.parent as any).SP?.UI.ModalDialog.commonModalDialogClose(1, null);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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