Using SharePoint REST API for choice columns in SharePoint Online

 

Introduction

As you know currently JavaScript is the de facto programming language in Microsoft SharePoint. In this post I want to show you how to work with SharePoint choice fields while working with the SharePoint REST API model.

As you know, SharePoint choice columns are widely used in SharePoint list and libraries and there are a couple of caveats that you should have in your mind while developing the REST API SharePoint codes and using SharePoint choice columns.

This is an easy example intended for SharePoint developers who wants to use REST API.

Output:

Whenever an option will be selected, the associated record of the president will be shown as below:

List Schema: List has presidents record as shown below:

President is a choice field which has list of all the U.S. presidents. Image is an image field having president photo and remaining fields are text type. A sample record looks like below:

Code:

  1. Upload jQuery file to site assets library
  2. Add below HTML content for appropriate placeholders:

<div class="spjMainDiv">
<div class="spjChoice">
<div>Filter By Presidents</div>
<hr style="boder-bottom:2px solid #00c4cc !important; " />
<div class="spjChoicePlaceholder"></div>
</div>
<div class="spjContent">
<h1 class="presidentName"></h1>
<img class="presidentSrc" src="" />
<div>
<div class="spjContentNumberLabel">Number</div>
<div class="spjContentNumberValue"></div>
</div>
<hr />
<div>
<div class="spjContentPaaffLabel">Party Affiliation</div>
<div class="spjContentPaaffValue"></div>
</div>
<hr />
<div>
<div class="spjContentVPLabel">Vice President</div>
<div class="spjContentVPValue"></div>
</div>
<hr />
<div>
<div class="spjContentYIOLabel">Years in Office</div>
<div class="spjContentYIOValue"> 2009 - 7 years 2 months</div>
</div>
<hr />

</div>
<div class="NoData"></div>
</div>

 

Add below style to the page:

<style>
.spjMainDiv
{
border: 2px solid #00c4cc;
display:block;
width:100%;
}

.spjChoice
{
display: inline-block;
width: 20%;
padding:10px;
}

.spjContent
{
display: inline-block;
width: 70%;
vertical-align: top;
padding: 20px;
}

.spjContent h1, .NoData
{
display: inline-block;
width: 30%;
vertical-align: top;
}

.spjContent img
{
display: inline-block;
vertical-align: top;
}

.spjContentNumberLabel, .spjContentPaaffLabel, .spjContentVPLabel, .spjContentYIOLabel
{
display: inline-block;
width: 35%;
font-weight: bold;
}

.spjContentNumberValue, .spjContentPaaffValue, .spjContentVPValue, .spjContentYIOValue
{
display: inline-block;
width: 35%;
}

</style>

 

Add below script to get data of selected president:

  • Initially it will fill list of all the presidents to vertical check boxes
  • On selection of any radio value it will call list entity and bring respective data in JSON

<script>
$(document).ready(function(){
$('.spjContent').hide();
getChoiceControls();
});

function getPresidentsData(president)
{
$.ajax({
url: appWebUrl +"_api/web/lists/GetByTitle('FilterControls')/items?$select=ID,Title,President,Number,Party_x0020_Affiliation,Vice_x0020_President,Years_x0020_in_x0020_Office,Image&$filter=(President eq '" + $(president).val() + "')",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {

if(data.d.results.length > 0)
{
$('.spjContent').show();
$('.NoData').hide();

$('.presidentName').text(data.d.results[0].President);
$('.presidentSrc').attr("src",data.d.results[0].Image.Url);
$('.spjContentNumberValue').text(data.d.results[0].Number);
$('.spjContentPaaffValue').text(data.d.results[0].Party_x0020_Affiliation);
$('.spjContentVPValue').text(data.d.results[0].Vice_x0020_President);
$('.spjContentYIOValue').text(data.d.results[0].Years_x0020_in_x0020_Office);
}
else
{
$('.spjContent').hide();
$('.NoData').show();
$('.NoData').html("<h1>Nothing to show :(</h1>");
}
},
error: function (error) {
console.log(JSON.stringify(error));
}

});

}

var appWebUrl = "https://sharepointjunkies.sharepoint.com/sites/demo/";
function getChoiceControls()
{
$.ajax({
url: appWebUrl +"_api/web/lists/GetByTitle('FilterControls')/fields/GetByTitle('President')",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
createStars(data.d.Choices.results);
},
error: function (error) {
console.log(JSON.stringify(error));
}

});

function createStars(data)
{
dLength = data.length;
if (dLength >= 0)
{
for (var i = 0; i < dLength; i++)
{
$('.spjChoicePlaceholder').append("<div><input class='uspresidents' onclick='getPresidentsData(this);' type='radio' name='presidents' value='"+data[i]+"' /><span>"+data[i]+"</span></div>");
//console.log(data[i]);
}
}
}
}
</script>

In this simple example, I developed a SharePoint page to show information from SharePoint list with REST API

Comments

Post a Comment