Modify the File Name of a SharePoint Document during Upload
If you want to modify the File Name of a SharePoint document during upload, you can implement the following javascript to do so.
When uploading a document to a SharePoint library, the existing file name of the file will be used as the default value for the file name.
In case you want unique file names, the ID of the item can be used to achieve that.
In the following example, the javascript queries the ID of the item and uses it together with the current week day as a prefix to the existing file name.
Components
The JavaScript
The following javascript replaces the value for the file name (the internal name for the field is “FileLeafRef”).
If the schema matches, the file name is read-only, otherwise it can be changed.
Adjust it to your requirements and save it to e.g. the Site Assets library on your SharePoint Site.
The Edit Form
We will use the javascript as a JS Link to the Edit Form.
First you will have to go to the EditForm.aspx by selecting “Default Edit Form” as shown below.
Insert the javascript in the JS Link section.
The link will be: ~site/SiteAssets/ModifyFileName.js
The Result
After the implementation, the javascript will override the file name according your script. In case the schema does not match, the user can adjust the file name.
If the schema matches, the field will be read-only.
Remarks
When you are not presented the Edit Form right after the upload, please check your advanced settings of the document library:
Set the "Allow management of content types?" to "Yes".
In case you modify the javascript, you might not see the changes to be effective right away because of caching. Please reload the affected page by navigating to the EditForm.aspx (e.g. https://yourWebApp/Shared%20Documents/Forms/EditForm.aspx) and using CTRL + F5.
clientforms.js contains the list of default field rendering templates (per field type):
var spfieldCtx = {
Templates: {
Fields: {
'Text': {
'View': RenderFieldValueDefault,
'DisplayForm': SPField_FormDisplay_Default,
'EditForm': SPFieldText_Edit,
'NewForm': SPFieldText_Edit
},
'Number': {
'View': RenderFieldValueDefault,
'DisplayForm': SPField_FormDisplay_Default,
'EditForm': SPFieldNumber_Edit,
'NewForm': SPFieldNumber_Edit
},
'Integer': {
'View': RenderFieldValueDefault,
'DisplayForm': SPField_FormDisplay_Default,
'EditForm': SPFieldNumber_Edit,
'NewForm': SPFieldNumber_Edit
},
'Boolean': {
'View': RenderFieldValueDefault,
'DisplayForm': SPField_FormDisplay_DefaultNoEncode,
'EditForm': SPFieldBoolean_Edit,
'NewForm': SPFieldBoolean_Edit
},
'Note': {
'View': RenderFieldValueDefault,
'DisplayForm': SPFieldNote_Display,
'EditForm': SPFieldNote_Edit,
'NewForm': SPFieldNote_Edit
},
'Currency': {
'View': RenderFieldValueDefault,
'DisplayForm': SPField_FormDisplay_Default,
'EditForm': SPFieldNumber_Edit,
'NewForm': SPFieldNumber_Edit
},
'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
}
}
}
};Further Information
OfficeDev - PnP - Samples - Branding.ClientSideRendering
Andrei Markeev - SharePoint 2013 Client Side Rendering: List Views
Corey Roth - Useful JavaScript to know when working with SharePoint Display Templates (#SPC3000)
