we have designed a few custom fields using CSR, TypeScript and React. On our AllItems.aspx, we use this to render a link for a "cross-site" lookup field which is really just a text field holding a lookup value. However, when we load our CSR script using JSLink, the ribbon doesn't get initially rendered. We have to click inside the List View WebPart for it to show up.

This is our script:

import * as $ from "jquery";
import * as React from "react";
import * as ReactDOM from "react-dom";

import { Label } from "office-ui-fabric-react/lib/Label";

class ListViewCSR extends CsrBase {

    constructor() {

    protected getTemplates(): SPClientTemplates.TemplateOverrides {
        let templates: SPClientTemplates.TemplateOverrides = {};


        return templates;

    protected postRender(ctx: SPClientTemplates.RenderContext_FieldInForm) {
        //...PostRender fields

module ListViewModule {
    let form = new ListViewCSR();
    //Even when I comment this out, which will in turn cause the script to stop 
    //loading anything on the list view, the ribbon doesn't render initially.

As you can see in the comments, even when I comment out all code on our CSR script, the ribbon still won't load. So it can't be our code that's causing the problem. We load this script like so:

<JSLink>clienttemplates.js | ~Layouts/SP.CSR/Scripts/vendor.js?v= | ~Layouts/SP.CSR/Scripts/listview.js?v=</JSLink>

enter image description here

1 Answer 1


Ok after some trial and error, I found the cause of the error. Apparently, JSLink tags need to have the Default="TRUE" attribute and be positioned right after the XslLink tag. (Not sure about the positioning above the XslLink tag, but the combination of the two solved my problem)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.