SharePoint CSR attachment control on newform.aspx

Question

I have created a SharePoint list forms form scratch using CSR.

this is the link that i have followed.

Everything is working as expected without attachment.

But when i select attach file option from the ribbon and click on OK button, I am getting Cannot read property 'insertRow' of null at OkAttach error in console.

Can anybody please help me out with this. Or is there any other way that I can use to create attachment control/field on the form.

Answer 1

I have managed to resolved the above mentioned issue.

The issue i was facing is because I had not rendered the Attachment field for my custom form.

Refer below code for the same :

(function () {  

  var rows = {};
  rows.one = '<tr>' +
            '<td colspan="3">' +
                '<table border="0" cellpadding="0" cellspacing="3">' +
                    '<tbody>' +
                        '<tr>' +
                            '<td>' +
                                '{{First_x0020_NameCtrl}}' +
                            '</td>' +
                            '<td>' +
                                '{{Middle_x0020_InitialCtrl}}' +
                            '</td>'+
                        '</tr>' +
                        '<tr class="labelRowBelow">' +
                            '<td>First Name<span class="required">*</span></td>' +
                            '<td>Middle Initial</td>' +
                        '</tr>' +
                    '</tbody>' +
                '</table>' +
            '</td>' +
        '</tr>' +
        '<tr><td>{{AttachmentsCtrl}}</td></tr>';  // is the the placeholder you need to add for the attachment  


    // Create object that have the context information about the field that we want to change it's output render   
    var formTemplate = {}; 
    formTemplate.Templates = {}; 
    formTemplate.Templates.View = function(ctx){

        var formTable = "".concat('<table width="100%" cellpadding="5" id="idGFF">', rows.one, '</table>'); 

        //Replace the placeholders with the default sharepoint controls 
        formTable = formTable.replace("{{First_x0020_NameCtrl}}", getSPFieldRender(ctx, "First_x0020_Name"));
        formTable = formTable.replace("{{Middle_x0020_InitialCtrl}}", getSPFieldRender(ctx, "Middle_x0020_Initial"));
        .....
        .....
        .....
        .....
        formTable = formTable.replace("{{AttachmentsCtrl}}", getSPFieldRender(ctx, "Attachments")); // this is to replace the placeholder for attachment with the attachment field's html. 

        return formTable; 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(formTemplate); 

})();  


//This function code set the required properties and call the OOTB (default) function that use to render Sharepoint Fields  
function getSPFieldRender(ctx, fieldName) 
{ 
    var fieldContext = ctx; 

    var result = ctx.ListSchema.Field.filter(function( obj ) { 
        return obj.Name == fieldName; 
    }); 

    fieldContext.CurrentFieldSchema = result[0]; 
    fieldContext.CurrentFieldValue = ctx.ListData.Items[0][fieldName]; 

    return ctx.Templates.Fields[fieldName](fieldContext); 
}

After this modifications, try to use the attachment from the ribbon. it will work perfectly.

Answer 2

(function () {  
var rows = {};
rows.one = '<tr>' +
        '<td colspan="3">' +
            '<table border="0" cellpadding="0" cellspacing="3">' +
                '<tbody>' +
                    '<tr>' +
                        '<td>' +
                            '<div>Form Status</div>' +
                        '</td>' +
                        '<td>' +
                            '{{StatusCtrl}}' +
                        '</td>'+
                    '</tr>' +
                    '<tr>' +
                        '<td>' +
                            '<div>Request Type <span style="color: Red">*</span></div>' +
                        '</td>' +
                        '<td>' +
                            '{{RequestTypeCtrl}}' +
                        '</td>'+
                    '</tr>' +
                    '<tr>' +
                        '<td colspan="2">' +
                            '<hr />' +
                        '</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td>' +
                            '<div>Item Type <span style="color: Red">*</span></div>' +
                        '</td>' +
                        '<td>' +
                            '{{ItemTypeCtrl}}' +
                        '</td>'+
                    '</tr>' +
                '</tbody>' +
            '</table>' +
        '</td>' +
    '</tr>' +
    '<tr><td>{{AttachmentsCtrl}}</td></tr>';  // is the the placeholder you need to add for the attachment  
    // Create object that have the context information about the field that we want to change it's output render   
    var formTemplate = {}; 
    formTemplate.Templates = {}; 
    formTemplate.Templates.View = function(ctx){

    var formTable = "".concat('<table width="100%" cellpadding="5" id="idGFF">', rows.one, '</table>'); 

    //Replace the placeholders with the default sharepoint controls 
    formTable = formTable.replace("{{StatusCtrl}}", getSPFieldRender(ctx, "Status"));
    formTable = formTable.replace("{{RequestTypeCtrl}}", getSPFieldRender(ctx, "RequestType"));
    formTable = formTable.replace("{{ItemTypeCtrl}}", getSPFieldRender(ctx, "ItemType"));
    formTable = formTable.replace("{{AttachmentsCtrl}}", getSPFieldRender(ctx, "Attachments"));

    return formTable; 
}; 

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(formTemplate); 

})(); 
function getSPFieldRender(ctx, fieldName) 
{ 
var fieldContext = ctx; 

//for (var i=0; i< ctx.ListSchema.Field.length; i++){
//  alert(ctx.ListSchema.Field[i].Name);
//}
var result = ctx.ListSchema.Field.filter(function( obj ) { 
    return obj.Name == fieldName; 
}); 

fieldContext.CurrentFieldSchema = result[0]; 
fieldContext.CurrentFieldValue = ctx.ListData.Items[0][fieldName]; 

return ctx.Templates.Fields[fieldName](fieldContext); 
}