Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
4  
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

8 Answers 8

You need to add a JSLink to the fields themselfs (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 blogpost that is very extensive and with lot's of great code examples.

Here is the basic structure of an .js for rendering a filed (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
            }
        };
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(geolocationFieldContext);
    }

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

share|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.

share|improve this answer
1  
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=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>                        
    <TypeName>Microsoft.SharePoint.WebPartPages.ListFormWebPart</TypeName>
    <PageType>PAGE_NEWFORM</PageType>

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

</WebPart>
share|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:

http://www.sharepointnutsandbolts.com/2013/01/using-jslink-to-change-ui-of-sharepoint_20.html

share|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...

share|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):

_spBodyOnLoadFunctionNames.push("RenderIDField");

function RenderIDField() {
    debugger;
    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");
    IdRow.appendChild(TD1);
    IdRow.appendChild(TD2);
    var ItemBody = GetSelectedElement(document.getElementById("idAttachmentsRow"), "TABLE").getElementsByTagName("TBODY")[0];
    ItemBody.insertBefore(IdRow, ItemBody.firstChild);
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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