Archive for the ‘ ECMA Script ’ Category

SharePoint 2010 Client Object Model – ECMA Script Get List Fields

I was working on a project that required me to dynamically build a grid based on a SharePoint list using client side JavaScript and naturally, I needed a way of retrieving the fields (columns) of the list. Some research revealed the best way to do this use the SharePoint client object model.

Before we write any code lets make sure that everything we’ll need is ready when our code executes. So, lets wait for the sp.js script to load before we execute our function. We can do that with this snippet of code:

function getFields() {
 // waiting until the core.js is loaded
 ExecuteOrDelayUntilScriptLoaded(retrieveAllFields, 'sp.js');
 }

Now that we’re sure our code will work, lets write it. First, we’ll need to build the client context query in our retrieveAllFields function.

function retrieveAllListsAllFields() {
 // Getting List Title
 var listTitle = 'TestList';
// Building environment
 var clientContext = new SP.ClientContext.get_current();
 var oWebsite = clientContext.get_web();
// Getting all Fields in default view
 this.list = oWebsite.get_lists().getByTitle(listTitle);
 var defaulViewGUID = '{YOUR GUID}';
 var defaultview = list.getView(defaulViewGUID); // Default GUID
 this.listFields = defaultview.get_viewFields();
 clientContext.load(this.list);
 clientContext.load(this.listFields);
// Getting Detailed Information on the Fields
 var collList = oWebsite.get_lists();
 this.listInfoArray = clientContext.loadQuery(collList,
 'Include(Title,Fields.Include(Title,InternalName,FieldTypeKind))');
// Executing Query
 clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
 Function.createDelegate(this, this.onQueryFailed));
 }

Now that we have our query ready to go. Let’s create our logic to process our list fields.

function onQuerySucceeded() {
// Setting Site URL
 $("#jqListURL").val(_spPageContextInfo.webServerRelativeUrl);
for (var i = 0; i < this.listInfoArray.length; i++) {
 var oList = this.listInfoArray[i];
 var collField = oList.get_fields(); // Getting All Fields From the List
 var listTitle = oList.get_title()
 if (listTitle == this.list.get_title()) {
 var fieldEnumerator = collField.getEnumerator();
 var textInfo = "";
 // Looping through all fields 
   while (fieldEnumerator.moveNext()) {
     var oField = fieldEnumerator.get_current();
     var internalName = oField.get_internalName();

 // Checking to see if the field is in the current view
     var viewFieldEnumerator = listFields.getEnumerator();
     while (viewFieldEnumerator.moveNext()) {
       var currentFieldTitle = viewFieldEnumerator.get_current(); // Getting Title
 var itemTitle = oField.get_title();
       var type = oField.get_fieldTypeKind();
       textInfo = listTitle + " - " + currentFieldTitle + " " + itemTitle + " " + type + " " + internalName;
     }
   }
 // Adding Info
   $(".testDIV").append(textInfo);
  }
}

And you’re done! You’ll notice that my code gets the fields in the current view and compares them to the fields returned in the list query. ¬†This way, you’re not getting back every single field in the list schema (including the ugly hidden ones).

As always, if you spot and error or have a suggestion for an improvement let me know and I’ll update my post.

-Max