SPO Announcements knockoutjs sort observable array.

I am trying to show new announcements on top & drop off expired announcements from UI using knockoutjs. Being a newbie to knockout, i'm stuck here and unable to move further. here's a piece of code which needs some correction. Appreciate any pointers to resolve this issue. and on the UI, I am using data bind="foreach: items, as: 'item'" to ul element.

function ItemViewModel(params)
{
this.text = ko.observable(params.title);
//this.id = ko.observable(params.id);
this.link = ko.observable(params.path);
this.cssClass = ko.observable("");
}
function viewModel(params)
{
var self = this;
this.isLoading = ko.observable(true).extend({ throttle: 250 });
this.studio = ko.observable(params.studio || "");
this.maxItems = ko.observable(params.maxItems || 8);
this.items = ko.observableArray([]);
this.dialogId = ko.observable('AnnouncementsModal');
this.addItem = function (item, e)
{
navigationService.navigateTo('/Announcements/NewForm.aspx', true);
e.preventDefault(); };
this.canAddItem = ko.computed(function()
{
var isLeader = contextService.isLeader();
var isContributor = contextService.isContributor();
return isLeader || isContributor; }, this);
this.hasNoItems = ko.computed(function()
{
var items = self.items();
return items.length === 0;
}, this).extend({ throttle: 250 });
this.searchTerm = ko.computed(function ()
{
var studio = contextService.studio();
if (studio)
{
return studio;
}
return self.studio();
});
ko.computed(function ()
{
var maxItems = self.maxItems();
var term = self.searchTerm();
if (term == null || term === "")
return null;
self.isLoading(true);
console.log('announcements-webpart/vm.js: data-service load...');
dataService.studios.announcements(term, maxItems) .done(function (result)
{
console.log('announcements-webpart/vm.js: data-service load completed.');
self.isLoading(false);
self.items.removeAll();
if (result.items)
{
for (var i = 0; i < result.items.length; i++)
{
if (i >= maxItems) return;
var item = new ItemViewModel(result.items[i]);
self.items.push(item);
}
}
}); return null;
}, this).extend({ deferred: true });
}
viewModel.prototype.dispose = function () { };
return viewModel; })();

Hi,

If you're requirement is to only show the latest announcments and exclude the expired announcements, then below code is enough. This uses SharePoint Rest API and you can sort by created date and filter by the expire date while calling the REST API. See if this serves your purpose.

"text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js">
"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
"javascript">
function announcementsViewModel() {
var self = this;
self.announcements = ko.observableArray();
$.ajax({
url: "/_api/web/lists/getbytitle('Announcements')/Items?$filter=Expires%20ge%20%272017-10-11%27&$orderby=Created%20desc",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
self.announcements(data.d.results);
},
error: function (data) {
alert(data.error);
}
});
}
$(document).ready(function () {
ko.applyBindings(new announcementsViewModel());
});

<div>
<div class="panel panel-default">
<div class="panel-heading" style="color: rgb(172, 26, 47);"><span class="glyphicon glyphicon-link">span> Announcementsdiv>
<div class="panel-body">
<div data-bind="foreach: announcements">
<div style="padding:3px !important">
<span class="glyphicon glyphicon-link" style="color: rgb(172, 26, 47);">span> <span data-bind="text: Title">span><br />
<div data-bind="text: Body">div>
div>
div>
div>
div>
div>

Just add this javascript and HTML code into an HTML file. Save the file in any page or document library. Add a content editor web part to SharePoint page and then refer that web part to this HTML file. This should show you announcments sorted by Created date and filtered by expired date.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Shyam Sundar9y ago
Hi,

If you're requirement is to only show the latest announcments and exclude the expired announcements, then below code is enough. This uses SharePoint Rest API and you can sort by created date and filter by the expire date while calling the REST API. See if this serves your purpose.
"text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js">
"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
"javascript">
function announcementsViewModel() {
var self = this;
self.announcements = ko.observableArray();
$.ajax({
url: "/_api/web/lists/getbytitle('Announcements')/Items?$filter=Expires%20ge%20%272017-10-11%27&$orderby=Created%20desc",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
self.announcements(data.d.results);
},
error: function (data) {

alert(data.error);
}
});
}

$(document).ready(function () {
ko.applyBindings(new announcementsViewModel());
});




<div>
<div class="panel panel-default">
<div class="panel-heading" style="color: rgb(172, 26, 47);"><span class="glyphicon glyphicon-link">span> Announcementsdiv>
<div class="panel-body">
<div data-bind="foreach: announcements">
<div style="padding:3px !important">
<span class="glyphicon glyphicon-link" style="color: rgb(172, 26, 47);">span> <span data-bind="text: Title">span><br />
<div data-bind="text: Body">div>
div>
div>
div>
div>
div>
Just add this javascript and HTML code into an HTML file. Save the file in any page or document library. Add a content editor web part to SharePoint page and then refer that web part to this HTML file. This should show you announcments sorted by Created date and filtered by expired date.