This is my second post on JSLink and I will show how to customize "New" and "Edit" forms using JavaScript and JSLink. I will not spend time on setup and deployment, which I briefly touched on my last post here. As a ShaePoint developer, most of us have worked on customizing New or Edit form using JavaScript which works but it's a workaround, not an elegant solution. But with JSLink, we don't have to add Content Editor web part to OOTB NewForm.aspx or EditForm.aspx, instead we just have edit the page and set JSLink property. In this post I am using the same Tasks list as in previous post and will enhance the new and edit forms, by replacing "% Complete" input control with dropdown list with predefined values. Here is the final result: To achieve this result, create JavaScript file and copy/paste following code snippets. See comments for explanation: // JavaScript source code (function () { var overrideCtx = {}; overrideCtx.Templates = {}; //override 'PercentComplete' field and provide custom rendering functions //for NewForm.aspx and EditForm.aspx pages. overrideCtx.Templates.Fields = { 'PercentComplete': { 'NewForm': customField, 'EditForm': customField } } //register our override SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })(); function customField(ctx) { //get form context for our field var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx); //local vars: var fldName = "cbo_" + formCtx.fieldName; //used to set id of dropdown var fldValue = parseInt(formCtx.fieldValue); //get current value for edit form //register value callback. this function is called before submitting form //returned value will be saved in PercentComplete field. make sure the //return type is compatible with field data type. formCtx.registerGetValueCallback(formCtx.fieldName, function () { var cbo = document.getElementById(fldName); return cbo.options[cbo.selectedIndex].value; }); //return