Post
Ask Question

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.

customcontrol

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:

  1. //Define custom control to a field in NewForm and EditForm    
  2. KB_EmployeeCatalogue_Customization.Form    
  3.   
  4. //Pre Render Function - replace default control with Custom Control    
  5. function pre_RenderForm_MultiDateLocation(_context)    
  6.   
  7. //Bind default row with tbody     
  8. function bindDefaultRow(customControlHtml, ColumnId, ColumnName, webUrl)    
  9.   
  10. //Render HTML of default row     
  11. function defaultRowHTML()    
  12.   
  13. //Date Control    
  14. function renderCalenderHTML(colid, colName, webUrl)    
  15.   
  16. //Post Render Function - Bind click events to add and remove buttons    
  17. function post_RenderForm_MultiDateLocation(_context)    
  18.   
  19. //Known issue in SharePoint    
  20. //Reference - www.markrackley.net/2014/01/31/changes-to-required-field-title-attribute-in-sharepoint/    
  21. 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.


Similar Articles