CSR to change item link for certain file types

Question

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&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');

})();

Answer 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:

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