One struggle I always have working with Document Libraries is to retrieve the custom column values for each document. Let’s say we added a custom column called “Category” and now I want to read the value of that column for a document in the library.

In this article, we will use the help of Rest API and Jquery to retrieve the custom column value for a file in the document library and display using a content editor web part (you can use script editor web part).

Environment

• SharePoint Online/SharePoint 2013
• HTML
• Jquery
• Rest

Logic

We will use a rest API and jquery.

Rest API Web Service :currentsiteurl/_api/web/getfolderbyserverrelativeurl(‘documenturl’)?$expand=Files,Files/ListItemAllFields” 

Breaking the Rest URL

Currentsiteurl= The URL of the site

getfolderbyserverrelativeurl(‘libraryurl)= Rest API that will get the files and its metadata values from the document library. It takes the document library URL as its input not to be confused with the title. You can read more about the Rest API here

$expand=Files,Files/ListItemAllFields =This is the property which tells the request what to serve. The Files will get you all the files in the folder or library with it’s out of the box metadata columns. When we add Files/ListItemAllFields then it will get you all the custom column in that particular library with their values. This is what will deliver us our custom column values.

So we will use this web service call with rest and get the result in JSON and we will retrieve the required value from the JSON.

Process

• Create a document library in your SharePoint environment.
• add two custom columns
  • Position Title
  • Category(Choice Values= A,B,C,D)
• Upload a few files in the library as seen in the image below.

  

• Create an HTML file in a document library to input the code or you can directly put that code in a script editor web part too, which will also work fine.
• Write your code from the following section Code and JSON
  in the file and save it.
• Copy the link of the HTML file and save it for later use.
• Now create a SharePoint web part page.
• Edit the page and add a content editor web part (you can add a script editor here and directly past all the code here too) and in the text link section, put the link to HTML file.
• Save your web part and page.

Code and JSON

Here we will try to understand the code and JSON structure and focus and what we need and how we are getting it.

[code language=”javascript”]

$.ajax({
url: cur_url+”/_api/web/getfolderbyserverrelativeurl(‘CustomDocs’)?$expand=Files,Files/ListItemAllFields”,
type: “GET”,
headers: {
“Accept”: “application/json;odata=verbose”
},
success: function(data)
{
console.log(data);

var items= data.d.Files.results;

$.each(items,function(index, item)
{
$(‘#CustomDoc’).append(““+items[index].ListItemAllFields.Position_x0020_Title+”“+items[index].ListItemAllFields.Category+””+items[index].TimeLastModified+”

“);

});

}
});

});

[/code]

[code language=”html”]

Position Title	Category	Last Modified