JSLink – CSR to Override “There are no items to show in this view…”

The default message displayed in a view when that view has no items to display is:

“There are no items to show in this view of the [listname] list”.

In most cases this is just fine. When users are working directly in a list this message is consistent with the user experience.

If for whatever reason this text needs to be overridden there isn’t an obvious or simple approach to do this through the UI.

The default text is set within each list behind the scenes. If you were to change the property of the list directly using some custom approaches it would change the message for the list and be seen in all views. Using CSR, we’re going to change what is displayed without changing the core data. This give a few advantages:

  1. We generally don’t want to make permanent customizations if we don’t have to.
  2. Using CSR we can update the message for *each* view as necessary – which might be more appropriate for each use case.  

The bonus here is that it’s REALLY easy using CSR once you’ve figured it out. Smile 

So, here’s how it works:

Note: Normally I don’t add CSR to actual view pages – *especially* the All Items view – but technically you can. I generally use a separate page with a web/app part dropped on the page and apply CSR using JS Link at that point. But for this simple example we use the straight-up view page.

Our view starts out like this:

image

Now, you can take a shortcut by using the Footer override, but this will override both the default message when there are no items in the list *and* be displayed when there are items displayed. Fine if the override is blank, but not useful if you’re actually displaying a message.

overrideCtx.Templates.Footer = “ “;

The more elegant method is to override the default text in the list property SharePoint uses while leaving the logic SharePoint uses to decide when to display the message (No items in the view –> display the text). Within the list schema the property is ‘NoListItem’ and fortunately for us this property is available to us in our CSR JavaScript. In this example we use the OnPreRender override to make the change.

image

Applying this code as JS Link file gives us the following:

image

Pretty slick now that we’ve figured it out.

Thanks again to Raymond Mitchel (@iwkid) for helping with digging through the background details.

8 comments

  1. Hi Wes,

    Interesting post. You write: “Normally I don’t add CSR to actual view pages (…). But for this simple example we use the straight-up view page.” A few paragraphs later you write: “Applying this code as JS Link file gives us the following (…)”. This makes me wonder how you applied the code as a JSLink to the actual view page. Can you explain to me how you did this?

    Kind regards,

    Pieter van der Poort

    1. Pieter,
      Sure. When you are looking at a list, at a particular view – it’s still just a page with a web part on it (see the URL example below). So you can ‘Edit Page’ (from the ‘gear’ icon in upper right of the page), edit the web part, and get to the JS Link property of that web part just like any other page. You do need to have the correct permissions to get the Edit Page option. That’s something to check if you’re not seeing the options you need.

      The URL of a view page looks like this: https://[domain]/sites/%5Bsite collection]/Lists/[ListName]/[ViewName].aspx

      Does that answer your question?

  2. Modified your suggestion to below and that worked for me.

    csrNoListItem = function (ctx) {
    Strings.STS.L_NODOCView = ” No Items to show in this view”;
    };

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.