Ashok Raja's Blog
KnockoutJs for SharePoint (KoSpJs) - Formatting Date, Number Fields in SharePoint REST API and SPServices
by Ashok Raja T 26. September 2013 11:32

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

 

Note: KoSpJs depends on moment js for formatting dates and depends on numeral js for formatting numbers, currency and percentage. Rather than reinventing the wheel, KoSpJs relies on these widely accepted Js libraries to perform formatting of data. The Extended version of KoSpJs (ko.sp-1.0.min.Ex.js) contains these libraries bundled into it.

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

PropertyApplicable ToExampleRemarks
srcspDate /spNumbersrc:’sps’If data is retrieved via SPServices then its mandatory to set src to ‘sps’
defaultValuespDate /spNumberdefaultValue:’N.A’Not mandatory. This value will be replaced for empty values returned for a column
dataFormatspDate /spNumberdisplayFormat:’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

image

 

Binding SharePoint List data with KoSpJs

image

The above bindings are based on a SharePoint List named as “Employees” with the below column structure

image

“All Items” View of Employee List

image

 

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>
blog comments powered by Disqus