This post on the KnockoutJs for SharePoint series explains formatting and binding options available in KoSpJs for SharePoint Date Field, Number Field, Currency and Percentage Fields while retrieved by oData queries for SharePoint REST API or by CAML queries with SPServices
Json representation of SharePoint Date Field values and Number Field values are completely different in REST API and CAML (converted to Json with the help of SPservices). In REST API dates are represented in epoch time, while in Lists.asmx it’s represented as plain text with date and time. This requires formatting of data in the client side and KoSPJs depends on momentjs to take care of the parsing of dates.
Numbers are appended with numerous zeros (“0”) after its decimal separator in both REST API calls and SPServices calls depending on the number format specified in the SharePoint field (like percentage, calculated filed etc..). This also requires formatting of data while binding it to client side controls. KoSpJs depends on numeral js to take care of number and currency formatting.
Other Articles on Knockout For SharePoint (KoSp) Series
Sl.No | Article |
1 | Introducing KoSpJs – Knockout binding handlers for SharePoint REST API and SPServices |
2 | Beginning SharePoint development with KoSpJs, REST API and SP Services |
3 | SharePoint Lookup fields, Choice Fields and it’s multi select variants in KoSpJs |
4 | Formatting Date, Number Fields in SharePoint REST API and SPServices with KoSpJs – This Article |
5 | Binding Hyperlink and Image URLs with KoSpJs in SharePoint REST API and SPServices |
6 | Retrieving and binding User and User Group Details in SharePoint REST API with KoSpJs |
Options Available in KoSpJs for spDate and spNumber binders (Applicable to SharePoint Date Fields and Number Fields)
Property | Applicable To | Example | Remarks |
src | spDate /spNumber | src:’sps’ | If data is retrieved via SPServices then its mandatory to set src to ‘sps’ |
defaultValue | spDate /spNumber | defaultValue:’N.A’ | Not mandatory. This value will be replaced for empty values returned for a column |
dataFormat | spDate /spNumber | displayFormat:’DD-MMM-YYYY, hh:mm:ss a’ | As KoSpJs depends on moment js and numeral js, all data formatting options applicable to these libraries can be passed as input parameter for this option |
KoSpJs binders for REST API
<script type="text/html" id="template1">
<tr>
<td data-bind="text:Title"></td>
<td data-bind="spDate:DateOfJoining,defaultValue:' - -'"></td>
<td data-bind="spNumber:RatePerHour,dataFormat:'$ 0.00',defaultValue:'$ 0.00'"></td>
<td data-bind="spNumber:MarkupPercentage,dataFormat:'0.00 %',defaultValue:'N.A'"></td>
<td data-bind="spNumber:RateForClient,dataFormat:'0.00'"></td>
<td data-bind="spNumber:HoursBilled"></td>
</tr>
</script>
KoSpJs binders for SP Services
<script type="text/html" id="template2">
<tr>
<td data-bind="text:Title"></td>
<td data-bind="spDate:DateOfJoining,src:'sps',defaultValue:' - -'"></td>
<td data-bind="spNumber:RatePerHour,src:'sps',dataFormat:'$ 0.00',defaultValue:'$ 0.00'"></td>
<td data-bind="spNumber:MarkupPercentage,src:'sps',dataFormat:'0.00 %',defaultValue:'N.A'"></td>
<td data-bind="spNumber:RateForClient,src:'sps',dataFormat:'0.00'"></td>
<td data-bind="spNumber:HoursBilled,src:'sps',dataFormat:'0.00'"></td>
</tr>
</script>
Binding SharePoint List data with default Knockout Js
Binding SharePoint List data with KoSpJs
The above bindings are based on a SharePoint List named as “Employees” with the below column structure
“All Items” View of Employee List
Full Source Code
<script type="text/javascript" src="js/pre/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/pre/knockout-3.0.0beta.js"></script>
<script type="text/javascript" src="js/ko.sp-1.0.min.Ex.js"></script>
<script type="text/javascript" src="js/sp/jquery.SPServices-0.7.2.min.js"></script>
<h1>KoSpJs binding based on REST API</h1>
<br />
<div id="restDiv">
<table width="750px">
<thead>
<tr>
<th>Employee Name</th>
<th>Date of Joining</th>
<th>Rate Per Hour</th>
<th>Markup Percentage</th>
<th>Rate For Client</th>
<th>Hours Billed</th>
</tr>
</thead>
<tbody data-bind="template: { name: 'template1', foreach: Items }" />
</table>
</div>
<script type="text/html" id="template1">
<tr>
<td data-bind="text:Title"></td>
<td data-bind="spDate:DateOfJoining,defaultValue:' - -'"></td>
<td data-bind="spNumber:RatePerHour,dataFormat:'$ 0.00',defaultValue:'$ 0.00'"></td>
<td data-bind="spNumber:MarkupPercentage,dataFormat:'0.00 %',defaultValue:'N.A'"></td>
<td data-bind="spNumber:RateForClient,dataFormat:'0.00'"></td>
<td data-bind="spNumber:HoursBilled"></td>
</tr>
</script>
<script type="text/javascript">
function KoSpModal() {
var self = this;
self.Items = ko.observableArray([]);
$.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/Employees",
function (data) {
if (data.d.results) {
self.Items(ko.toJS(data.d.results));
}
}
);
}
ko.applyBindings(new KoSpModal(), restDiv);
</script>
<br />
<br />
<h1>KoSpJs binding based on SP Services</h1>
<br />
<div id="spsDiv">
<table width="750px">
<thead>
<tr>
<th>Employee Name</th>
<th>Date of Joining</th>
<th>Rate Per Hour</th>
<th>Markup Percentage</th>
<th>Rate For Client</th>
<th>Hours Billed</th>
</tr>
</thead>
<tbody data-bind="template: { name: 'template2', foreach: Employees }" />
</table>
</div>
<script type="text/html" id="template2">
<tr>
<td data-bind="text:Title"></td>
<td data-bind="spDate:DateOfJoining,src:'sps',defaultValue:' - -'"></td>
<td data-bind="spNumber:RatePerHour,src:'sps',dataFormat:'$ 0.00',defaultValue:'$ 0.00'"></td>
<td data-bind="spNumber:MarkupPercentage,src:'sps',dataFormat:'0.00 %',defaultValue:'N.A'"></td>
<td data-bind="spNumber:RateForClient,src:'sps',dataFormat:'0.00'"></td>
<td data-bind="spNumber:HoursBilled,src:'sps',dataFormat:'0.00'"></td>
</tr>
</script>
<script type="text/javascript">
function Employee(data) {
this.Title = ko.observable(data.Title);
this.DateOfJoining = ko.observable(data.DateOfJoining);
this.RatePerHour = ko.observable(data.RatePerHour);
this.MarkupPercentage = ko.observable(data.MarkupPercentage);
this.RateForClient = ko.observable(data.RateForClient);
this.HoursBilled = ko.observable(data.HoursBilled);
}
function KoSpModal() {
var self = this;
self.Employees = ko.observableArray([]);
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Employees",
CAMLViewFields: "<ViewFields Properties='True' />",
CAMLQuery: "<Query></Query>",
completefunc: function (xData, Status) {
var spsData = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({ includeAllAttrs: true, removeOws: true });
console.log(JSON.stringify(spsData));
if (spsData) {
$.each(spsData, function (k, l) {
self.Employees.push(new Employee({
Title: l.Title,
DateOfJoining: l.Date_x0020_of_x0020_Joining,
RatePerHour: l.Rate_x0020_Per_x0020_Hour,
MarkupPercentage: l.Markup_x0020_Percentage,
RateForClient: l.Rate_x0020_for_x0020_Client,
HoursBilled: l.Hours_x0020_Billed
}))
});
}
}
});
}
ko.applyBindings(new KoSpModal(), spsDiv);
</script>
Leave a comment