SharePoint 2013 : How to Render Single Line of Text as Date Range Control using JSLink Edit
While working with one of the assignment I was encountered a requirement where we need to have a Date Range Control in the SharePoint List Form for user entry.
I got the same requirement in the past when I was working with SharePoint 2007, at that time I achieved this requirement by developing Custom Field Type for Date Range and believe me it was too tricky to handle but we did not have any other option available at hand but this time I made use of Client Side Rendering Framework, which is a new concept introduced in SharePoint 2013.
In this article we will discuss the implementation details of Client Side Rendering Framework to convert a Single Line of Text Column to Date Range Control
And the awesome part about it is we can bring this big change without changing the existing schema of the List itself.
In order to work out the demo, we can start with an existing list “Products”, which have list of Products available in a catalog (an arbitrary scenario) as shown below-
https://howtodowithsharepoint.files.wordpress.com/2015/11/1.png?w=300&h=133
All we need to do is to add Product Validity information into the catalog so that Products can be tracked based on Product Validity Date Range.
So let’s add a new column of type “Single Line of Text” by the name “ProductValidity” as shown below-
https://howtodowithsharepoint.files.wordpress.com/2015/11/2.png?w=300&h=199
Now we need to add a new JavaScript File under any suitable location in your site, for this demo I am adding the file to “SiteAssets” by the name “Date Range – JSLink.js” as shown below-
https://howtodowithsharepoint.files.wordpress.com/2015/11/3.png?w=300&h=101
Now lets’ add the JSLink plumbing to the JavaScript File in the below order-
Step 1: Add required reference to JQuery Files & CSS Files, for this demo we need to add the references to “jquery-1.10.0.min.js”, “jquery-ui.min.js” and “jquery-ui.css”
Step 2: Create a JSON Object that defines the behavior of the List Column on which it is implemented.
Templates: This is a sub object that can store the information regarding List Template Type
OnPostRender: Defines the method to be called after the List Column gets rendered
Fields: Define the Field on which this JSLink should get implemented
Step 3, Step 4 & Step 5: Defines that this JSLink should be implemented on “ProductValidity” Column only when it is rendered in “NewForm” and “EditForm”
Step 6: Finally register Template Override to make sure that JSLink should get precedence over the OOB behavior of List Column rendering.
https://howtodowithsharepoint.files.wordpress.com/2015/11/4.png?w=300&h=75
Now let’s get inside the function “DRFieldTemplate” which will act as Template Override Handler
Step 7: Instantiate Form Context by calling “GetFormContextForCurrentField” method
Step 8: In this step we are reading the “ProductValidity” Column value and split it by “-”, since the values saved to the field as “From Date – To Date”
Step 9: In this step we are preparing the custom HTML to render the List Field in a new way, this is the turning point of this implementation and here you can apply any HTML you like to. This also equally means that we can give any desired look to our List Field in this step.
Step 10: Here we are defining the Get Value Call Back function that supplies SharePoint a custom value for the List Column to save to.
In this step we are getting values from two different input controls (From Date & To Date) and format these values by separating them using “-” character, which can be used as splitter in Step 8 above.
https://howtodowithsharepoint.files.wordpress.com/2015/11/5.png?w=300&h=117
Step 11: In Post Render Callback we are hooking up the jQuery Date Picker control to the HTML Input controls.
It is important to note that Post Render Callback will get execute once the default rendering of the List Form has been completed.
https://howtodowithsharepoint.files.wordpress.com/2015/11/6.png?w=300&h=37
Since we have developed this JSLink to work in ”New Form” and “Edit Form” Mode only, so we need to first apply this JSLink in these two forms.
Apply JSLink in New Form:
Browse the Products List
From the Ribbon choose New Item
https://howtodowithsharepoint.files.wordpress.com/2015/11/7.png?w=300&h=83
Once the New Form loaded, verify if “ProductValidity” List Field is rendered as “Single Line of Text”
https://howtodowithsharepoint.files.wordpress.com/2015/11/8.png?w=300&h=199
Now in order to apply the JSLink, Edit the Page
https://howtodowithsharepoint.files.wordpress.com/2015/11/9.png?w=300&h=128
Edit WebPart
https://howtodowithsharepoint.files.wordpress.com/2015/11/10.png?w=300&h=268
Scroll down to the “Miscellaneous” Section in the WebPart Editor Part
Locate the JSLink Placeholder
https://howtodowithsharepoint.files.wordpress.com/2015/11/11.png?w=300&h=139
Specify the path to the JSLink File
It is important to note that here we need to make use of SharePoint Tokens instead of specify the full path.
To get details on different kind of SharePoint Tokens you can refer the another article from me https://howtodowithsharepoint.wordpress.com/2015/01/16/sharepoint-url-tokens/
https://howtodowithsharepoint.files.wordpress.com/2015/11/12.png?w=300&h=134
Click OK to save the changes.
And if there are no issues with the JSLink sure enough you will get the “ProductValidity” List Field converted from “Single Line of Text” to a Set of multiple controls with Date Picker hooked to it.
https://howtodowithsharepoint.files.wordpress.com/2015/11/13.png?w=300&h=285
https://howtodowithsharepoint.files.wordpress.com/2015/11/14.png?w=300&h=249
Apply JSLink in Edit Form:
For the Edit Form we have to follow the exactly same steps to Apply JSLink as we did in New Form –
Edit any List Item
https://howtodowithsharepoint.files.wordpress.com/2015/11/15.png?w=300&h=118
Validate “ProductValidity” List Field
https://howtodowithsharepoint.files.wordpress.com/2015/11/16.png?w=300&h=190
Edit Page
https://howtodowithsharepoint.files.wordpress.com/2015/11/17.png?w=300&h=118
Edit WebPart
https://howtodowithsharepoint.files.wordpress.com/2015/11/18.png?w=300&h=271
Specify the JSLink File Path and Click OK
https://howtodowithsharepoint.files.wordpress.com/2015/11/19.png?w=300&h=129
https://howtodowithsharepoint.files.wordpress.com/2015/11/20.png?w=300&h=130
https://howtodowithsharepoint.files.wordpress.com/2015/11/21.png?w=300&h=229
https://howtodowithsharepoint.files.wordpress.com/2015/11/22.png?w=300&h=252
While adding or editing an Item, we can select “Valid From” & “Valid To” Date to specify the Product Validity.
These dates will be stored in the Format as shown below
https://howtodowithsharepoint.files.wordpress.com/2015/11/23.png?w=300&h=72
Every time when user edits the item, these dates will get split up based on “-” and set back to the respective date fields.
https://howtodowithsharepoint.files.wordpress.com/2015/11/24.png?w=300&h=211
This simple demo shows how easily can we tweak around and enhance the default behavior of List Form rendering by making use of JSLink mixing it up with latest HTML, JQuery & CSS constructs.
Hope you find it helpful.