Adding a new control in New/Edit form using CSR display templates

Question

I am planning to attach a attachment control in my newform and edit form using CSR display templates. i was able to add the control in the page but it is repeating (screenshot for the same). How can i add to the .msofrmtable after Last in the code.

below is my code

(function () { 

    // jQuery library is required in this sample 
    // Fallback to loading jQuery from a CDN path if the local is unavailable 
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>')); 

    // Create object that have the context information about the field that we want to change it's output render  
    var hiddenFiledContext = {}; 
    hiddenFiledContext.Templates = {};  
    hiddenFiledContext.Templates.OnPostRender = AttachmentFiledOnPreRender; 



    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(hiddenFiledContext); 

})(); 


// This function provides the rendering logic 
function AttachmentsFiledTemplate(ctx) {

    return ""
}

// This function provides the rendering logic 
function AttachmentFiledOnPreRender(ctx) { 

 var attachHTML='<tr><td width="190" height="15" class="ms-formlabel" valign="top">Attach File</td><td height="15" class="ms-formbody" id="attachmentsOnClient" valign="bottom"><span dir="ltr"><input name="fileupload0" title="Name" class="ms-fileinput" id="onetidIOFile" type="file" size="56"></span></td></tr><tr><td>&nbsp;</td><td><input class="ms-ButtonHeightWidth" id="attachOKbutton" onclick="OkAttach()" type="button" value="Attach"><span class="ms-SpaceBetButtons" id="idSpace"></span><input class="ms-ButtonHeightWidth" id="attachCancelButton" accesskey="C" onclick="CancelAttach()" type="button" value="Cancel"></td></tr>';
    $(".ms-formtable").append(attachHTML);

} 

Answer 1

Use a global variable to add the custom html once.

(function () { 

    // jQuery library is required in this sample 
    // Fallback to loading jQuery from a CDN path if the local is unavailable 
    (window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.12.4.js"><\/script>')); 

    // Create object that have the context information about the field that we want to change it's output render  
    var hiddenFiledContext = {}; 
    hiddenFiledContext.Templates = {};  
    hiddenFiledContext.Templates.OnPostRender = AttachmentFiledOnPreRender; 



    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(hiddenFiledContext); 

})(); 


// This function provides the rendering logic 
function AttachmentsFiledTemplate(ctx) {

    return ""
}

// This function provides the rendering logic 
function AttachmentFiledOnPreRender(ctx) { 
if(!window.customFormAttachment){
 var attachHTML='<tr><td width="190" height="15" class="ms-formlabel" valign="top">Attach File</td><td height="15" class="ms-formbody" id="attachmentsOnClient" valign="bottom"><span dir="ltr"><input name="fileupload0" title="Name" class="ms-fileinput" id="onetidIOFile" type="file" size="56"></span></td></tr><tr><td>&nbsp;</td><td><input class="ms-ButtonHeightWidth" id="attachOKbutton" onclick="OkAttach()" type="button" value="Attach"><span class="ms-SpaceBetButtons" id="idSpace"></span><input class="ms-ButtonHeightWidth" id="attachCancelButton" accesskey="C" onclick="CancelAttach()" type="button" value="Cancel"></td></tr>';
    $(".ms-formtable").append(attachHTML);
    window.customFormAttachment=true;
}
}