Set field value in New form via JSLink
16/10/2019 11:03
We needed to prefill text field value (InstanceIdField) in SharePoint new form based on query string parameter in new form url. If query string is not there, use default new form behavior (without prefilling value)
In script below, when only new value is returned, it's not saved, so we get original control rendering and replace only value in html.
(function () {
var ctx = {};
ctx.Templates = {};
ctx.Templates.Fields = {
'InstanceIdField': {
'NewForm': FillInstanceId
},
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();
function FillInstanceId(ctx) {
var instanceId = getUrlVars(RubicusFrontendIns.location.href)["InstanceId"];
if(instanceId == undefined)
return SPFieldText_Edit(ctx);
else
{
var originalField = SPFieldText_Edit(ctx);
var presetField = originalField.replace('value=""', 'value="' + instanceId + '"');
return presetField;
}
}
function getUrlVars(url) {
var vars = [], hash;
var hashes = url.slice(url.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
file is bound to list field as follows
field.JSLink = "/_layouts/15/ourlocation/JSLink.js";
field.Update();
JSLink.js file content
(function () {
var ctx = {};
ctx.Templates = {};
ctx.Templates.Fields = {
'InstanceIdField': {
'NewForm': FillInstanceId
},
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();
function FillInstanceId(ctx) {
var instanceId = getUrlVars(RubicusFrontendIns.location.href)["InstanceId"];
if(instanceId == undefined)
return SPFieldText_Edit(ctx);
else
{
var originalField = SPFieldText_Edit(ctx);
var presetField = originalField.replace('value=""', 'value="' + instanceId + '"');
return presetField;
}
}
function getUrlVars(url) {
var vars = [], hash;
var hashes = url.slice(url.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
Bellow is list of default templates. Use it with (ctx)
'File': {
'View': RenderFieldValueDefault,
'DisplayForm': SPFieldFile_Display,
'EditForm': SPFieldFile_Edit,
'NewForm': SPFieldFile_Edit
},
'Calculated': {
'View': RenderFieldValueDefault,
'DisplayForm': SPField_FormDisplay_Default,
'EditForm': SPField_FormDisplay_Empty,
'NewForm': SPField_FormDisplay_Empty
},
'Choice': {
'View': RenderFieldValueDefault,
'DisplayForm': SPField_FormDisplay_Default,
'EditForm': SPFieldChoice_Edit,
'NewForm': SPFieldChoice_Edit
},
'MultiChoice': {
'View': RenderFieldValueDefault,
'DisplayForm': SPField_FormDisplay_Default,
'EditForm': SPFieldMultiChoice_Edit,
'NewForm': SPFieldMultiChoice_Edit
},
'Lookup': {
'View': RenderFieldValueDefault,
'DisplayForm': SPFieldLookup_Display,
'EditForm': SPFieldLookup_Edit,
'NewForm': SPFieldLookup_Edit
},
'LookupMulti': {
'View': RenderFieldValueDefault,
'DisplayForm': SPFieldLookup_Display,
'EditForm': SPFieldLookup_Edit,
'NewForm': SPFieldLookup_Edit
},
'Computed': {
'View': RenderFieldValueDefault,
'DisplayForm': SPField_FormDisplay_Default,
'EditForm': SPField_FormDisplay_Default,
'NewForm': SPField_FormDisplay_Default
},
'URL': {
'View': RenderFieldValueDefault,
'DisplayForm': SPFieldUrl_Display,
'EditForm': SPFieldUrl_Edit,
'NewForm': SPFieldUrl_Edit
},
'User': {
'View': RenderFieldValueDefault,
'DisplayForm': SPFieldUser_Display,
'EditForm': SPClientPeoplePickerCSRTemplate,
'NewForm': SPClientPeoplePickerCSRTemplate
},
'UserMulti': {
'View': RenderFieldValueDefault,
'DisplayForm': SPFieldUserMulti_Display,
'EditForm': SPClientPeoplePickerCSRTemplate,
'NewForm': SPClientPeoplePickerCSRTemplate
},
'DateTime': {
'View': RenderFieldValueDefault,
'DisplayForm': SPFieldDateTime_Display,
'EditForm': SPFieldDateTime_Edit,
'NewForm': SPFieldDateTime_Edit
},
'Attachments': {
'View': RenderFieldValueDefault,
'DisplayForm': SPFieldAttachments_Default,
'EditForm': SPFieldAttachments_Default,
'NewForm': SPFieldAttachments_Default
}