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

Advertisements
    • Long Tran
    • July 11th, 2012

    I can’t see the declaration of this listInfoArray instance???????

    • That’s a good question.

      I’m actually declaring them globally by using “this.” this allows me to access the variables in the onQuerySucceeded after retrieveAllListsAllFields has retrieved the data I need.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: