SharePoint 2013 Custom Control (Multi Textbox and Date)

Requirement

Custom Controls are the requirement for a "Knowledge Sharing Sessions Portal". As part of that requirement, the Content Publisher Team must create a Session that will occur more than once at various locations on different dates. The user should have an easy method to add multiple dates and locations as shown below.

In technical terms, convert TextBox control to Custom Control (in other words, Multiple Date and TextBox) as in the following.



I was limited to use only client-side scripting (JavaScript/jQuery) to complete this requirement since our SharePoint environment is cloud hosted (in other words, SharePoint 2013 Online / Office 365).

Good to read (If you are not aware of CSR - SharePoint 2013 Feature):

In SharePoint 2013 (Online and OnPremise), there is a new feature called Client-Side Rendering (CSR).
If you want to learn more about this feature please refer the link for a basic example.

The preceding custom control is shown as a replacement of a TextBox that was implemented using the CSR feature.

The following is the list of JavaScript functions that were used to implement custom control functionality:

//Define custom control to a field in NewForm and EditForm
KB_EmployeeCatalogue_Customization.Form

//Pre Render Function - replace default control with Custom Control
function pre_RenderForm_MultiDateLocation(_context)

//Bind default row with tbody
function bindDefaultRow(customControlHtml, ColumnId, ColumnName, webUrl)

//Render HTML of default row
function defaultRowHTML()

//Date Control
function renderCalenderHTML(colid, colName, webUrl)

//Post Render Function - Bind click events to add and remove buttons
function post_RenderForm_MultiDateLocation(_context)

//Known issue in SharePoint
//Reference - www.markrackley.net/2014/01/31/changes-to-required-field-title-attribute-in-sharepoint/
function removeRequiredFieldFromTitle()

Code Explanation

Method	Description
KB_Employeeccatalogue_Customization.Form	Render the customcontrol for a single field on NewForm.aspx and EditForm.aspx pre_RenderForm_MultiDateLocation
pre_RenderForm_MultiDateLocation	Global Variables are declared NewForm default HTML EditForm HTML with values
newformCtx.registerGetValueCallback	Returns the value on form submission. For this control value is returned as 'London,10/10/2015;Atlanta,12/10/2015; Australia,21/10/2015;Bangalore,25/10/2015'
bindDefaultRow(customControlHtml, ColumnId, ColumnName, webUrl)	ColumnID and ColumnName are used to create a unique control ID for each new row. WebUrl is used to open the calender control depending on the site regional settings. customControlHTML will send the table structure with default row.
defaultRowHTML	New row HTML is formed and returns HTML as string
renderCalenderHTML	TextBox with calender icon HTML is rendered
post_RenderForm_MultiDateLocation	The Click event is bound to the Add button once the custom control is rendered. So that when the user clicks on the Add link, it will fire the logic to bind a new row to the control.

The remaining code is self explanatory, download the code from this article and test the control from your end.

Feel free to report the issues, code improvements/suggestions.

Note: Add this code to the script editor. The current code is not working as JSLink because I have used a custom list. I will fix the code to render it  as a part of JSLink.