{"id":571,"date":"2015-01-14T01:51:02","date_gmt":"2015-01-14T07:51:02","guid":{"rendered":"http:\/\/www.idubbs.com\/blog\/?p=571"},"modified":"2015-01-14T01:51:02","modified_gmt":"2015-01-14T07:51:02","slug":"jslink-csr-to-override-there-are-no-items-to-show-in-this-view","status":"publish","type":"post","link":"https:\/\/www.idubbs.com\/blog\/2015\/jslink-csr-to-override-there-are-no-items-to-show-in-this-view\/","title":{"rendered":"JSLink \u2013 CSR to Override \u201cThere are no items to show in this view\u2026\u201d"},"content":{"rendered":"

The default message displayed in a view when that view has no items to display is: <\/p>\n

\u201cThere are no items to show in this view of the [listname] list\u201d. <\/p>\n

In most cases this is just fine. When users are working directly in a list this message is consistent with the user experience. <\/p>\n

If for whatever reason this text needs to be overridden there isn\u2019t an obvious or simple approach to do this through the UI. <\/p>\n

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

    \n
  1. We generally don\u2019t want to make permanent customizations if we don\u2019t have to. <\/li>\n
  2. Using CSR we can update the message for *each* view as necessary \u2013 which might be more appropriate for each use case.   <\/li>\n<\/ol>\n

    The bonus here is that it\u2019s REALLY easy using CSR once you\u2019ve figured it out. \"Smile\" <\/p>\n

    So, here\u2019s how it works: <\/p>\n

    Note: Normally I don\u2019t add CSR to actual view pages \u2013 *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. <\/p>\n

    Our view starts out like this: <\/p>\n

    \"image\"<\/a><\/p>\n

    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\u2019re actually displaying a message. <\/p>\n

    overrideCtx.Templates.Footer = \u201c \u201c; <\/p>\n

    The more elegant<\/em> 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 \u2013> display the text). Within the list schema the property is \u2018NoListItem\u2019 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. <\/p>\n

    \"image\"<\/a><\/p>\n

    Applying this code as JS Link file gives us the following: <\/p>\n

    \"image\"<\/a><\/p>\n

    Pretty slick now that we\u2019ve figured it out. <\/p>\n

    Thanks again to Raymond Mitchel (@iwkid) for helping with digging through the background details. <\/p>\n","protected":false},"excerpt":{"rendered":"

    The default message displayed in a view when that view has no items to display is: \u201cThere are no items to show in this view of the [listname] list\u201d. In […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[33,4,10,11],"tags":[],"class_list":["post-571","post","type-post","status-publish","format-standard","hentry","category-client-side-rendering-csr","category-js-link","category-office365","category-sharepoint"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pgWQ1-9d","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts\/571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/comments?post=571"}],"version-history":[{"count":0,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts\/571\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/media?parent=571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/categories?post=571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/tags?post=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}