SharePoint 2013 App Part and Modal Dialogs

Question

I've created a SHP 2013 Sharepoint-Hosted App on visual studio.

On my App.js that's created by default, i have the following lines to show a Modal Dialog

var options = { url: 'http://www.google.com', width: 400, height: 300 };
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

It works as intended, the little dialog is shown correctly.

After that, i've created a new Client Web Part (App Part) on visual studio, and on the aspx file for my app part i have the same JS lines

<script type="text/javascript">
    var options = { url: 'http://www.google.com', width: 400, height: 300 };
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
</script>

But this time it returns an error saying the reference to the property 'execute' is null or undefined.

Is it possible to invoke a modal window from within a App Part? What changes from invoking it from the Default page of my app?

Thanks in advance.

ggobbe · Accepted Answer · 2013-06-13T10:42:18.773

3

you should include Microsoft SP JavaScript API in order to use SP.SOD.

<script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

And also check in you Default.aspx page if there is code that you have not included in your App Part page.

edit : If you want to access objets and function of the page containing the iFrame, you can type parent. before your call. e.g. parent.SP.SOD.execute('...'); I hope this will work.

edited Jun 13 '13 at 10:42

answered Jun 11 '13 at 16:42

ggobbe

448
2
8
16

Hey, thanks for the suggestion, but i've included all those files.
"../Scripts/jquery-2.0.1.min.js" "http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" "/_layouts/15/SP.RequestExecutor.js" "/_layouts/15/SP.Runtime.js" "/_layouts/15/SP.js"

For what i've read on MSDN, app parts can't have any control over the parent window, like opening a modal dialog.

:(
– C. Hoffmann Jun 11 '13 at 20:28
If you want to access the parent objects and functions, you can type parent. before your call. e.g. parent.SP.SOD.execute('...'); I hope this will work. – ggobbe Jun 13 '13 at 10:39
This doesn't work. You get access denied (understandably) when trying to call parent.SP.SOD.execute(...). The proper way to launch a modal dialog appears to be by registering an event listener per the answer in this question: http://sharepoint.stackexchange.com/questions/143359/open-modal-dialog-from-webpart-in-the-parent-page – Sean Jan 20 '16 at 20:10

score 1 · Answer 2 · edited Apr 21 '15 at 14:16

I am not sure the above accepted solution works but the working solution is below.

First we need to add the below script tags in the apppart page.

<SharePoint:ScriptLink ID="ScriptLink1" Name="init.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink2" Name="sp.init.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink3" Name="sp.runtime.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink4" Name="sp.core.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink5" Name="sp.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink7" Name="sp.ui.dialog.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false" />

Then in the app.js or any script file where your code exists, we need to call the functions as below.

$.getScript(scriptbase + 'SP.Runtime.js', function() {
    $.getScript(scriptbase + 'SP.js', function() {
        $.getScript(scriptbase + 'SP.RequestExecutor.js', function() {
            popup();
        });
    });
});

function popup()
{
    var url = "http:\\www.google.com";
    var options = SP.UI.$create_DialogOptions();
    options.title = "Google";
    options.width = 800;
    options.height = 600;
    options.url = url;
    options.dialogReturnValueCallback = CloseDialogCallback;
    SP.SOD.execute('sp.ui.dialog.js','SP.UI.ModalDialog.showModalDialog',options);
}

function CloseDialogCallback() {
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.commonModalDialogClose', 1); 
}

The above execution worked for me.

SharePoint 2013 App Part and Modal Dialogs

2 Answers2

Linked