none
show dialog containing all the info to be sent RRS feed

  • 질문

  • Hi,

    I have one webpart which display some information from sharepoint list like requesting for new Teams request..when user clicks on request button, a dialog should get open displaying all information to be sent, so that requester can check all the values before sending..How can this be done?

    This is the webpart..on click of request button modal should be open with all these values to recheck them. 





    • 편집됨 varshagupta 2019년 10월 17일 목요일 오전 9:41
    2019년 10월 17일 목요일 오전 9:22

모든 응답

  • Hi,

    In SharePoint, we can use SP.UI.ModalDialog.showModalDialog method to show a modal dialog, the following example code for your reference.

    <script type="text/javascript">
    function openBasicDialog(){
    	var options = SP.UI.$create_DialogOptions();
    	var myhtml = document.createElement('div');
    	myhtml.innerHTML="<a href='http://www.bing.com'>bing</a>";
    	options.title= "Check information",
    	options.html = myhtml,	
    	SP.UI.ModalDialog.showModalDialog(options);
    }
    </script>
    <input type="button" value="Open Dialog" onclick="openBasicDialog();"/>

    You can get all the information from the form using jQuery code and open dialog using code above.

    Or we can use jQuery dialog plugin(https://jqueryui.com/dialog/) to popup a dialog.

    For using jQuery and JavaScript in web part, please refer to the article below.

    Adding jQuery to a visual web part and then implement parent/child radio buttons

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    2019년 10월 18일 금요일 오전 3:27
    중재자
  • Hi,

    I have used react, I think cant use SP.Ui.modalDialog , Cant we go for some other approach like fabric ui.or something else.




    • 편집됨 varshagupta 2019년 10월 18일 금요일 오전 5:02
    2019년 10월 18일 금요일 오전 5:01
  • Hi,

    In SPfx web part, if you use the react, please check the IframeDialog component below.

    import * as React from "react";
    import * as ReactDOM from "react-dom";
    import { BaseDialog, IDialogConfiguration } from "@microsoft/sp-dialog";
    import {
        SPHttpClient,
        SPHttpClientResponse
    } from "@microsoft/sp-http";
    import {
        DialogContent
    } from "office-ui-fabric-react";
    interface IIFrameDialogContentProps {
        close: () => void;
        url: string;
        iframeOnLoad?: (iframe: any) => void;
    }
    class IFrameDialogContent extends React.Component<IIFrameDialogContentProps,{} > {
        private _iframe: any;
        constructor(props: IIFrameDialogContentProps) {
            super(props);
        }
        public render(): JSX.Element {
            return <DialogContent
                title="Alert Me"
                onDismiss={this.props.close}
                showCloseButton={true}
            >
                <iframe ref={(iframe) => { this._iframe = iframe; }} onLoad={this._iframeOnLoad.bind(this)}
                    style={{ width: "600px", height: "1000px" }} src={this.props.url} frameBorder={0}></iframe>
            </DialogContent>;
        }
    
        private _iframeOnLoad(): void {
            try { 
                this._iframe.contentWindow.frameElement.cancelPopUp = this.props.close;
            } catch (err) {
                if (err.name !== "SecurityError") {
                    throw err;
                }
            }
            if (this.props.iframeOnLoad) {
                this.props.iframeOnLoad(this._iframe);
            }
        }
    }
    export default class IFrameDialog extends BaseDialog {
        private url: string = "";
        constructor(url: string) {
            super();
            this.url = url;
        }
        public render(): void {
            window.addEventListener("CloseDialog", () => { this.close(); });
            ReactDOM.render(
                <IFrameDialogContent
                    close={this.close}
                    url={this.url}
                />, this.domElement);
        }
        public getConfig(): IDialogConfiguration {
            return {
                isBlocking: false
            };
        }
        protected onAfterClose(): void {
            super.onAfterClose();
            ReactDOM.unmountComponentAtNode(this.domElement);
        }
    }
     

    More information is here:

    SPFx: Modal Dialog, show classic SharePoint forms

    And check the solution below.

    sp-dev-fx-controls-react

    And check thread below with similar requirement.

    https://social.msdn.microsoft.com/Forums/office/en-US/2b1cccc1-5fda-4fd1-b1ae-0438a96672f8/display-pop-up-or-dialog-box-onclick-of-button-in-react-js-spfx-webpart-in-sharepoint-online?forum=sharepointdevelopment

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    2019년 10월 18일 금요일 오전 6:36
    중재자
  • Hi,

    Would you please provide us with an update on the status of your issue?

    Best Regards,
    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    2019년 10월 23일 수요일 오전 8:08
    중재자
  • Hi,

    Any update?

    If my reply help you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best regards,
    Dennis

    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    2019년 10월 28일 월요일 오전 8:26
    중재자