2

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.

4
  • Check this - social.msdn.microsoft.com/Forums/sqlserver/en-US/… Commented Jun 14, 2017 at 16:36
  • @GautamSheth I have gone through the link you have provided. But the issue still persist. Anyway thanks... Commented Jun 16, 2017 at 7:48
  • I used your code for a newform.aspx on a SharePoint online site but I do not get the "Attachments" field at all and throws error at ctx.Templates.Fields[fieldName](fieldContext). NOTE: I have the Allow attachments to list item set to enabled and also set the List to "Classic experience" in Advanced settings. Any help will be deeply appreciated. Thanks, Bhargav Commented Jul 14, 2017 at 10:27
  • @user5657565 can you please tell me exactly what error message you are getting? That would be much helpful..... Commented Jul 14, 2017 at 10:51

2 Answers 2

0

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.

9
  • The CTX does not contain Attachment on the listschema.Field. Is there any other setting that I missed? I was following the structure from code.msdn.microsoft.com/office/…
    – Thisisme..
    Commented Sep 27, 2017 at 17:23
  • @Thisisme.. I will check and let me know.. :) Commented Sep 27, 2017 at 18:00
  • Thank you very much.. I am stuck on attachments.. I am working on NewForm.aspx for a list.
    – Thisisme..
    Commented Sep 27, 2017 at 18:11
  • make sure you have added placeholder for attachment in your HTML e.g.: {{AttachmentsCtrl}}. And then replace the placeholder for attachment with the attachment field's html e.g. formTable = formTable.replace("{{AttachmentsCtrl}}", getSPFieldRender(ctx, "Attachments"));. You can refer above code as a reference for attachment field. Try to do these changes and let me know if it worked or not... Commented Sep 28, 2017 at 11:34
  • 1
    Hi @Rohit, I did added the section for Attachments and I am getting an Typeerror error from jQuery as result[0] is empty and I checked the ctx.ListSchema.Field and it is missing Attachments. If I comment the formTable for Attachments, all the controls load as expected.
    – Thisisme..
    Commented Sep 28, 2017 at 14:01
0
(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); 
}

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.