JSLink FormTemplate Not Saving Data in Modified Field

Question

I am using JSLink to update the input text field on the NewForm. I want the same input textbox html and am only adding some styling to it (in this case background-color==lime).

So I start by copying the HTML markup from the original form as shown here.

<span dir='none'>
 <input 
   title="Engineering Project 
   Name" class="ms-long ms-spellcheck-true" 
   id="Enginering_x0020_Project_x0020_N_d007ab6e-25bc-4330-abd5-4f9f21c2182f_$TextField"
   type="text" 
   maxlength="255" 
   value="">
 </input>
</span>

After my JSLink is applied the code transforms to the same markup only my style attribute is now applied.

<span dir="none">
 <input 
   title="Engineering Project Name" 
   class="ms-long ms-spellcheck-true" 
   id="Enginering_x0020_Project_x0020_N_d007ab6e-25bc-4330-abd5-4f9f21c2182f_$TextField" 
   style="background-color: lime;" 
   type="text" 
   maxlength="255" 
   value="">
</span>

When I enter data into the Engineering Project Name field and save the form and then edit the item I can see my data was not saved! :(

Can anyone tell me what may be wrong? I am loosing the remaining hairs on my head. Thanks for reading.

Here is my jslink file.

(function () {

    var EngineeringProjectNameFieldCtx = {};
    EngineeringProjectNameFieldCtx.Templates = {};
    EngineeringProjectNameFieldCtx.Templates.Fields = {
        "Enginering_x0020_Project_x0020_N": {
            "DisplayForm":null,

            "View": null,

            "NewForm": ModifyNewFormTemplate,

            "EditForm": null
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(EngineeringProjectNameFieldCtx);
        var _Field = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        var _FieldId = _Field.fieldSchema.Id;
        var _FieldName = _Field.fieldName;

        var newField = "<span dir='none'><input style='background-color:lime' title='Engineering Project Name' class='ms-long ms-spellcheck-true' id='Enginering_x0020_Project_x0020_N_" + _FieldId + "_$TextField' title='" + _FieldName + "' type='text' maxlength='255' value=''></span>";

        return newField;

    }
})();

Additional Details:

The Fiddler trace shows that my updated field is not even being submitted to the _vti_bin/client.svc/ProcessQuery URL.

Answer 1

I would recommend a little bit different approach for customizing field control in List Form. The solution is to override the rendering of field control instead of creating a field control.

The following example demonstrates how to customize Text field control in New/Edit forms

JavaScript template

It is assumed that list contains field named Engineering_x0020_Project of Text type.

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    Templates: {
       Fields: {
         'Engineering_x0020_Project': {
           EditForm: renderProjectFieldControl,
           NewForm: renderProjectFieldControl
         }
       }
    }
});


function renderProjectFieldControl(ctx) 
{
    var result = SPFieldText_Edit(ctx);  //1. render Text field using built-in CSR function 
    var $f = $(result);
    $f.find('input').css('background-color','lime');  //2. customize field control
    return $f.html();
}

Prerequisites: jQuery library dependency

Result

Answer 2

You have to use registerGetValueCallback

Check out this great example on how to override: Client-side rendering code sample - Sample 7 (Email Regex Validator)

In your case it would be something like this:

function ModifyNewFormTemplate(ctx) {   
        var _Field = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        var _FieldId = _Field.fieldSchema.Id;
        var _FieldName = _Field.fieldName;

        _Field.registerGetValueCallback(_FieldName, function() {
            return document.getElementById(_FieldId).value;
        });

        var newField = "<span dir='none'><input style='background-color:lime' title='Engineering Project Name' class='ms-long ms-spellcheck-true' id='" + _FieldId + "' title='" + _FieldName + "' type='text' maxlength='255' value=''></span>";


        return newField;
    }

PS: Note, I changed the ID in your newField so i could quickly test it.