0

I am trying to create popup form on button click when i click on "create document" button then popup will be open and on that popup form i need one text box and button.

please let me know how can i implement this in SharePoint Add-In .

enter image description here

Thanks,

Sachin

1

Here is the sample which I tested early.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="../Scripts/CustomJS.js"></script>
    <script type="text/javascript">
        var hostweburl;
        $(document).ready(function () {
            hostweburl =
                decodeURIComponent(
                    getQueryStringParameter("SPHostUrl")
            );
            var scriptbase = hostweburl + "/_layouts/15/";
            //Do not change the order, scripts should load by order. 

            $.getScript(scriptbase + "init.js").done(function () {
                $.getScript(scriptbase + "sp.runtime.js").done(function () {
                    $.getScript(scriptbase + "sp.js").done(function () {
                        $.getScript(scriptbase + "ScriptResx.ashx?name=sp.res&culture=en-us").done(function () {
                            $.getScript(scriptbase + "sp.init.js").done(function () {
                                $.getScript(scriptbase + "sp.ui.dialog.js").done(function () {
                                    $.getStylesheet(scriptbase + '/1033/styles/corev15.css').done(function () {
                                        sharePointReady(hostweburl);
                                    })
                                })
                            })
                        })
                    })
                })
            })
        });
        (function ($) {
            $.getStylesheet = function (href) {
                var $d = $.Deferred();
                var $link = $('<link/>', {
                    rel: 'stylesheet',
                    type: 'text/css',
                    href: href
                }).appendTo('head');
                $d.resolve($link);
                return $d.promise();
            };
        })(jQuery);
        function getQueryStringParameter(paramToRetrieve) {
            var params =
                document.URL.split("?")[1].split("&");
            var strParams = "";
            for (var i = 0; i < params.length; i = i + 1) {
                var singleParam = params[i].split("=");
                if (singleParam[0] == paramToRetrieve)
                    return singleParam[1];
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

CustomJS.js

function sharePointReady(hostweburl) {            
    var _html = document.createElement('h1');
    _html.innerHTML = 'SharePoint Ready';
    var _options = { html: _html };
    SP.UI.ModalDialog.showModalDialog(_options);
    //fix for close button
    $('.ms-dlgCloseBtnImg').attr('src', hostweburl + '/_layouts/15/images/fgimg.png?rev=44');

}

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.