5

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.

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.

  • Hey, thanks for the suggestion, but i've included all those files. "../Scripts/jquery-2.0.1.min.js" "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: sharepoint.stackexchange.com/questions/143359/… – Sean Jan 20 '16 at 20:10
1

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.

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.