3

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.

4

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

enter image description here

  • I hate to ask this but does the data you enter in that field actually save? – ChiliYago Nov 17 '14 at 17:25
  • :) Yes, the value from Engineering Project is being saved, verified it before posting the answer – Vadim Gremyachev Nov 17 '14 at 17:30
  • 1
    Yes I have it working. This approach is easier for me to understand than calling registerGetValueCallback. – ChiliYago Nov 17 '14 at 19:08
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.