I'm using jslink and client-side rendering to control the appearance of some of my new, edit and display forms. I've followed many of the excellent tutorials on that site and several others. I'm able to control the labeling and display of many of the fields.

In this tutorial there is a very detailed explanation of all the parts of a list view. And how the list view is put together. I'm trying to find the same thing but for the forms...and I'm not having any luck.

I want to access the outside container for the form itself and add some classes and what not.

I've looked in the clienttemplates.js and see the list of things that can be overwritten: View, Headers, Body, Footer, Group, Item, Fields, OnPreRender, and OnPostRender.

I thought Body, Group and Item were the most promising. So I tried the following in my csr file:

    var context = {};

    context.Templates = {};

    context.Templates.Body = customRender;
    context.Templates.Group = customRender;
    context.Templates.Item = customRender;

    context.Templates.DisplayForm = customForm;
    context.Templates.EditForm = customForm;
    context.Templates.NewForm = customForm;


function customRender(ctx){
    console.log("Custom render!");  

function customForm(ctx){
    console.log("Custom form!");    

None of those worked. I also thought that maybe the body was nested like the Fields object so I tried this:

context.Templates.Body = {

But that didn't work either. When I stop the debugger and look at the context I see the Templates object and if I inspect it I can see the custom functions I have applied to Templates.Fields.FieldName, but I don't see any of the ones I'm apply to any of the other objects.

I looked into using OnPreRender and OnPostRender. They are called once for teach field on the the form. I can probably use that, but I'm still wondering if there is a way to access the one form just the one time using some of the overrides.

Anybody know how to get the body of a new or edit form in client-side rendering?

1 Answer 1


The forms customization is not available yet. However, take a look at the following code by Muawiyah Shannak. He shows a way to customize form using a different approach in JSLink. He's overriding the Templates.View entirely and uses token to replace the out of the box rendering for the fields. It may work in your case. See more at: https://code.msdn.microsoft.com/office/CSR-code-samples-11-Fully-54ebcaa6

  • i didnt get the above code working.. i was getting error
    – samolpp2
    Commented Apr 22, 2019 at 12:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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