{"id":576,"date":"2015-04-21T03:45:16","date_gmt":"2015-04-21T09:45:16","guid":{"rendered":"http:\/\/www.idubbs.com\/blog\/?page_id=576"},"modified":"2017-06-14T16:56:25","modified_gmt":"2017-06-14T22:56:25","slug":"js-link-and-csr","status":"publish","type":"page","link":"https:\/\/www.idubbs.com\/blog\/js-link-and-csr\/","title":{"rendered":"JS Link and CSR"},"content":{"rendered":"<p>Just wanted to keep all the content on this blog and other sources in order and easier to find.<\/p>\n<p>Posts (this site)<\/p>\n<ul>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2016\/js-link-in-sharepoint-choose-your-path-forward\/\">JS Link in SharePoint &#8211; Choose your Path Forward<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2016\/the-future-of-sharepoint-without-csr-and-js-link\/\">The Future of SharePoint &#8211; Without(?) CSR and JS Link<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2014\/js-link-hello-world\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLink &#8211; Hello World <\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2012\/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLink &#8211; for SharePoint 2013 Web parts &#8211; A Quick Functional Primer<\/a> (kind of out of date, but with some interesting background info)<\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2015\/jslink-csr-to-override-there-are-no-items-to-show-in-this-view\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLink &#8211; CSR to Override &#8220;No Items to show in view&#8221;<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2014\/js-link-using-csr-for-kpis\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLink &#8211; Using CSR for KPIs<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2014\/js-link-highlighting-a-row-with-csr\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLink &#8211; Highlighting a Row with CSR<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2014\/js-link-csr-view-conditional-formatting\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLink &#8211; CSR View Conditional Formatting<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2014\/js-link-csr-simple-view-field-formatting\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLink &#8211; CSR Simple View Field Formatting<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2012\/finding-internal-names-for-sharepoint-list-columns\/\" target=\"_blank\" rel=\"noopener noreferrer\">Finding Internal Names for SharePoint List Columns<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2015\/using-jquery-for-csr\/\">Using jQuery for CSR<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2015\/display-links-to-sharepoint-item-attachments-using-csr\/\" target=\"_blank\" rel=\"noopener noreferrer\">Display Links to SharePoint Item Attachments using CSR<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2015\/jslink-using-the-lookup-column-with-csr\/\">JSLink &#8211; Using the Lookup Column with CSR<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2015\/jslink-using-the-person-column-with-csr\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLink &#8211; Using the Person Column with CSR<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2016\/jslink-filter-on-a-lookup-column-with-csr\/\">JSLink &#8211; Filter on a Lookup Column with CSR<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2017\/js-link-creating-custom-links\/\">JSLink &#8211; Creating Custom Links<\/a><\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/2017\/js-link-add-ellipsis-to-a-column\/\">JSLink &#8211; Add Ellipsis to a Column<\/a><\/li>\n<\/ul>\n<p>Templates and Examples (Files)<\/p>\n<ul>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/wp-content\/uploads\/2017\/06\/CSR_AddEllipsis.js\" target=\"_blank\" rel=\"noopener\">CSR_AddEllipsis.js<\/a> &#8211; Sample for adding the ellipsis menu to other columns (other than Title)<\/li>\n<li><a href=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/04\/CSR_TextInline.js\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_TextInline.js<\/a>\u00a0&#8211; Simple text field override<\/li>\n<li><a href=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/04\/CSR_TextInline_Clean.js\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_TextInline_Clean.js<\/a> &#8211; Cleaner file without all the different HTML options<\/li>\n<li><a href=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/04\/CSR_TextInline_Multiple.js\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_TextInline_Multiple.js<\/a> &#8211; See the syntax difference between one and more columns<\/li>\n<li><a href=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/04\/CSR_TextString.js\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_TextString.js<\/a>\u00a0&#8211; Building an override string<\/li>\n<li><a href=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/04\/CSR_TextArray.js\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_TextArray.js<\/a>\u00a0&#8211; Building an override string using the &#8216;push&#8217; array approach<\/li>\n<li><a href=\"http:\/\/wp.me\/agWQ1-8i\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_CondFormatField.js<\/a> &#8211; Conditional formatting for text field override<\/li>\n<li><a href=\"http:\/\/209.95.55.158\/~idubbsco\/blog\/wp-content\/uploads\/2015\/04\/CSR_EmptyList.js\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_EmptyList.js<\/a>\u00a0&#8211; Override the message displayed by a web part when there are no items in the view<\/li>\n<li><a href=\"http:\/\/wp.me\/agWQ1-a9\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_ColumnHeader.js<\/a>\u00a0&#8211; Override the header text for view columns &#8211; Crude method (uses column number order)<\/li>\n<li><a href=\"http:\/\/wp.me\/agWQ1-aa\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_ColumnHeader2.js<\/a> &#8211; The better way to override headers (uses column names)<\/li>\n<li>CSR_HideColumn.js &#8211; Sample for hiding a column [requires jQuery]<\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/?attachment_id=624\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_CustomLinks.js<\/a>\u00a0&#8211; Build links to forms using the ID field<\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/?attachment_id=611\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_ViewAttach.js<\/a> &#8211; Used for displaying list attachments in a list view (<a href=\"http:\/\/www.idubbs.com\/blog\/2015\/display-links-to-sharepoint-item-attachments-using-csr\/\" target=\"_blank\" rel=\"noopener noreferrer\">post <\/a>listed above)<\/li>\n<li><a href=\"http:\/\/wp.me\/agWQ1-ad\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_ClearLookup.js<\/a> &#8211; Display Lookup value but remove the URL link from a Lookup column<\/li>\n<li><a href=\"http:\/\/www.idubbs.com\/blog\/wp-content\/uploads\/2016\/08\/CSR_LookupSelfFilter.js\">CSR_LookupSelfFilter.js<\/a> &#8211; Filters a view (current page) by clicking the lookup value<\/li>\n<li><a href=\"http:\/\/wp.me\/agWQ1-ag\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_Utility.js<\/a> [Dev]\u00a0&#8211; This is v1&#8230; Currently\u00a0under construction &#8211; by <a href=\"https:\/\/twitter.com\/iwkid\" target=\"_blank\" rel=\"noopener noreferrer\">Raymond Mitchell <\/a><\/li>\n<li><a href=\"http:\/\/wp.me\/agWQ1-af\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_ HideColumnUtility.js<\/a> &#8211; Example using CSR_Utility.js to hide columns &#8211; by <a href=\"https:\/\/twitter.com\/iwkid\" target=\"_blank\" rel=\"noopener noreferrer\">Raymond Mitchell <\/a><\/li>\n<li><a href=\"http:\/\/wp.me\/agWQ1-ai\" target=\"_blank\" rel=\"noopener noreferrer\">CSR_AdRotate1<\/a> &#8211; Used on spstc.com (can&#8217;t recall where source code originated from&#8230;)\u00a0 &#8211; from <a href=\"https:\/\/twitter.com\/iwkid\" target=\"_blank\" rel=\"noopener noreferrer\">Raymond Mitchell<\/a><\/li>\n<\/ul>\n<p>Presentations and Recordings<\/p>\n<ul>\n<li><a href=\"http:\/\/channel9.msdn.com\/events\/SharePoint-Conference\/2014\/SPC318\" target=\"_blank\" rel=\"noopener noreferrer\">(SPC14) Client-Side Rendering Demystified\u00a0 SPC318<\/a><\/li>\n<li>(SPC12) <a href=\"http:\/\/search.channel9.msdn.com\/content\/result?sid=39738f6c-585c-495c-a31c-5de28643989b&amp;rid=4f7836ae-2a54-49c6-9bbb-a21300e6ef19\" target=\"_blank\" rel=\"noopener noreferrer\">Customizing Sites and Pages in SharePoint 2013<\/a><\/li>\n<li>SharePoint Saturday Twin Cities (Oct. 2015)\u00a0&#8211; Client-Side Rendering (CSR) Practical Examples, Tips and Tricks<\/li>\n<\/ul>\n<p>Microsoft References and Pages<\/p>\n<ul>\n<li>[Coming]<\/li>\n<\/ul>\n<p>Other Blogs and Resources<\/p>\n<ul>\n<li><a href=\"http:\/\/www.n8d.at\/blog\/\" target=\"_blank\" rel=\"noopener noreferrer\">Stefan Bauer&#8217;s Blog<\/a>\n<ul>\n<li><a href=\"http:\/\/www.n8d.at\/blog\/jslink-footer-override-breaks-pagination-of-web-parts\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLink footer override breaks pagination of web parts<\/a><\/li>\n<li><a href=\"http:\/\/www.n8d.at\/blog\/bind-jslink-overrides-to-certain-web-parts-only\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bind JS Link to specific web part<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"http:\/\/www.martinhatch.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Martin Hatch&#8217;s Blog<\/a><\/li>\n<li><a href=\"http:\/\/www.myfatblog.co.uk\/\" target=\"_blank\" rel=\"noopener noreferrer\">Paul Hunt&#8217;s Blog<\/a><\/li>\n<li><a href=\"http:\/\/wendy-neal.com\/2015\/10\/enhance-the-usability-of-your-sharepoint-site-with-jslink-collab365-c365114\/?utm_content=buffer53f86&amp;utm_medium=social&amp;utm_source=twitter.com&amp;utm_campaign=buffer\" target=\"_blank\" rel=\"noopener noreferrer\">Wendy Neal&#8217;s presentation at #Collab365<\/a><\/li>\n<li><a href=\"http:\/\/wendy-neal.com\/2015\/10\/add-a-color-picker-to-your-sharepoint-list-using-jslink\/?utm_content=buffer8be0d&amp;utm_medium=social&amp;utm_source=twitter.com&amp;utm_campaign=buffer\" target=\"_blank\" rel=\"noopener noreferrer\">Wendy Neal &#8211; Add a Color Picker to your SharePoint list with JSLink<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Just wanted to keep all the content on this blog and other sources in order and easier to find. Posts (this site) JS Link in SharePoint &#8211; Choose your Path [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-576","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PgWQ1-9i","_links":{"self":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/pages\/576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"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=576"}],"version-history":[{"count":6,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/pages\/576\/revisions"}],"predecessor-version":[{"id":982,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/pages\/576\/revisions\/982"}],"wp:attachment":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/media?parent=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}