KnockoutJs for SharePoint (KoSpJs) – Formatting Date, Number Fields in SharePoint REST API and SPServices

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

Options Available in KoSpJs for spDate and spNumber binders (Applicable to SharePoint Date Fields and Number Fields)

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>