none
How to open SharePoint hosted app in modal dialog? RRS feed

  • Question

  • Hello Team,

    We have requirement to open sharepoint hosted app in modal dialog using custom action.

    Could you please help with this requirement.

    Code snippets will be useful.

    Thanks.


    VINAYAK BHANGALE

    Tuesday, September 11, 2018 6:48 AM

All replies

  • Hi,

    Add below tag under <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> in your hosted add-in .aspx page.

    <WebPartPages:AllowFraming runat="server" />

    Then, you can show the add-in page in modal dialog.

     <script type="text/javascript">
            function openDialog() {
                var options = {
                    //add isdlg=1 to ignore ribbon
                    url: "http://add-in-fd360d24349d7b.contosoaddins.com:12001/SPHostTest/Pages/Default.aspx",
                    title: "add-in",
                    allowMaximize: false,
                    showClose: true,
                    width: 900,
                    height: 800
                };
    
                SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
            }
        </script>
        <input id="Button1" onclick="openDialog()" type="button" value="button" />

    While add-in URL would change, I would suggest you develop add-in part and insert the add-in part to a SharePoint page, then display the page in modal dialog.

    http://mundrisoft.com/tech-bytes/what-is-the-host-web-url-and-app-web-url-in-sharepoint-add-in/

    https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/create-add-in-parts-to-install-with-your-sharepoint-add-in

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Wednesday, September 12, 2018 2:23 AM
  • Hi,

    Would you please provide us with an update on the status of your issue?

    Thanks,

    Wendy


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Friday, September 21, 2018 3:05 AM
    Moderator