{"id":967,"date":"2011-01-09T16:53:28","date_gmt":"2011-01-09T15:53:28","guid":{"rendered":"http:\/\/www.itidea.nl\/?p=967"},"modified":"2015-09-08T20:33:55","modified_gmt":"2015-09-08T18:33:55","slug":"spservices-and-jquery-templates-upcoming-birthday-overview","status":"publish","type":"post","link":"https:\/\/www.itidea.nl\/index.php\/spservices-and-jquery-templates-upcoming-birthday-overview\/","title":{"rendered":"SPServices and jQuery templates: Upcoming birthday\u2019s overview"},"content":{"rendered":"

The use of jQuery templates is very neat. It easily displays content in a structured way according to a defined template. Microsoft created the jQuery template plugin (https:\/\/github.com\/nje\/jquery-tmpl<\/a>) which can be used by referencing the template script file.\u00a0<\/p>\n

In this article both SPServices and the jQuery template will be used to show the strength of combining these libraries.\u00a0<\/p>\n

Purpose<\/h2>\n

All employees are highly appreciated at the company there are working (of course). The company decides to send all employees flowers on their birthday.\u00a0The employee data is stored in a standard SharePoint Contacts list extended with a column to register the birth days. Employees of the HR department are responsible for sending the flowers on time, but they it\u2019s difficult for them to get the upcoming birthdays from the Contact list.
\nIt is desirable to provide the HR department with an overview of upcoming birthdays.\u00a0\u00a0\u00a0\u00a0<\/p>\n

Set up the Contacts list<\/h2>\n

To create the overview of upcoming birthdays a standard SharePoint Contacts list is used extended with a column with the name \u2018Date of birth\u2019 of type Date and Time. To display some additional information in the overview the column \u2018Department\u2019, type single line of text, is added to the list.
\nThe list is filled with some data:
\n\"\"<\/a><\/p>\n

Create the overview\u00a0\u00a0\u00a0\u00a0<\/h2>\n

The SPServices operation GetListItems is used to get the data from the Contacts list:\u00a0\u00a0\u00a0\u00a0<\/p>\n

\r\n\r\n$().SPServices({\r\n\u00a0\u00a0\u00a0 operation: "GetListItems",\r\n\u00a0\u00a0\u00a0 async: false,\r\n\u00a0\u00a0\u00a0 debug: true,\r\n\u00a0\u00a0\u00a0 listName: "Contacts",\r\n\u00a0\u00a0\u00a0 CAMLViewFields: "<ViewFields><\/ViewFields>",\r\n\u00a0\u00a0\u00a0 completefunc: function (xData, Status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(xData.responseXML).find("[nodeName=z:row]").each(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 daysleft = CalculateDaysLeft($(this).attr("ows_Date_x0020_of_x0020_birth"));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 contacts.push({ FirstName: $(this).attr("ows_FirstName"), LastName: $(this).attr("ows_Title"), Department: $(this).attr("ows_Department"), DaysLeft: daysleft });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SortByDaysLeft(contacts);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#showContacts").html("");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#contactTemplate").tmpl(contacts)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .appendTo("#showContacts");\r\n\u00a0\u00a0\u00a0 }\r\n});\r\n<\/pre>\n
The callback function gets the response of the web service. The function CalculateDaysLeft calculates the days left until the date stored in \u2018Date of birth\u2019 will occur in the current year. Since this is a helper method it is not showed here.
\nThe firstname, lastname, department and the daysleft are stored in an array of objects named contacts. To display the birthdays in upcoming order the function SortByDaysLeft is called. This is also a helper function and for readability not displayed here.
\nA jQuery template, contactTemplate, is used to show the results on the page. The template is rendered with the data and appended to a div with the id showContacts. \u00a0The div functions as the template container.
\nThe template uses the objects in the array:\u00a0<\/p>\n
\r\n<script id="contactTemplate" type="text\/x-jquery-tmpl">\r\n\u00a0<div>\r\n\u00a0\u00a0\u00a0 ${FirstName} ${LastName}\r\n\u00a0\u00a0\u00a0 <ul style="list-style-type:none;">\r\n\u00a0\u00a0\u00a0 <li>${Department}<\/li>\r\n\u00a0\u00a0\u00a0 <li>${DaysLeft} days left until birthday!!<\/li>\r\n\u00a0\u00a0\u00a0 <\/ul>\r\n <\/div>\r\n<\/script>\r\n<\/pre>\n
The first thing you\u2019ll probably notice is the script tags. Because of these tags the template is embedded in the body of the page. In the template html can be used to format the data to be displayed. The ${FirstName}, ${LastName}, ${Departement} and ${DaysLeft} expressions are used in the template as placeholders for the data present in the array of objects \u2018contacts\u2019. ${..} tells the parser the fields have to be replaced with the values passed in the template by the array of objects.\u00a0\u00a0\u00a0\u00a0<\/p>\n
The template is rendered once for each item in the array named contacts.
\nThe upcoming birthdays are displayed with the contactTemplate as shown in the figure below:
\n\"\"<\/a><\/p>\n
This template is quite simple and fulfills the purpose of displaying upcoming birthdays from the Contacts list.<\/p>\n
The template displays \u2018.. days left until birthday!\u2019 for all items. It\u2019s much nicer to display a message based on the number of days left to provide the HR department with some additional information.
\nThis can be accomplished with code in the template itself with an \u2018if ..else..\u2019 statement as shown in the code below.\u00a0<\/p>\n
\r\n<script id="contactTemplateInlineCode" type="text\/x-jquery-tmpl">\r\n\u00a0<div>\r\n\u00a0\u00a0\u00a0 ${FirstName} ${LastName}\r\n\u00a0\u00a0\u00a0 <ul style="list-style-type:none;">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href="#" id=${Department} title="Show all employees of ${Department}">${Department}<\/a><\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {{if (DaysLeft < 10)}} Did you order flowers already? It's almost his birthday, only ${DaysLeft} days!\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {{else DaysLeft < 150}} It takes a little while until his birthday: ${DaysLeft} days!\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {{else (DaysLeft < 360 )}} A long time until his birthday: ${DaysLeft} days!\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {{else (DaysLeft > 359 )}} If you didn't sent any flowers, you're too late now...{{\/if}}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/li>\r\n\u00a0\u00a0\u00a0 <\/ul>\r\n <\/div>\r\n<\/script>\r\n<\/pre>\n
Besides adjusting the text based of the number of days left, the Department is adjusted to be a link. When selecting the link the function GetAllContactsFromDepartment is called with the ID of the link. The ID of the link is set with the Department value. The values of the array used by the template can be used everywhere in the template. The function GetAllContactsFromDepartment will display the firstname, lastname and day and month of the birthdate of the specified Department with the help of the SPServices library operation GetListItems.
\nThe results of this operation are stored in an array of objects and another template is rendered with this array.<\/p>\n
\r\n\u00a0$().SPServices({\r\n\u00a0\u00a0\u00a0 operation: "GetListItems",\r\n\u00a0\u00a0\u00a0 async: false,\r\n\u00a0\u00a0\u00a0 debug: true,\r\n\u00a0\u00a0\u00a0 listName: "Contacts",\r\n\u00a0\u00a0\u00a0 CAMLViewFields: "<ViewFields><\/ViewFields>",\r\n\u00a0\u00a0\u00a0 CAMLQuery: "<Query><Where><Eq><FieldRef Name='Department'\/><Value Type='Text'>" + Department + "<\/Value><\/Eq><\/Where><\/Query>",\r\n\u00a0\u00a0\u00a0 completefunc: function (xData, Status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(xData.responseXML).find("[nodeName=z:row]").each(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var temp = $(this).attr("ows_Date_x0020_of_x0020_birth");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var formattedDate = "";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (temp.length > 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var month = temp.substring(5, 7);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var day = temp.substring(8, 10);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 formattedDate = day + " " + month;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 daysLeft = CalculateDaysLeft(temp);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 contactsOfDepartment.push({ FirstName: $(this).attr("ows_FirstName"), LastName: $(this).attr("ows_Title"), BirthDate: formattedDate, DaysLeft: daysLeft });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SortByDaysLeft(contactsOfDepartment);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#showContactsFromDepartment").html("<h4>" + Department + "<\/h4>");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#DepartmentTemplate").tmpl(contactsOfDepartment)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .appendTo("#showContactsFromDepartment");\r\n\u00a0\u00a0\u00a0 }\r\n});\r\n<\/pre>\n
The DepartmentTemplate used in the code above:<\/p>\n
\r\n<script id="DepartmentTemplate" type="text\/x-jquery-tmpl">\r\n<div style="float:left;width:100%">\r\n\u00a0\u00a0\u00a0 <div style="float:left;width:15%">\r\n\u00a0\u00a0\u00a0\u00a0 ${FirstName} ${LastName}\r\n\u00a0\u00a0\u00a0 <\/div>\r\n\u00a0\u00a0\u00a0 <div style="float:right;width:85%">\r\n\u00a0\u00a0\u00a0\u00a0 ${BirthDate}\r\n\u00a0\u00a0\u00a0 <\/div>\r\n<\/div>\r\n<\/script>\r\n<\/pre>\n
So within a template a call to fill another template with data can be made.\u00a0\u00a0\u00a0\u00a0<\/p>\n
The upcoming birthdays are now displayed as in the figure below:\ufffd
\n\"\"<\/a><\/p>\n
When selecting the Marketing department another template will be filled with data:
\n\"\"<\/a><\/p>\n
All the code displayed in this post is based on jQuery. With references to jQuery, the SPServices library and the jQuery template plugin all the code can be pasted in a Content Editor web part on a SharePoint page.\u00a0\u00a0\u00a0\u00a0<\/p>\n
\r\n<script src="\/jQueryLibrary\/jquery-1.4.4.min.js" type="text\/javascript"><\/script>\r\n<script src="\/jQueryLibrary\/jquery.SPServices-0.5.6.min.js" type="text\/javascript"><\/script>\r\n<script src="\/jQueryLibrary\/jquery.tmpl.js" type="text\/javascript"><\/script>\r\n<\/pre>\n
Summary\u00a0\u00a0\u00a0\u00a0<\/h2>\n
By combining libraries like SPServices and jQuery templates it is quite straightforward to display a list of upcoming birthdays from a standard SharePoint Contacts list.\u00a0\u00a0\u00a0\u00a0<\/p>\n
The strength of the use of SPServices here is to get the necessary data in a straightforward way; the strength of the use of jQuery templates is to display the data in a nicely formatted way. Using a combination of both libraries I think the best of both worlds are used the appropriate way.<\/p>\n","protected":false},"excerpt":{"rendered":"
The use of jQuery templates is very neat. It easily displays content in a structured way according to a defined template. Microsoft created the jQuery template plugin (https:\/\/github.com\/nje\/jquery-tmpl) which can be used by referencing the template script file.\u00a0 In this … Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[11,42,33],"class_list":["post-967","post","type-post","status-publish","format-standard","hentry","category-sharepoint-2010","tag-jquery","tag-sharepoint-2010","tag-spservices"],"_links":{"self":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/967","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/comments?post=967"}],"version-history":[{"count":13,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/967\/revisions"}],"predecessor-version":[{"id":2037,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/967\/revisions\/2037"}],"wp:attachment":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/media?parent=967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/categories?post=967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/tags?post=967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}