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');
  }
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

| improve this answer | |
  • 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
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/

| improve this answer | |
0

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

| improve this answer | |

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.