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.

Answer 1

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.

Answer 2

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.