6

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?

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

1 Answer 1

Reset to default
14

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.

Improve this answer
8
  • 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
    Commented Jun 21, 2016 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
    Commented Jun 21, 2016 at 16:28
  • @JohnHenckel 2010 or 2013?
    – Erin L
    Commented Jun 21, 2016 at 16:46
  • 1
    Updated my answer.
    – Daniel Stölzner
    Commented Jun 21, 2016 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
    Commented Sep 25, 2017 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.