SharePoint 2010: Read & save metadata(properties) of a Document set via Content Editor Web Part (JSOM)

Context: The customer wants me to customize the welcome page of each document set in a document library and make some of the properties available on the welcome page. SharePoint allows its users to change the values of the properties by clicking the default ‘edit properties’ option but it was costing the customer one click. The solution I proposed is to make these properties available at the welcome page by adding a content editor webpart.

Solution: The following is the snapshot how the welcome page of each document set in a document library looks like after the adding content editor webpart on the welcome page.

So my content editor web part was referring the html file which is as follows;

    
 
    
 
 
    
    


  


            

                

                    MetaData Properties

        

            

                Name:
            
            

                
            
            

            
            

                Title
            
            

                
            
        

            

                Claim Number:
            
            

                
            
            

            
            

                Order Number
            
            

                
            
        

            

                Vendor Name:
            
            

                
            
            

            
            

                Vendor Company
            
            

                
            
        

            

                
            
        

I used ECMA script (Client object model for JavaScript) to read and write the properties of a document set. The following Ecma script, I wrote to fulfill the requirement;

$(document).ready(function () {
    // Wait until SP.JS has loaded before calling getDocSetData   
    ExecuteOrDelayUntilScriptLoaded(getDocSetData, "sp.js");

    $("#btnSave").bind("click", saveDocSetChanges);
});

var context = null;
var web = null;
var docSet = null;

function getDocSetData() {
    context = new SP.ClientContext.get_current();
    // Get the current web     
    web = context.get_web();

    // Get the ID from url
    JSRequest.EnsureSetup();
    var docsetid = JSRequest.QueryString["ID"];

    //Get the document library     
    docSet = web.get_lists().getByTitle("DocumentLibraryName").getItemById(docsetid);
    context.load(docSet);
    //Make a query call to execute the above statements     
    context.executeQueryAsync(OnGetPropertiesSucceeded, OnGetPropertiesFailed);
}

function OnGetPropertiesSucceeded() {
    $("#txtName").val(docSet.get_item('Title'));
    $("#txtTitle").val(docSet.get_item('FileLeafRef'));
    $("#txtClaimNumber").val(docSet.get_item("Claim_x0020_Number"));
    $("#txtOrderNumber").val(docSet.get_item("Order_x0020_Number"));
    $("#txtVendorName").val(docSet.get_item("Vendor_x0020_Name"));
    $("#txtVendorCompany").val(docSet.get_item("Vendor_x0020_Company"));
}

function saveDocSetChanges(){
    docSet.set_item("Title", $("#txtTitle").val());
    docSet.set_item("FileLeafRef", $("#txtName").val());
    docSet.set_item("Order_x0020_Number", $("#txtOrderNumber").val());
    docSet.set_item("Claim_x0020_Number", $("#txtClaimNumber").val());
    docSet.set_item("Vendor_x0020_Name", $("#txtVendorName").val());
    docSet.set_item("Vendor_x0020_Company", $("#txtVendorCompany").val());

    docSet.update();
    context.executeQueryAsync(OnUpdateChanges, OnUpdateChangesFailed);
}

function OnUpdateChanges(){
    alert("Metadata updated.");
}

// Error handler 
function OnGetPropertiesFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
} 

function OnUpdateChangesFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Note: It is not the actual solution but the foundation from where I started building the content editor web part. Do also attach your html into the Content editor webpart on the welcome page of a document set once you are ready to reference your html and javascript file.

I hope it would help someone.. J