jslink/client-side rendering of New and Edit forms

Question

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:

(function(){
    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;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
})();

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 = {
    "NewForm":customForm,
    "EditForm":customForm,
    "DisplayForm":customForm
};

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?

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