How do I customise the newform.aspx of a list in SharePoint 2013 using JSLink?

A lot of examples seem to be for customising list views. I can't find anything that explains how to customise the new form for adding a new item to the list.

Basically I want to style the whole new form to match my look and feel.

Can someone please tell me how?

  • 6
    You have been given a lot of different answers and information about how to do this! Time to mark one as an answer! – Robert Lindgren Apr 16 '13 at 12:30
  • 1
    JSLink might not be the best tool to style your form. JavaScript is usually used for behaviors, for look and feel consider using a stylesheet instead (css). – Christophe May 26 '13 at 21:03

You need to add a JSLink to the fields themselves (this means you need to either update the existing fields (by code or by PowerShell, harder in Office 365) or create your own field definition)

In that .js file you need to specify a number of methods that will override the standard functions, including View, DisplayForm, EditForm, NewForm.

Note that this will only change the style of every individual field!

In MSDN you can see an extensive example of how to customize every part of, in this case, a geolocation field.

I also found this blog post that is very extensive and with lot's of great code examples.

Here is the basic structure of an .js for rendering a field (from MSDN above):

function _registerCustomGeolocationFieldTemplate() {

        var geolocationFieldContext = {};
        geolocationFieldContext.Templates = {};
        geolocationFieldContext.Templates.Fields = {

            'CustomGeolocationField': {
                'View': CustomGeolocationFieldTemplate.RenderGeolocationField,
                'DisplayForm': CustomGeolocationFieldTemplate.SPFieldGeolocation_Display,
                'EditForm': CustomGeolocationFieldTemplate.SPFieldGeolocation_Edit,
                'NewForm': CustomGeolocationFieldTemplate.SPFieldGeolocation_Edit

And the basic structure for a Callback method for your edit forms:

/// Function called to render the NewForm & EditForm view of the field
function editFunc(renderCtx) {
    var fieldHtml = '<select ';
    fieldHtml += 'id="myNiftySelect" onchange="moveValue(\'' + this.get_fieldId() + '\')">';
    fieldHtml += getSelectOptions(this.get_fieldValue());
    fieldHtml += '"</select>';
    fieldHtml += getStandardInputHtml(this, "hidden");
    return fieldHtml;

from here

| improve this answer | |

newform.aspx uses an InfoPath form which you can customize with InfoPath Designer a lot easier than with JSLink.

Also depending on what "look and feel" changes you want to make, adding a custom CSS file to the master page can get you changes that will affect all InfoPath forms.

| improve this answer | |
  • 2
    Well, I have my reasons for using JSLink. Sorry, but your answer is not helpful. – ashwnacharya Apr 4 '13 at 7:05
  • you should add the reason to your question – Ryan Erickson Apr 4 '13 at 15:17
  • He was just pointing it out, no need to downvote his answer for that, right? – Robert Lindgren Apr 12 '13 at 8:24

If you are developing a web part as a sandboxed solution, you could add a <JSLink> node to your ListFormWebPart or XsltListViewWebPart definitions:

<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2">
    <Assembly>Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>                        

    <JSLink>{path to JS file}</JSLink>

| improve this answer | |

As far as I know, JSLink is more used for modifying the rendering of list VIEWS, not really for customizing complete list FORMS. If you want to change the visualisation of a specific field, OK, but for an entire form rendering? Use InfoPath, some JQuery or a custom application page to accomplish that...

| improve this answer | |

I suggest to you to take a look of a post of my collegue Chris O'Brien. I wrote an amazing blog post about this topic:


| improve this answer | |

Please check my answer . Also you can use some logic for customize new/edit/view list forms controls.

Js file sample (add ID field in view form):


function RenderIDField() {
    var regex = new RegExp("[\\?&]" + "ID" + "=([^&#]*)");
    var qs = regex.exec(window.location.href);
    var TD1 = document.createElement("TD");
    TD1.className = "ms-formlabel";
    TD1.innerHTML = "<h3 class='ms-standardheader'>ID</h3>";
    var TD2 = document.createElement("TD");
    TD2.className = "ms-formbody";
    TD2.innerHTML = qs[1];
    var IdRow = document.createElement("TR");
    var ItemBody = GetSelectedElement(document.getElementById("idAttachmentsRow"), "TABLE").getElementsByTagName("TBODY")[0];
    ItemBody.insertBefore(IdRow, ItemBody.firstChild);
| improve this answer | |

Here is a link that you can refer to about using JS link with NewForm fields.


| improve this answer | |

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.