Thursday, August 15, 2013

SharePoint 2010 and Javascript: Coding a Popup Modal Dialog

Ever wondered how to embed a popup modal dialog in SharePoint? Here's the javascript needed to do the trick:
// Here I am passing the current list ID and list item ID as a querystring parameter to an aspx page to perform some functions

function CustomOpenDialog(listid, listitemid) {
    var options = SP.UI.$create_DialogOptions();
    var url = SP.ClientContext.get_current().get_url();
    options.url = url + '/SitePages/MyTestPage.aspx?listid=' + listid + "&listitemid=" + listitemid;
    options.width = 500;
    options.height = 400;
    options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
    SP.UI.ModalDialog.showModalDialog(options);
}

var messageId;


function CloseCallback(result, target) {
    if (result === SP.UI.DialogResult.OK) {
        if (target != 'bye') {
            //Get id
            messageId = SP.UI.Notify.addNotification('<img src="_layouts/images/loading.gif">Loading... <b>' + target + '</b>...', true, 'Dialog Response', null);
            //do someother work here.
        }
        else //target=='bye'
        {
            SP.UI.Notify.removeNotification(messageId); //simple way to remove it.
            return;
        }
    }
    if (result === SP.UI.DialogResult.cancel) {
        SP.UI.Notify.addNotification('Operation was cancelled...', false, '', null);
    }
}

This is by no means a complete solution. Most of the time, you will find yourself working with either SharePoint Designer or Visual Studio to provide a more comprehensive solution.

Happy Sharing the Point!
Related Posts Plugin for WordPress, Blogger...