I wanted to display records from announcement list in specific way(without custom code) using script editor web part(javascript). Below is the code for script editor and js file:
HTML
<html><body><div id="LatestNews" style="width: 100%; line-height: 1px"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script><script src="/sites/cs_Jayat_Test/Style%20Library/LatestNews.js"></script><b><h4><a href="https://abc.sharepoint.com/sites/cs_Jayat_Test/Lists/NewsTest/TopNews.aspx" >Go to All News</a></h4></font></b></body></html>
JS
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
retrieveListItems()
});
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('NewsTest');
var dateNow = Date.now();
var camlQuery = new SP.CamlQuery();
var query;
query = "<View>"+"<Query>"+"<Where>"+"<Or>"+"<Geq><FieldRef Name='Expires'/><Value IncludeTimeValue='TRUE' Type='DateTime'><Today /></Value></Geq>"+"<IsNull><FieldRef Name='Expires' /></IsNull>"+"</Or>"+"</Where>"+"<OrderBy><FieldRef Name='Modified' Ascending='False'></FieldRef></OrderBy>"+"<ViewFields><FieldRef Name='Body'/></ViewFields>"+"</Query>"+"</View>";
camlQuery.set_viewXml(query);
this.collListItems = oList.getItems(camlQuery);
clientContext.load(collListItems);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItems.getEnumerator();
var count=0;
var myTable = "<table width=100%>";
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
//to do bind
listItemInfo += oListItem.get_item('Body') +
'\n' + moment(oListItem.get_item('Modified')).format('DD-MM-YYYY HH:MM:SS');
myTable += "<tr><td><br/></td></tr>";
myTable += "<tr><td><br/></td></tr>";
myTable += "<tr><td width=60%><font color=#000000><b>"+ oListItem.get_item('Title')+"</b></font></td></tr>";
myTable += "<tr><td><br/></td></tr>";
myTable += "<tr><td><br/></td></tr>";
myTable += "<tr><td><br/></td></tr>";
myTable += "<tr><td><br/></td></tr>";
myTable += "<tr><td width=60%><font color=#000000>"+ moment(oListItem.get_item('Modified')).format('DD.MM.YYYY')+"</font></td></tr>";
myTable += "<tr><td><br/></td></tr>";
myTable += "<tr><td width=60%><font color=#000000>"+ oListItem.get_item('Body')+"</font></td></tr>";
myTable += "<tr><td><hr style=height:0.3px;border-width:0;color:gray;background-color:gray></hr></td></tr>";
myTable += "<tr><td><br/></td></tr>";
count=count +1;
if(count==4)
{
break;
}
}
myTable += "</table>";
$('#LatestNews').html(myTable);
}
function onQueryFailed(sender, args) {
console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}