Passing Values from a List Custom Action to Server Code

In my previous post I showed how to create a custom action for a specific list with code. Usually when I need to create a custom button on a list I also need to do some processing of the selected item(s) on the server. To that end, I’ve developed a reusable pattern that is the subject of this post.

Enabling and Disabling the Ribbon Button

The code in the previous post shows the EnabledScript attribute of the CommandUIHandler element.

This attribute takes a JavaScript function. If the function returns true, SharePoint enables the button. The script for this is simple:

function EnableDoAction() {
    var ctx = SP.ClientContext.get_current();
    //Enable the button if list items are selected
    return (SP.ListOperation.Selection.getSelectedItems(ctx).length > 0);
}

Passing Values from the Parent Form to the Dialog

The ribbon button executes another JavaScript function on click. This function opens a confirmation page using the dialog framework and passes the current list ID and the selected items via the SP dialog options as so:

function DoAction() {
    //Get the List ID and the selected items
    var ctx = SP.ClientContext.get_current();
    this.web = ctx.get_web();
    var listId = SP.ListOperation.Selection.getSelectedList();
    var items = SP.ListOperation.Selection.getSelectedItems(ctx);

    //Store the id and items in a variable
    var args = {
        listId: listId,
        items: items
    };

    //Open the confirmation dialog
    var options = {
        url: '/_layouts/MySolution/MyConfirmationPage.aspx',
        title: 'Confirm Action',
        allowMaximize: false,
        showClose: true,
        width: 400,
        args: args
    };
    SP.UI.ModalDialog.showModalDialog(options);
}

Passing Values from the Dialog to the Server

The trick is passing arguments from the parent to the dialog and from the dialog to the server. I like to use JSON serialization for this via a two step process. First I need to use script on the dialog to get the args and populate a hidden input field with a JSON representation.

<input id="args" type="hidden" runat="server" />
<script type='text/javascript'>
    //Populate input field
    childDialog = window.top.g_childDialog;
    args = childDialog.get_args();
    var input = document.getElementById('<%= args.ClientID %>');
    input.value = JSON.stringify(args);
</script>

(Most current browsers support JSON natively, for older browsers like IE7 include json2.js from http://www.json.org)

On the server side, deserialize the JSON into a class as follows.

//JSON Deserialization classes for args
public class Args
{
    public string ListId { get; set; }
    public List<Item> Items { get; set; }
}

public class Item
{
    public int Id { get; set; }
}

			

Use the following code in the appropriate event handler in your page or control to turn the JSON contained in the hidden input field into a .NET objects and then use the information to do whatever you require to the selected list items or documents.

//Deserialization code
var js = new JavaScriptSerializer();
string json = args.Value;
var SelectedValues = js.Deserialize<Args>(json);
			

Author: Doug Ware