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?
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).
CSR result.
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>