Nintex Forms - Refreshing the List View Web Part Programmatically / Modal Dialogs

14 June 2012

With the latest release of Nintex Forms, editors now get the ability to include a List View Web Part as part of their forms. I went a little bit crazy / overboard with this, and ended up with a form where there was a list view web part as well as a button that opened the New Item form for the specific list in a dialog, and refreshed the list view web part once the user had finished creating the new item. This post is a little Javascript heavy, so you've been warned!

So the first step is to do the launching dialog - we can do this with the provided SharePoint javascript libraries, specifically the SP.UI.ModalDialog.showModalDialog() call. In the custom Javascript includes for the Nintex form itself, I'm setting up a Javascript method that will handle this for us:

function showDialog(url) {
    var options = {};
    options.title = "New Item";    //Modal Dialog title
    options.url = url;
    options.dialogReturnValueCallback = 
        function(dialogResult, returnValue) {
            if(dialogResult) {     //If the user completed the action instead of cancelling
                //reload LVWP
var ListViewWPClientID = NWF$('div.ListViewWebPart a[FilterString]:first').attr('FilterString');
ListViewWPClientID = ListViewWPClientID.substring(ServiceWPClientID.lastIndexOf(' '));
                __doPostBack(ListViewWPClientID,'cancel');
            }
        };
    SP.UI.ModalDialog.showModalDialog(options);
}

Then, we can call this method from a Nintex Form button - note the URL I've provided to the new item has IsDlg=1, which tells SharePoint dialog-style chrome (ie lose some of the masterpage visual elements):

showDialog('http://mysite/Lists/MyList/NewForm.aspx?ContentTypeID=0x010092CF529933C7AD41AE4F78A7EE7FCBB101000CAFF76BD66CA24EABEDE5656E1B85C8&IsDlg=1')

Easy, right? One more thing with the showDialog method I wrote above is that you'll need to add the class "ListViewWebPart" to your List View Web Part (mainly because Nintex Forms doesn't allow you to store the ClientID in a Javascript variable as with some of their other controls) so you can target and find the ID to call the postback with __doPostBack(), refreshing the List View Web Part.

It seems relatively stable, so give it a go :) I've only noticed one weird issue in that if you delete an item with the List View Web Part from the ECB, it redirects you to the actual List View, not back to the Nintex Form, but I'm not entirely sure if that's related to anything I've been setting up in this post.

Tags: ListViewWebPart, modal dialog, Nintex, Nintex Forms

Add a Comment

No Comments