SharePoint 2013 : How to Render Single Line of Text as Date Range Control using JSLink

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-

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-

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-

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.

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.

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.

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

Once the New Form loaded, verify if “ProductValidity” List Field is rendered as “Single Line of Text”

Now in order to apply the JSLink, Edit the Page

Edit WebPart

Scroll down to the “Miscellaneous” Section in the WebPart Editor Part

Locate the JSLink Placeholder

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 http://ift.tt/2a37l00

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.

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

Validate “ProductValidity” List Field

Edit Page

Edit WebPart

Specify the JSLink File Path and Click OK

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

Every time when user edits the item, these dates will get split up based on “-” and set back to the respective date fields.

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.

by Prashant Bansal via Everyone's Blog Posts - SharePoint Community