SharePoint Blogs: October 2015

Hi Folks,

I contributed to a reusable component for my team's contribution project. Using ecma script, we are fetching data from SharePoint list and displaying it to Script editor web part. We did some sorting/filtering using Caml query.

List Settings:

Output:

FooterTest.aspx

more > is navigating to NavigatePage.aspx.
NavigatePage.aspx

Common CSS Used for "FooterTest.aspx" and "NavigatePage.aspx":

<style>

.outerDiv

{

width:1100px;

margin-top:10px;

border-top:1px solid #ccc;

padding:10px 0 0;

clear:both;

}

.col {

float: left;

padding: 30px 0 0 35px;

width: 310px;

}

.col li{

text-decoration:none;

}

.col ul

{

float:left;

list-style: none;

margin: 0;

padding: 0;

border-top:1px solid #0B0719;

}

.col li

{

border-bottom: 1px dotted #BDBDBD;

float: left;

height: 35px;

margin: 3px 0;

padding: 0;

width: 310px;

}

.col li:last-child

{

border:none;

}

.col li a

{

color: black;

display: block;

float: left;

font: normal 12px Arial;

padding: 10px 0 0 19px;

text-decoration: none;

}

</style>

Ecma Script Used for "FooterTest.aspx"

1 <script type="text/javascript" src="../../SiteAssets/jquery-1.11.1.js"></script>

var clientContext;

var website;

var list;

var items;

var html = '<div class="col"><ul>';

var index = 0;

var lIndex = 0;

// Make sure the SharePoint script file 'sp.js' is loaded before your

// code runs.

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);

// Create an instance of the current context.

function sharePointReady() {

clientContext = SP.ClientContext.get_current();

website = clientContext.get_web();

list = website.get_lists().getByTitle('TestFooter');

var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml('<View><Query><Where><And><Eq><FieldRef Name=\'IsActive\'/>' +

'<Value Type=\'Boolean\'>1</Value></Eq><IsNotNull><FieldRef Name=\'Url\'/></IsNotNull></And></Where><OrderBy><FieldRef Name=\'DisplayOrder\' Ascending=\'TRUE\' /></OrderBy></Query></View>');

items = list.getItems(camlQuery);

clientContext.load(items);

clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);

}

function onRequestSucceeded() {

var itemCount = items.get_count();

console.log(itemCount);

var enumerator = items.getEnumerator();

while (enumerator.moveNext()) {

var listItem = enumerator.get_current();

var rotatorTitle = listItem.get_item('Title');

var rotatorUrl = listItem.get_item("Url");

var rotatorIsActive = listItem.get_item('IsActive');

GetData(rotatorTitle, rotatorUrl);

}

$("#siteOwner").append(html);

}

function onRequestFailed(sender, args) {

alert('Error: ' + args.get_message());

}

function GetData(rotatorTitle, rotatorUrl) {

if (lIndex < 16) {

if (index <= 4) {

html += "<li><a href=" + rotatorUrl + ">" + rotatorTitle + "</a></li>";

index++;

lIndex++;

}

else if (lIndex == 15) {

html += '<li><a href="https://accobrands.sharepoint.com/ITCompliance/Pages/NavigatePage.aspx"> more > </a></li></ul></div>';

lIndex++;

}

else {

index = 0;

html += '<li><a href=' + rotatorUrl + '>' + rotatorTitle + '</a></li></ul></div><div class="col"><ul>';

}

else {

//No action needed

}

</script>

</div>

Ecma Script Used for "NavigatePage.aspx"

var clientContext;

var website;

var list;

var items;

var html = '<div class="col"><ul>';

var index = 0;

var lIndex = 0;

var mIndex = 0;

// Make sure the SharePoint script file 'sp.js' is loaded before your

// code runs.

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);

// Create an instance of the current context.

function sharePointReady() {

clientContext = SP.ClientContext.get_current();

website = clientContext.get_web();

list = website.get_lists().getByTitle('TestFooter');

var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml('<View><Query><Where><And><Eq><FieldRef Name=\'IsActive\'/>' +

'<Value Type=\'Boolean\'>1</Value></Eq><IsNotNull><FieldRef Name=\'Url\'/></IsNotNull></And></Where><OrderBy><FieldRef Name=\'DisplayOrder\' Ascending=\'TRUE\' /></OrderBy></Query></View>');

items = list.getItems(camlQuery);

clientContext.load(items);

//clientContext.load(website);

clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);

}

function onRequestSucceeded() {

var itemCount = items.get_count();

console.log(itemCount);

mIndex = itemCount - 4;

var enumerator = items.getEnumerator();

while (enumerator.moveNext()) {

var listItem = enumerator.get_current();

var rotatorTitle = listItem.get_item('Title');

var rotatorUrl = listItem.get_item("Url");

var rotatorIsActive = listItem.get_item('IsActive');

GetData(rotatorTitle, rotatorUrl);

}

$("#siteOwner").append(html);

//alert(website.get_url());

}

function onRequestFailed(sender, args) {

alert('Error: ' + args.get_message());

}

function GetData(rotatorTitle, rotatorUrl) {

if (index <= 4) {

html += "<li><a href=" + rotatorUrl + ">" + rotatorTitle + "</a></li>";

index++;

lIndex++;

}

else if (lIndex == mIndex) {

html += '<li><a href=' + rotatorUrl + '>' + rotatorTitle + '</a></li></ul></div>';

}

else {

index = 0;

html += '<li><a href=' + rotatorUrl + '>' + rotatorTitle + '</a></li></ul></div><div class="col"><ul>';

}

</script>

</div>

Hi folks,

I did a small POC in my project to fetch data using REST API and feed the results into jQuery data tables. Using this we can apply sorting, paging, filtering to the results received.
Please check the code below.

<script type="text/javascript" charset="utf8" src="../SiteAssets/Scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

Job Status: <input type="text" id="Status">

<input type="button" value="Get Records" onclick="LoadRecords($('#Status').val());" >

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<th>Job Name</th>
<th>Job Status</th>
<th>Source</th>
<th>Client Number</th>
</thead>
</table>

<script type="text/javascript">
console.log(_spPageContextInfo.webAbsoluteUrl);
function LoadRecords(state)
{
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('SAP Batch Jobs')/items?$select=Job_x0020_Name,Title,Source,Client_x0020_Number&$filter=(Title eq '"+state+"')&$top=5000",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){

$('#example').dataTable({
"bDestroy": true,
"bProcessing": true,
"aaData": data.d.results,
"aoColumns": [
{ "mData": "Job_x0020_Name" },
{ "mData": "Title" },
{ "mData": "Source" },
{ "mData": "Client_x0020_Number" }
]
});

});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);
});
}
</script>

For complete details of jQuery plugin, please check the below link
http://summit7systems.com/who-needs-a-data-view-web-part-sharepoint-rest-and-datatables-net/

SharePoint Blogs

Wednesday, October 14, 2015

SharePoint Blogs: Display list data in jQuery tables without using D...

Monday, October 12, 2015

Footer links web part

Display list data in jQuery tables without using Data View web part