tag:blogger.com,1999:blog-4126985520350746834.post6061333832364999070..comments2024-03-28T07:00:21.554+00:00Comments on Chris O'Brien: Using JSLink to change the UI of a SharePoint list/viewChris O'Brienhttp://www.blogger.com/profile/10022906552670607366noreply@blogger.comBlogger27125tag:blogger.com,1999:blog-4126985520350746834.post-32546579836086665732016-05-19T09:55:52.216+01:002016-05-19T09:55:52.216+01:00Thank you Chris. Always better than Microsoft Docu...Thank you Chris. Always better than Microsoft Documentation :)Ova (Excuse My Reading)https://www.blogger.com/profile/06272388401733786586noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-71541512172555515472014-05-06T04:04:51.103+01:002014-05-06T04:04:51.103+01:00Thanks Chris,
I checked with Paul on this and trie...Thanks Chris,<br />I checked with Paul on this and tried his solution. Worked out just fine.aackosehttps://www.blogger.com/profile/05299509034057789026noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-32385078131004097822014-05-05T11:47:34.578+01:002014-05-05T11:47:34.578+01:00@aackose,
It's a good question - the only app...@aackose,<br /><br />It's a good question - the only approach I really know about is to add some conditional logic to your display template JavaScript. You could either "mess with" the BaseViewID, or perhaps look for the list title in your JS method - both techniques are written about by Paul Hunt at <a href="http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues-with-jslink-and-display-templates-a-solution/" rel="nofollow">ListView Web Part issues with JSLink and Display Templates – A solution?</a>.<br /><br />HTH,<br /><br />Chris. Chris O'Brienhttps://www.blogger.com/profile/10022906552670607366noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-36173219979611162022014-04-29T16:10:52.270+01:002014-04-29T16:10:52.270+01:00Hi Chris,
Great Post and happy to see MS moving m...Hi Chris,<br /><br />Great Post and happy to see MS moving more towards Client Side Rendering & scripting. <br /><br />I was trying to add multiple List View Webparts in the same page pointing to different lists. ex. A Menu List, an Accordion List & a Link list. And use different Js files for JsLink to render them differently. ex. Accordion list will render the list with accordion functionality, menu list will render the list items to construct a Mega Menu etc.<br /><br />When i load each of the List View independently, Js link works fine. However, when i load them all at once in the page, the first list view appear to work fine but the next two behaves similar. ex. I ended up having Link List working fine, but the menu list and Accordion list behaving like an accordion.<br /><br />Somehow, i could see that as the BaseViewID changes, it was working fine.<br /><br />Have you faced any such issue with multiple List View on the same page using different JsLink files?aackosehttps://www.blogger.com/profile/05299509034057789026noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-13887935632780537172014-02-04T21:57:44.239+00:002014-02-04T21:57:44.239+00:00@aruna g,
No, afraid I haven't tried SPConten...@aruna g,<br /><br />No, afraid I haven't tried SPContentType.JSLink. Good luck :)<br /><br />Chris.Chris O'Brienhttps://www.blogger.com/profile/10022906552670607366noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-65739492219056552602014-01-30T13:17:53.689+00:002014-01-30T13:17:53.689+00:00Chris, it is a great post. Have you tried to updat...Chris, it is a great post. Have you tried to update a ContentType JSlink property programmatically. Akkihttps://www.blogger.com/profile/16830180220215449098noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-12115192049777668312014-01-10T02:36:48.013+00:002014-01-10T02:36:48.013+00:00Chris,
I was wondering if you have had any luck em...Chris,<br />I was wondering if you have had any luck embedding web parts in page layouts and using the jslink property?<br /><br />I've got a web part which works when its added and configured (with jslink) to a web part zone but I'm trying to embed it in a page layout using the Design Manager feature. The web part renders in the pages that use the page layout but the jslink file is not getting loaded/processed.<br /><br />Cheers,<br />BrettBRM013https://www.blogger.com/profile/12906505322366574327noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-2147447180679151462013-09-02T21:55:21.687+01:002013-09-02T21:55:21.687+01:00Hi Chris,
I blogged a while back on an issue when...Hi Chris,<br /><br />I blogged a while back on an issue when registering Display Templates using JSLink when there is more than 1 list view web part sourced from the same ListTemplateID and Base view ID resulting in all list views receiving the rendering.<br /><br />I found a client side resolution for that and have blogged on it.<br /><a href="http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues-with-jslink-and-display-templates-a-solution/" rel="nofollow">It's on my blog here.</a>Paul Hunthttp://www.myfatblog.co.uknoreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-28286330655098065092013-07-05T23:16:26.464+01:002013-07-05T23:16:26.464+01:00@Paul,
Ah excellent, thanks. I'd been meaning...@Paul,<br /><br />Ah excellent, thanks. I'd been meaning to spend time digging into the MDS issue.<br /><br />Cheers!<br /><br />Chris.Chris O'Brienhttps://www.blogger.com/profile/10022906552670607366noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-81647148161556006642013-07-05T18:15:10.682+01:002013-07-05T18:15:10.682+01:00Just to add a little note, I hit the MDS issue too...Just to add a little note, I hit the MDS issue too, then found this nugget on the Developers blog for SharePoint. It describes how to register your script for MDS enabled or disabled sites.<br /><br />http://blogs.technet.com/b/sharepointdevelopersupport/archive/2013/02/08/register-csr-override-on-mds-enabled-sharepoint-2013-site.aspxPaul Hunthttp://www.myfatblog.co.uknoreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-6215168175347734192013-06-25T16:29:25.817+01:002013-06-25T16:29:25.817+01:00I am noticing the same thing that you are experien...I am noticing the same thing that you are experiencing with the MDS. If I turn the feature off it works fine, with it on it intermittently doesn't work, mostly when going from one view to another. Any new information on configurations for this?Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-66208119089023322372013-03-27T12:10:41.110+00:002013-03-27T12:10:41.110+00:00Hi Chris I knew I could rely on your blog to dig m...Hi Chris I knew I could rely on your blog to dig me out of a hole. Great Blog ! I have managed to get this to work on O365 public web site by manually deploying everything to that same place as you did with VS2012. The only issue I had was in the AccordianListView.js last function ($(document).ready(function () )threw a '$' is undefined error so I put into the Pagelayout in the PlaceHolderAdditionalPageHead content placeholder after the script inclusions for the JQuery files. It all then burst into life.<br /><br />Regards<br /><br />NigelNigelhttp://blog.njpenterprises.com/blognoreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-46724314824427133062013-03-14T15:33:09.028+00:002013-03-14T15:33:09.028+00:00Thanks for the nice article !!
Our requirement fo...Thanks for the nice article !!<br /><br />Our requirement for a SharePoint 2013 app is to render the UI of the list view as a Kendo UI grid, such that users can perform filtering, sorting, grouping and other features provided by kendo grid at the UI itself. The columns will be added by users in the list view at runtime and the same needs to appear automatically in the Kendo UI grid too.<br /><br />Using JSLink property, I am able to change the appearance of how a particular field renders inside list view. Is it possible to change the appearance of complete list view to render as Kendo UI grid, using the JSLink property. Looking for ideas on how to achieve the same.Amitnoreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-27065644815426627582013-02-15T22:51:33.640+00:002013-02-15T22:51:33.640+00:00And while this covers the developer side of things...And while this covers the developer side of things, you can also implement changes using the JS Link web part property without using Visual Studio. <br /><br />http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/<br /><br />Wes Preston<br />Wes Prestonhttp://www.idubbs.com/blognoreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-6247010161173773752013-02-13T16:22:14.552+00:002013-02-13T16:22:14.552+00:00All,
Just to confirm the main download link was u...All,<br /><br />Just to confirm the main download link was updated with the fix.<br /><br />Thanks,<br /><br />Chris.Chris O'Brienhttps://www.blogger.com/profile/10022906552670607366noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-21663318793464465092013-02-13T15:54:09.372+00:002013-02-13T15:54:09.372+00:00@Anonymous (both),
Oops - sorry, you're right...@Anonymous (both),<br /><br />Oops - sorry, you're right! There was originally an error in the JavaScript which got uploaded - this has now been fixed in the code sample within the article. I'll update the full project download tonight.<br /><br />Apologies for the inconvenience!<br /><br />Thanks,<br /><br />Chris.<br /><br />Chris O'Brienhttps://www.blogger.com/profile/10022906552670607366noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-36426835046793668422013-02-11T06:11:58.362+00:002013-02-11T06:11:58.362+00:00Hi Chris,
once again a great post from your side w...Hi Chris,<br />once again a great post from your side with the complete code help. I deployed the code provided by you in your post, not working in IE8 :( can you help, also h2-tag and b-tag not working for me.<br />Please help.<br />Thanks for your help.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-4350526803652787892013-02-10T06:49:30.824+00:002013-02-10T06:49:30.824+00:00Hi @Chris,
I copied your solution and deployed the...Hi @Chris,<br />I copied your solution and deployed the solution on my new SharePoint 2013 site. I am getting this error : window.COB is undefined<br />Source File: http://siteURL/siteassets/accordionlistview.js?ctag=1$$15.0.4420.1017<br />Line: 7<br />Please help me in this! Thanks in Advace.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-32062122774264641012013-02-06T23:13:25.128+00:002013-02-06T23:13:25.128+00:00@Miron,
Absolutely - you would just need to set t...@Miron,<br /><br />Absolutely - you would just need to set the SPList.JSLink property to point to your JS file (and register the templates in your JS). Check out the 'Modifying an existing list' item in the Scenarios table above.<br /><br />Good luck!<br /><br />Chris.Chris O'Brienhttps://www.blogger.com/profile/10022906552670607366noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-16192038199360154102013-02-06T23:11:33.559+00:002013-02-06T23:11:33.559+00:00@Lam,
OK, sounds like I'm not the only one se...@Lam,<br /><br />OK, sounds like I'm not the only one seeing this - appreciate the confirmation. I'm going to close my eyes for a bit and hope my inbox brings news of an update very soon ;)<br /><br />I'll update the article if I hear anything, but would also love to hear from anyone else who discovers something here.<br /><br />Thanks,<br /><br />Chris.Chris O'Brienhttps://www.blogger.com/profile/10022906552670607366noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-36692772879627992112013-02-06T21:07:07.298+00:002013-02-06T21:07:07.298+00:00Hi Chris!
This is really good stuff. Thanks for t...Hi Chris!<br /><br />This is really good stuff. Thanks for the pedagogical explanation!<br /><br />You use a customizable list. I have a standard non-customizable list: Announcements. Is it possible to add a JSLink to my list? <br /><br />AnatolyAnatoly Mironovhttps://www.blogger.com/profile/04862610800053749908noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-40163814980665202592013-02-06T20:16:33.649+00:002013-02-06T20:16:33.649+00:00Hi Chris,
Just a confirmation that if MDS is acti...Hi Chris,<br /><br />Just a confirmation that if MDS is activated on the site, the JavaScript does not work when I tried to switch to different List views. I tried to delete cache in IE but it doesn't help. This also true for any Javascript one would use in CEWP. I have not tried it with the new SP App yet.<br /><br />Hope this is a bug and not a "work as design", as it would make MDS almost unusable in many installations.<br /><br />Thanks for the article.Lam Lenoreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-14950957800183605292013-01-29T16:05:03.363+00:002013-01-29T16:05:03.363+00:00Yes Chris, you are absolutely right. In my case, I...Yes Chris, you are absolutely right. In my case, I wanted a "one-piece" solution - so that if needed could be published to the store and run standalone.<br /><br />Regards,<br />C:\>MariusAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-92224294127150586272013-01-27T23:02:18.329+00:002013-01-27T23:02:18.329+00:00@Nettitude,
Nice. I'm guessing your stuff is ...@Nettitude,<br /><br />Nice. I'm guessing your stuff is all happening in the app web - in my case, I wanted the list to reside in a team site which is why I chose the sandbox route. I'm sure the implementations are very similar though.<br /><br />Good stuff!<br /><br />C.Chris O'Brienhttps://www.blogger.com/profile/10022906552670607366noreply@blogger.comtag:blogger.com,1999:blog-4126985520350746834.post-6799318126465223202013-01-27T20:52:09.721+00:002013-01-27T20:52:09.721+00:00Hi Chris,
I've created a similar example, how...Hi Chris,<br /><br />I've created a similar example, however deploying the actual list, instance and resources (jquery libs and CSS) in a SharePoint-hosted app, which actually get load via Custom Actions. This should solve the need to change the AlternateCSS and no Sandbox solution needed either. Actually, no compiled code is deployed.Anonymousnoreply@blogger.com