(function () {
// 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 = viewTemplate;
formTemplate.Templates.Fields =
{
// Apply the new rendering for Age field on New and Edit forms
"FileUpload":
'NewForm' : CustomField,
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(formTemplate);
})();
// This function provides the rendering logic for the Custom Form
function viewTemplate(ctx) {
var formTable = "".concat(//"<span id='part1'>",
"<table width='100%' cellpadding='5' class='ms-formtable' >",
"<tr>",
"<td><div>Title</div></td>",
"<td><div>{{TitleCtrl}}</div></td>",
"<td><div>Date</div></td>",
"<td><div>{{DateCtrl}}</div></td>",
"</tr>",
"<td><div>Category</div></td>",
"<td><div>{{CategoryCtrl}}</div></td>",
"<td><div>Active</div></td>",
"<td><div>{{ActiveCtrl}}</div></td>",
"<td><div>File Upload</div></td>",
"<td><div>{{FileuploadCtrl}}</div></td>",
'<tr id="idAttachmentsRow">',
'<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><span class="ms-h3 ms-standardheader" id="Attachments">',
'<nobr>Attachments</nobr>',
'</span></td>',
'<td valign="top" width="350px" class="ms-formbody">',
'<table border="0" cellpadding="0" cellspacing="0" id="idAttachmentsTable"></table>',
'</td>',
'<script type="text/javascript">',
'/* <![CDATA[ */',
"if (typeof ShowAttachmentRows == 'function')",
"ShowAttachmentRows();",
'/* ]]> */',
'</script>',
"<td></td>",
"<td><input type='button' value='Save' onclick=\"SPClientForms.ClientFormManager.SubmitClientForm('{{FormId}}')\" style='margin-left:0' ></td>",
"</table>");
//Replace the tokens with the default sharepoint controls
formTable = formTable.replace("{{TitleCtrl}}", getSPFieldRender(ctx, "Title"));
formTable = formTable.replace("{{DateCtrl}}", getSPFieldRender(ctx, "Date"));
formTable = formTable.replace("{{CategoryCtrl}}", getSPFieldRender(ctx, "Category"));
formTable = formTable.replace("{{ActiveCtrl}}", getSPFieldRender(ctx, "Active"));
formTable = formTable.replace("{{FileuploadCtrl}}", getSPFieldRender(ctx, "FileUpload"));
formTable = formTable.replace("{{FormId}}", ctx.FormUniqueId);
return formTable;
function CustomField(ctx)
return '<table><tr><td valign="top" class="ms-formbody" id="attachmentsOnClient" style="width: 434px">'+
'<span dir="ltr">'+
'<input type="file" name="fileupload0" class="ms-longfileinput" id="onetidIOFile" size="56" title="Name" style="width:300px;"> </input>'+
'</span>'+
'</td>'+
'<td width="100px" valign="top" class="ms-formbody">'+
class="ms-ButtonHeightWidth">'+
'<input name="Button1" type="button" value="Attach" onclick="OkAttach()"/>'+
'<span id="idSpace"></span>'+
'</tr></table>';
//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;
//Get the filed Schema
var result = ctx.ListSchema.Field.filter(function( obj ) {
return obj.Name == fieldName;
});
//Set the field Schema & default value
fieldContext.CurrentFieldSchema = result[0];
fieldContext.CurrentFieldValue = ctx.ListData.Items[0][fieldName];
//Call OOTB field render function
return ctx.Templates.Fields[fieldName](fieldContext);