Custom Status Indicator Column in JSLink attached to Content Type?

Question

I'm looking to add a custom Status Indicator column to records within a document library, which would show an image depending on a field's value. "Pass = Tick.jpg", "Fail = Cross.jpg", that kind of thing. I'm currently trying to do this with JS Link, and I have a couple of questions about implementation.

Firstly, is there a way to make sure the Template override appears in all iterations of the column? I want it to appear in web parts and the list view, but not necessarily forms.

Secondly, I'd like to include the column for the Status Indicator in different Content Types. Is this possible so my custom status images appear site-wide?

Thirdly, Can this override be applied in a way that it automatically applies to new sub-sites created, where the same column/content types appear?

Basically, I'm trying to apply my JS Link as a blanket rule if possible. In plain text, the behaviour should be "Wherever this column appears in the site (and sub-sites), replace the text with a correspoinding image".

I'm just beginning with JS Link, so any links to explainers/feature lists would be useful too. Thanks!

Answer 1

Just to expand a bit on what Danny is saying in his answer:

Yes, JSLink is the technology you use to "attach" a JavaScript file to something in SharePoint. That "something" could be many things - typically through the UI you see it in the web part settings for List View Web Parts or Form web parts.

However, other "things" in SharePoint also have a JSLink property, and specifically relevant to your question, site columns have a JSLink property.

If you are defining your column declaratively with CAML, you can set the JSLink attribute this way:

<Field ID="{8C7EF15E-264E-4766-BDC9-405CD1D5985B}"
       Name="MyField"
       DisplayName="My Field"
       Type="Text"
       JSLink="~sitelayouts/Path/To/My/CSRScript.js"
       Group="My Custom Columns" />

If you have created your fields through the UI, you would need to use Powershell to set the JSLink property, but it can be done.

Here's a good article that shows a few ways to set JSLink properties.

So the point is, if you create your site column at the site collection level, and set the JSLink property of that top level site column to attach your script, then yes, the script will follow that column around wherever it is used - in any content types, and in any subsites.

As far as whether your CSR override will be applied in list views vs. forms, that is done within the CSR script itself. Typically CSR scripts are structured like this:

var renderingOverride = {};
renderingOverride.Templates = {};
renderingOverride.Templates.Fields = {    
    'MyFieldInternalName': { 
        View: functionToRenderInListViews,
        DisplayForm: functionToRenderInTheDisplayForm,
        EditForm: functionToRenderInTheEditForm,
        NewForm: functionToRenderInTheNewForm
    } 
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(renderingOverride);

So yes, you absolutely can specify how the field is rendered in each of the different forms and in list views.

Here is a great primer on Client Side Rendering.

Answer 2

Yes,

Yes,

Yes,

But let's start with the Basics... You are doing CSR (Client Side Rendering) not JSLink

JSLink is the technology to link a scriptfile to a WebPart.
This can be any JS file (or even loading jQuery from a CDN) it doesn't have to be a CSR file

Instead of linking your CSR file with JSLink you can load your CSR file as a UserCustomAction.

That way it gets executed on every page. Your Field Overrides are applied everywhere the internal name is used:

Yes, a User Custom Action executes on every page

Yes, Field Overrides work by Internal names

Yes, A SiteCollection scoped UserCustomAction will execute on every page in the SiteCollection. A Web Scoped UCA will only execute within one site and not its subsites

---

• https://github.com/andrei-markeev/cisar
  makes CSR editing a breeze, but it creates JSlinks

• https://github.com/tavikukko/Chrome-SP-Editor
  Will help create UserCustomActions (link them to the files created with Cisar)

---

Note: CSR, JSLink , UserCustomActions will not work in SharePoint Online "Modern" Experiences. Microsoft disabled all branding