Need some more implementation documentation on IFrameDialog

[kspranesh]

I cant seem to figure out how exactly to use the control following the specification in the documentation. I use it and i get promise errors with sp.dialog.js. I am using the control in the render as below and nothing pops up when its invoked and i cannot also use the property iframeOnLoad={this._onIframeLoaded.bind(this)} as it gives a compilation error for the {this._onIframeLoaded.bind(this)}. Do i have to explicitly implement the method ? Please clarify

public render(): JSX.Element {

        return (<IFrameDialog 
            url={this.props.url} 
         
            hidden = {false}               
            modalProps={{
                isBlocking: true,
                containerClassName: "cs-dialog"
            }}
            dialogContentProps={{
                type: DialogType.close,
                showCloseButton: true
            }}
            width={'800px'}
            height={'800px'}/>);
        }  
        
        
          
}

[estruyf]

@AJIXuMuK can you help @kspranesh with this?

[AJIXuMuK]

Hi @kspranesh
I've created a small sample for IFrameDialog here

There is an issue on how to reference the component from the library (I will fix it), but the component itself works as expected.
Regarding your concerns:

• I use it and i get promise errors with sp.dialog.js sp.dialog.js is not used in IFrameDialog. Maybe these errors are posted from the page that you're opening in the iframe.
• Do i have to explicitly implement the method?. Yes, you should implement this method. It's a handler to execute some code when the iframe's content is loaded. For example, you can access iframe page's HTML and change something there.

[AJIXuMuK]

Here is a PR to address reference issue. It also adds IFrameDialog example to the web part we have in the project.

[Gennady-G]

@AJIXuMuK can You please provide a string how You call IFrameDialog with different urls?.. For example I store links to display forms and want them opened as popups..

url={this.props.url}

as I understand - opens hard-coded property, but in my classic projects it was a function..

p.s.: sorry, I am newbie in React..

Best regards, Gennady