Put custom HTML string OR custom .aspx page url in SP modal dialog

Question

I want to put either custom HTML string OR custom .aspx page url in SP modal dialog

    function OpenCustomForm() {
        var options = SP.UI.$create_DialogOptions();
        options.url = "/sites/link/to/customPage.aspx";
        options.dialogReturnValueCallback = function(result) { 
            if (result === SP.UI.DialogResult.OK) {
                SP.UI.ModalDialog.RefreshPage(result);
            }
        };
        SP.UI.ModalDialog.showModalDialog(options);
    }

What are best practice between them?

Custom HTML - I know it does not accept HTML string. should be provide DOM elements
Custom .aspx page - when i am trying to open custom page in modal dialog, error occurs with message "Sorry something went wrong"

Siddharth Vaghasia · Accepted Answer · 2016-12-13 08:42:22Z

You should use 2nd option, display custom page.

Below are 2 options to open page in modal.

//Using the DialogOptions class.
var options = SP.UI.$create_DialogOptions();

options.title = "My Dialog Title";
options.width = 400;
options.height = 600;
options.url = "/_layouts/DialogPage.aspx";

SP.UI.ModalDialog.showModalDialog(options);

//Using a generic object.
var options = {
    title: "My Dialog Title",
    width: 400,
    height: 600,
    url: "/_layouts/DialogPage.aspx" };

SP.UI.ModalDialog.showModalDialog(options);

Below is what you can try to trouble shoot

Is your custom page working in separate windows. if you are seeing error in separate page, fix the error targeting that page.
Where exactly you are getting this error ? After model popup opens or before that ? Also try to show some default page on this modal dialog and see if is there any issue with options you are providing ?

Error message appears after modal pop-up opens inside it. Thanks btw i'll try your suggestions — wol
– wol, Commented Dec 13, 2016 at 10:02

Gintas K · Accepted Answer · 2016-12-13 08:39:11Z

0

You can open your custom html in a SP Dialog like this:

var html = "<div id='myHtml'>your html goes here</div>";
$('body').append(html);

SP.UI.ModalDialog.showModalDialog({
    html: document.getElementById('myHtml'),
    title: "YourDialogTitle",
    allowMaximize: false,
    showClose: true,
    autoSize: true
});

answered Dec 13, 2016 at 8:39

Gintas K

1,2375 gold badges19 silver badges36 bronze badges

Add a comment |

Stack Exchange Network

Put custom HTML string OR custom .aspx page url in SP modal dialog

2 Answers 2

Your Answer

Hot Network Questions

Put custom HTML string OR custom .aspx page url in SP modal dialog

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions