5

I have a plain HTML page (not aspx) that is hosted in my Sharepoint site Assets. Below is the source.

<!doctype html>
<html>
<body>
    <button type=button onclick="openDialog()">click me</button>
    <div style="display:none">
       <div id="d10">my dialog message</div>
    </div>
    <script>
    function openDialog() {
       var e = document.getElementById('d10');
       var options = {
        title: "My Dialog Title",
        width: 400,
        height: 300,
        html: e
       };
       SP.UI.ModalDialog.showModalDialog(options);
    }
    </script>
</body>
</html>

But when I click the button I get an error in the console.

Uncaught ReferenceError: SP is not defined

I also tried to lazy load the sp.js using this code...

try {
    SP.UI.ModalDialog.showModalDialog(options);
}
catch (error) {
   ExecuteOrDelayUntilScriptLoaded(ITSP.TaskForm.InitialisePage, "sp.ui.dialog.js");
   SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}

But then I just get a different error.

Uncaught ReferenceError: ExecuteOrDelayUntilScriptLoaded is not defined

Apparently I am missing some <script src=???> tags in my HTML file. What do I need to include to make this work?

  • I've tried it and had the same result. SP.UI only works within a SharePoint page. – Erin L Jun 21 '16 at 15:24
  • such a pity. i'll use JQuery-UI dialog if i must. – John Henckel Jun 21 '16 at 15:38
13

Here is a minimal HTML file that will make use of SP.UI.ModalDialog:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/corev15.css"/>
        <script type="text/javascript" src="/_layouts/15/init.js"></script>
        <script type="text/javascript" src="/_layouts/15/msajaxbundle.js"></script>
        <script type="text/javascript" src="/_layouts/15/1033/sp.res.js"></script>
        <script type="text/javascript" src="/_layouts/15/sp.init.js"></script>
        <script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script>
        <script type="text/javascript" src="/_layouts/15/core.js"></script>
    </head>
    <body>
        <button type=button onclick="openDialog()">click me</button>
        <div style="display:none">
           <div id="d10">my dialog message</div>
        </div>
        <script>
        function openDialog() {
           var e = document.getElementById('d10');
           var options = {
            title: "My Dialog Title",
            width: 400,
            height: 300,
            html: e
           };
           SP.UI.ModalDialog.showModalDialog(options);
        }
        </script>
    </body>
</html>

This one will work for SharePoint Online, can't say anything about on-premises but I see no reason why it shouldn't work.

Update to make it a proper answer: You can copy all the script tags + the core15.css style tag from the source view of a normal SharePoint page to your HTML file. Once that's done you can delete the tags one by one (when it throws an error after removing a tag, add it back) until you get to the bare minimum that is required to render the modal dialog.

For SharePoint Online the code above seems to be the minimum.

UPDATE

In my SharePoint 2013 on-premises environment the code below seems to be the minimum required:

(you might have to adjust the long alphanumeric string behind ScriptResource.axd?d= to the appropriate value in your environment)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/corev15.css"/>
        <script type="text/javascript" src="/_layouts/15/init.js"></script>
        <script type="text/javascript" src="/ScriptResource.axd?d=UpqI01Xk841N_9CuQ5wMNuq9zFYl9ThRGFK83kTirNaZpHlB_KtqOQsuq_rvbhkEoKzWx2eHmGUEVuRsRgkhBYN6G4P88iQ7E9317tHeeWCm7WNLlm-efogSztGRwHF4ALZSZgIi48GJ_F2nixLvqYT_d6nONKgdtAa-ZCAL7pf2SnblS9VJ1CfY9irxg7Kw0&amp;t=ffffffffeea0dba9"></script>
        <script type="text/javascript" src="/_layouts/15/sp.init.js"></script>                                                       
        <script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script>                                                        
        <script type="text/javascript" src="/_layouts/15/ScriptResx.ashx?name=sp.res&culture=en-us"></script>
    </head>
    <body>
        <button type=button onclick="openDialog()">click me</button>
        <div style="display:none">
           <div id="d10">my dialog message</div>
        </div>
        <script>
        function openDialog() {
           var e = document.getElementById('d10');
           var options = {
            title: "My Dialog Title",
            width: 400,
            height: 300,
            html: e
           };
           SP.UI.ModalDialog.showModalDialog(options);
        }
        </script>
    </body>
</html>

Update 2

And you should change the line

html: e

to

html: e.cloneNode(true)

Otherwise the button will only work properly once since you pass the HTML by reference and will be deleted when you close the modal dialog.

  • I'm on-premises. It didn't work for me. I got 404 "not found" on the msajaxbundle and sp.res.js. Followed by error "Type is not defined" in the sp.init.js. ... How did you discover this? is it documented somewhere? – John Henckel Jun 21 '16 at 16:22
  • 1
    In that case you have to try to find the on-premises equivalents to those files. I stared with the blank HTML page and then just added all the script-tags + the core15.css style tag from the source view of a normal sharepoint page. Then I started removing tags until I got to the bare minimum that is required to render the modal dialog. – Daniel Stölzner Jun 21 '16 at 16:28
  • @JohnHenckel 2010 or 2013? – Erin L Jun 21 '16 at 16:46
  • 1
    Updated my answer. – Daniel Stölzner Jun 21 '16 at 18:38
  • 1
    @DanielStölzner Thanks a ton! Update #2 i.e. using e.CloneNode(true) was the exact solution I was looking for! – Ransher Singh Sep 25 '17 at 21:08

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.