![\"Smile](\"http:\/\/www.idubbs.com\/blog\/wp-content\/uploads\/2017\/05\/wlEmoticon-smilewithtongueout.png\")
In my opinion, after conditional formatting this is a sweet spot for JS Link use cases and functionally WAY more useful. <\/p>\nI\u2019ve spoken about this topic so many times I keep forgetting that I haven\u2019t put together a decent post on the subject even though I\u2019ve had sample code posted for quite some time (see References below). In my opinion, after conditional formatting this is a sweet spot for JS Link use cases and functionally WAY more useful. <\/p>\n
Disclaimer<\/font><\/strong>: For those of you using SharePoint 2013, this is still relevant content. If you are using SharePoint 2016 or O365 and have PowerApps available and\/or are only using \u2018modern\u2019 pages and views there are other potential solutions for you. <\/p>\n Business-wise, what makes custom links useful is the ability for users to build solutions \u2013 \u2018stitching\u2019 together SharePoint functionality into productive business solutions \u2013 beyond what the out of box lists and libraries provide. <\/p>\n What makes custom links with JS Link in SharePoint so useful is the crossing of a few core bits of functionality in SharePoint \u2013 that we\u2019ll cover in more detail in this article: <\/p>\n You can use CSR to build \u2018web-user-friendly\u2019 vs. \u2018SharePoint-user-friendly\u2019 user interfaces. If all your users are familiar with SharePoint this isn\u2019t a compelling reason. However, for environments where non-office workers (warehouse, production, etc.) are using SharePoint sites and solutions, making the interface intuitive \u2013 making it more \u2018web-friendly\u2019 \u2013 is a compelling reason to look at enhancements like this. For example: <\/p>\n Non-SharePoint users don\u2019t know what the ellipses (\u2026) are. They don\u2019t know they need to click on the \u2018\u2026\u2019 to get a menu for more details, etc. By adding a column with web links to forms, it makes the interface easier to navigate \u2013 the useful links are displayed prominently instead of inside of a menu that needs to be opened first. If you had custom forms this same approach could be used to get the user to those forms instead of the default forms. SharePoint only enables linking to the default forms in the interface. This also gives the solution owner more control over the interface by only displaying the controls they want made available to users. <\/p>\n If you use the SharePoint menu to navigate to the Edit page and look at the URL you will see something like this: <\/p>\n https:\/\/forgegroup.sharepoint.com\/TeamSite\/CSR\/Lists\/DemoList\/EditForm.aspx?ID=1&Source=https%3A%2F%2Fforgegroup%2Esharepoint%2Ecom%2FTeamsite%2FCSR%2FSitePages%2FDemo%2520-%2520Link%2520to%2520Pages%2520and%2520Forms%2Easpx&ContentTypeId=0x01004578E7B0B3F1BE41A0EE6CF023F4518D<\/a><\/p>\n If we break the URL down we get the following: <\/p>\n What we\u2019re doing with the CSR code is creating our own link that will be displayed in an overridden column. The complete sample code can be found in the CSR_CustomLinks.js file. We\u2019ll just look at the key lines here:<\/p>\n In the sample code I\u2019m actually building two links \u2013 \u2018Edit\u2019 and \u2018Details\u2019 in the same column override. <\/p>\n Get creative with this. The link doesn\u2019t have to be to a form for the current list. It could be a view for another<\/em> list with a reference back to the current list. For example you might have a document library where you\u2019re keeping reference documents for a list and use a reference ID field in the document library to connect back to the current list. You could use this CSR approach to build the URL string to a view of the document library and filter it by the reference ID\u2026 Then a user could be looking at the current list and click on a simple link to all the related documents for that item. <\/p>\n I\u2019ve spoken about this topic so many times I keep forgetting that I haven\u2019t put together a decent post on the subject even though I\u2019ve had sample code posted for […]<\/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":[4,10,11,13,14,21],"tags":[52,129,79,130],"class_list":["post-964","post","type-post","status-publish","format-standard","hentry","category-js-link","category-office365","category-sharepoint","category-sharepoint-2013","category-sharepoint-2016","category-sharepoint-online","tag-csr","tag-links","tag-sharepoint-designer","tag-source"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pgWQ1-fy","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts\/964","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=964"}],"version-history":[{"count":1,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts\/964\/revisions"}],"predecessor-version":[{"id":965,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/posts\/964\/revisions\/965"}],"wp:attachment":[{"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/media?parent=964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/categories?post=964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idubbs.com\/blog\/wp-json\/wp\/v2\/tags?post=964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
User Experience Tweaking<\/h3>\n
![\"image\"](\"http:\/\/www.idubbs.com\/blog\/wp-content\/uploads\/2017\/05\/image-6.png\" "\\"image\\"")
<\/a><\/p>\n<\/a><\/p>\nHow-To<\/h3>\n
\n
This is the URL for the form page<\/li>\n
This is the parameter passed in that tells the form which item ID in the list to display<\/li>\n
This tells SharePoint where to navigate when the form is submitted or cancelled \u2013 essentially where the user ends up next. This can be VERY useful when building your own solution. <\/li>\n
Finally, this is the content type for the item in the list. We aren\u2019t using this information for our example. <\/li>\n<\/ul>\n<\/a><\/p>\n\n
Notes<\/h3>\n
\n
<\/a>
Replacing the \u2018Edit\u2019 text with an HTML image tag linking to your image file. <\/li>\nReferences<\/h3>\n
\n
(Thanks Tamara Bredemus for that suggestion!) <\/li>\n