After learning how to edit the visualization of a field in a SharePoint 2013 list using the Client Side Rendering, today we will learn how to redefine the modality of insertion of values inside such field when creating or editing it. In a form of this kind usually the default functionality of data insertion is left to the user (this is also because otherwise there would be no reason in using SharePoint). The HTML code we wrote in the previous post for the visualization part of our field is now useless and we need to think of another way of inserting the percentage of completion of a task (this is whether we decide to rewrite the default behaviour). For this example then, we will exploit one of the new input elements which appeared with HTML5: the "range" input control. This element tells the browser to display a slider instead of the classic text control. The slider is quite useful to assign a value between 0% and 100% to our "PercentComplete" field. Here's how we can insert this control in the creation and editing views of a task list. window.D4S = window.D4S || {}; window.D4S.SP2013 = window.D4S.SP2013 || {}; D4S.SP2013.PercentCompleteDisplay = function (ctx) { var currentItem = ctx.CurrentItem; var currentValue = currentItem[ctx.CurrentFieldSchema.Name]; return "<div style='background-color: #e5e5e5; width: 100px; display:inline-block;'>" + "<div id='d4sTask-" + currentItem.ID + "' style='width: " + currentValue.replace( /\s+/g , '' ) + "; background-color: #0094ff;'> </div>" + "</div> " + "<span id='d4sTaskLabel-" + currentItem.ID + "'>" + currentValue + "</span>" ; }; D4S.SP2013.PercentCompleteEdit = function (ctx) { var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx); formCtx.registerGetValueCallback(formCtx.fieldName, function () { return document.getElementById( 'txtPercentComplete' ).value; }); return "<input type='range' id='txtPercentComplete' min='0' max='100' oninput='outPercentComplete.value=txtPercentComplete.value' value='" + formCtx.fieldValue + "' /> <output name='outPercentComplete' for='txtPercentComplete' >" + formCtx.fieldValue + "</output>%" ; }; ( function () { var ctx = {}; ctx.Templates = {}; ctx.Templates.Fields = { 'PercentComplete' : { 'View' : D4S.SP2013.PercentCompleteDisplay, 'DisplayForm' : D4S.SP2013.PercentCompleteDisplay, 'EditForm' : D4S.SP2013.PercentCompleteEdit, 'NewForm' : D4S.SP2013.PercentCompleteEdit } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx); })(); I would like to remind you that in order for the CSR to be able to load your template in the forms of creation and editing of your list you need to edit by hand the related web parts which build the form and insert inside the "JSLink" propriety the URL of the JavaScript file in which you have inserted this piece of code. In respect to the visualization part, we exploit the GetFormContextForCurrentField and registerGetValueCallback functions respectively to recover the context of the creation/editing form and register a function that will be recalled by the rendering system of Sharepoint when it is necessary to know the actual value to be saved into the database. Without the use of these two functions, SharePoint won't be able to understand which value is to be saved. This is why inside the callback function the actual value taken from the "range" input control. The result of this simple technique is then very useful to the final user. As you can see, in both insertion and editing we have a lot of freedom. Without too much effort we can implement mechanisms of data insertion that make easier the use of the system for the final user, perhaps recovering data from other lists by means of REST or the Client Object Model.
