Search code examples
sharepointsharepoint-2016

Modifying the default list form with CSR in SharePoint 2016

I'm a new SharePoint developer working in a 2016 on-prem environment. I have been exploring options for modifying list forms using the Standard Client-Side Rendering render mode, but I'm at a loss for how to accomplish simple tasks within the SPClientTemplates.TemplateManager.RegisterTemplateOverrides method.

On the NewForm.aspx page, I would like to swap the Description field (which displays underneath each input field) and the Title field (the label in the left column) in each row of the default form. I can access these data fields within the ctx object of the method in question, but I can't seem to write a solution that would accomplish swapping them.

I have been following along with Andrei Markeev's articles on the topic (SP CSR List Forms and SP CSR List Forms + Layout) but haven't got working code to show for it. Here is me logging the two fields I am concerned with swapping:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPreRender: function(ctx) {
    console.log(ctx.ListSchema.Field[0].Description);
    console.log(ctx.ListSchema.Field[0].Title);
  }
});

What's the simplest way to do this?

Solution

  • Not so sure about your requirement 'swap', while you could use jQuery to update the DOM structure.

    Here is demo to change Field Comment render(from last to second).

    enter image description here

    CSR result.

    enter image description here

    Insert script editor webpart into new form and insert the script into it.

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
            OnPreRender: function (ctx) {
                //console.log(ctx.ListSchema.Field[0].Description);
                //console.log(ctx.ListSchema.Field[0].Title);
                $("nobr:contains('Comment')").closest('tr').insertBefore($('table.ms-formtable>tbody>tr:nth-child(2)'));
            }
        });
    </script>