Get Items From Multiple Line Of Text Column Using CAML Query With SharePoint Rest API - Life Saver

Ramakrishnan R
3y
20.4k
0
8

Article

Hey there, in this article we will learn about the CAML query to get items from SharePoint List.

Note

When I was stuck up at getting items by filtering multiple line of text column CAML query saved my time, as the title says ;)

Introduction

CAML Query SharePoint – CAML stands for Collaborative Application Markup Language. It is an XML-based language that is used in SharePoint.

A REST request with a CAML query is usually a POST request
A REST request with a CAML query has always to possess an X-RequestDigest HTTP header and should have the attached CAML query within the request body (and not during a query string).

In this article:

We will load HTML fields and buttons dynamically using REST API GET method and on-button click to get list items by filtering multiple line of text column using CAML Query with REST API in 3 simple steps.

Prerequisites

SharePoint List with columns
Add HTML & JS to SiteAssets
Get the code files from my Github

Screenshot

What we will see in this article,

Figure 1

Figure 2., Click on the button

Figure 3

Code Details

STEP 1 - HTML

Refer the js files to the HTML

<!DOCTYPE html>
<html>
<head>
<title>CAML Query</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="Title">
</div>
</body>
<script type="text/javascript" src="../SiteAssets/CAMLQuery.js"></script>
//This way your scripts get fired only after the DOM containing your id element is already loaded.
</html>

STEP 2 - JS

On page load, the getItems() function will be called and the HTML structure is loaded dynamically based on the list items!!

getItems();
function getItems() {
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('CAMLQuery')/items?";
$.ajax({
url: requestUri,
type: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
async: false,
success: function(data) {
var items = data.d.results;
var htmlVal = '';
for (var i = 0; i < items.length; i++) {
htmlVal += items[i].Title + "<br/><br/> :" + items[i].Description + ' <br/><br/><button type="button" onclick="getUsingCAML(\'' + items[i].ID + '\',\'' + items[i].Description + '\')">Click Me!</button> <br/><br/><h3 id="' + items[i].ID + '"></h3> '; //ID sets as dynamic value
}
document.getElementById("Title").innerHTML = htmlVal;
},
error: function(error) {
console.log("getItems :: " + error);
}
});
}

STEP 3

On button click, we have passed the id and the MLT column value of the particular ID to filter and get items using CAML Query.

NOTE

There are FREE tools available in the market to generate CAML query code download and install using the below links,

U2U - CAML Query builder - U2U - Official blog - https://blogs.u2u.be/u2u/post/U2U-Caml-Query-Builder-(Windows-version)-new-version
Saketa - SAKETA

CAML Query code for our demo app,

<View>
<Query>
<Where>
<Eq>
<FieldRef Name='ColumnName' />" + "
<Value Type='Note'>" + ColumnSearchValue + "</Value> //Type Note specifies MLT Column
</Eq>
</Where>
</Query>
</View>

Now, CAML Query is passed with the MLT search value the REST AJAX returns the value,

function getUsingCAML(ID, Description) {
var caml = "<View><Query><Where><Eq><FieldRef Name='Description' />" + "<Value Type='Note'>" + Description + "</Value></Eq></Where></Query></View>";
var endpoint = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('CAMLQuery')/GetItems";
var requestData = {
"query": {
"__metadata": {
"type": "SP.CamlQuery"
},
"ViewXml": caml
}
};
return jQuery.ajax({
url: endpoint,
method: "POST",
data: JSON.stringify(requestData),
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
'content-type': 'application/json;odata=verbose',
'accept': 'application/json;odata=verbose'
},
async: false,
success: function(data) {
var items = data.d.results[0];
document.getElementById(ID).innerHTML = "Syntax: <br/>" + items.Syntax; //Binds the value
},
error: function(error) {
console.log(JSON.stringify(error));
}
});
}