Modifying ListForm Save & Close button through JsLink

Question

I am currently porting a internly used SP Farm-Solution from 2010 to 2013 and am struggling with the new concept of JsLink.

In the 2010 solution we had overwritten the RenderingTemplate ListForm to contain a custom save and close button built by us. Now with SP2013 there are those new JsLinks that could possibly handle this.

I was thinking of creating a feature with an event receiver behind it, that when activated alters the JsLink property of all contenttypes on the current web and registers our own javascript file.

However all the tutorials / blog entries I have found so far only explain "How to customize the rendering of your field with JsLink" and not how to change stuff like the appearance of the save button.

Is there someone who could help me out here? Been searching around a day already and could not find anything useful so far.

Answer 1

You could use the "PostRender" event to execute your javascript method after the form is completely loaded, something like:

(function () {
    // Initialize the variable that stores the objects.
    var overrideCtx = {};
    overrideCtx.Templates = {};

    // Assign a function to handle the
    // PostRender events
    overrideCtx.OnPostRender = postRenderHandler;

    // Register the template overrides.
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

// The postRenderHandler attends the OnPostRender event
function postRenderHandler(ctx) {

    // You can manipulate the DOM in the postRender event
    var ulObj;
    var i, j;

    ulObj = document.getElementById("unorderedlist");

    // Reverse order the list.
    for (i = 1; i < ulObj.children.length; i++) {
        var x = ulObj.children[i];
        for (j = 1; j < ulObj.children.length; j++) {
            var y = ulObj.children[j];
            if(x.innerText<y.innerText){                  
                ulObj.insertBefore(y, x);
            }
        }
    }
}

this is a modified example of the code found here http://msdn.microsoft.com/en-us/library/office/jj220045%28v=office.15%29.aspx, you get more information and some more example code (for example targeting specific views etc).

You can still attach this to a single field and by executing the PostRender you will have this executing in all renderings including that field etc.

For how to target your JSLink to only NewForm or EditForm, see this other answer by me: Customing the newform.aspx of a list using jslink in SharePoint 2013