1

First off, I am rather new to CSR so I apologize for anything stupid to come!

This is Sharepoint Online.

I'm trying to use CSR, on a custom page with a filter and list view web part (doc library), to change the url of the Name column to point to the 'new experience' url, which is the 'preview' type function where it opens in browser.

The caveat is that I need it to only affect msg/eml file types, not all files. So here is the code that I have that works for ALL files. I just can't seem to figure out how to edit it to only affect msg/eml files (url changes on those file types but nothing happens on others). I cobbled this together from things I found via internet searches.

Can anyone assist?

Thanks!

(function () { function registerRenderer() { var ctxForm = {}; ctxForm.Templates = {}; ctxForm.Templates = { Fields : { 'LinkFilename': { //------ Change Hyperlink of LinkTitle View : function (ctx) { var url = String.format('{0}', "https://mysite.sharepoint.com/demo/Subdivision%20Files/Forms/AllItems.aspx?viewpath=%2Fdemo%2FSubdivision%20Files%2FForms%2FAllItems%2Easpx&amp;id=%2Fdemo%2FSubdivision%20Files%2F" + ctx.CurrentItem.FileLeafRef + "&parent=%2Fdemo%2FSubdivision%20Files"); return String.format( "<a href='" + url + "'>" + ctx.CurrentItem.FileLeafRef + "</a>" ); } }, } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm); } ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js'); })(); 

1 Answer 1

1

The Client Side Rendering (CSR) is used for rendering list views, list forms and search results.

To only change href for msg and eml file using CSR, you can try the following script. Check the file type from ctx.CurrentItem.File_x0020_Type.

<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> (function () { function registerRenderer() { var ctxForm = {}; ctxForm.Templates = {}; ctxForm.Templates = { Fields : { 'LinkFilename': { //------ Change Hyperlink of LinkTitle View : function (ctx) { //get the original LinkFilename link var html = getDefaultFieldHtml(ctx, ctx.CurrentFieldSchema, ctx.CurrentItem, ctx.ListSchema); //Locate the LinkFilename display text in the html. if(ctx.CurrentItem.File_x0020_Type == "msg" || ctx.CurrentItem.File_x0020_Type == "eml"){ // return new link var url = String.format('{0}', "https://mysite.sharepoint.com/demo/Subdivision%20Files/Forms/AllItems.aspx?viewpath=%2Fdemo%2FSubdivision%20Files%2FForms%2FAllItems%2Easpx&amp;id=%2Fdemo%2FSubdivision%20Files%2F" + ctx.CurrentItem.FileLeafRef + "&parent=%2Fdemo%2FSubdivision%20Files"); return String.format( "<a href='" + url + "'>" + ctx.CurrentItem.FileLeafRef + "</a>" ); }else{ // return the original LinkFilename return html; } } }, } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm); } function getDefaultFieldHtml(renderCtx, field, listItem, listSchema) { //Copy Paste of Jim Browns awesome helper function to return default CSR field rendering var renderingTemplateToUse = null; var fieldRenderMap = { Computed: new ComputedFieldRenderer(field.Name), Attachments: new AttachmentFieldRenderer(field.Name), User: new UserFieldRenderer(field.Name), UserMulti: new UserFieldRenderer(field.Name), URL: new UrlFieldRenderer(field.Name), Note: new NoteFieldRenderer(field.Name), Recurrence: new RecurrenceFieldRenderer(field.Name), CrossProjectLink: new ProjectLinkFieldRenderer(field.Name), AllDayEvent: new AllDayEventFieldRenderer(field.Name), Number: new NumberFieldRenderer(field.Name), BusinessData: new BusinessDataFieldRenderer(field.Name), Currency: new NumberFieldRenderer(field.Name), DateTime: new DateTimeFieldRenderer(field.Name), Text: new TextFieldRenderer(field.Name), Lookup: new LookupFieldRenderer(field.Name), LookupMulti: new LookupFieldRenderer(field.Name), WorkflowStatus: new RawFieldRenderer(field.Name) }; if (field.XSLRender == '1') { renderingTemplateToUse = new RawFieldRenderer(field.Name); } else { renderingTemplateToUse = fieldRenderMap[field.FieldType]; if (renderingTemplateToUse == null) renderingTemplateToUse = fieldRenderMap[field.Type]; } if (renderingTemplateToUse == null) renderingTemplateToUse = new FieldRenderer(field.Name); return renderingTemplateToUse.RenderField(renderCtx, field, listItem, listSchema); } ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js'); })(); </script> 

Testing result:

enter image description here

About how to get the html of original LinkFilename field, refer to the scrip in this thread: Do not apply CSR Override in QuickEdit Mode

1
  • Thank you so much!! This is perfect. I was pulling my hair out on this. Commented Aug 30, 2018 at 13:52

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.