JSLink and Display Templates Part 7 – Code Samples

Posted on by 2 comments

When I was speaking at the SharePoint Evolutions conference earlier this year I ran into Jeremy Thake (@JThake) and Vesa Juvonen (@vesajuvonen) and they saw the JSLink samples I was running through for the session I had.

Well .. one thing led to another as they say .. and by the time the conference finished I had refactored all of my code and uploaded it to the OfficeDev PnP (Patterns and Practices) GitHub repository.

So you can find all of my sample code in the “Branding.JSLink” section (OfficeDev PnP > Samples > Branding.JSLink).

This includes full documentation, full source code, a compiled deployable WSP package, as well as loads and loads of awesome stuff from the rest of the OfficeDev PnP contributors.

The sample code includes:

  • Re-Render Lookups as bulleted lists and checkboxes
  • Cascading Drop-Downs for Lookup Fields
  • Cascading Drop-Downs for Managed Metadata Fields
  • Google Maps integration (allowing both pin-point and shape selection)
  • Sample colour picker

And here are some tasty screenshots to get you in the mood!

Cascading Lookup Fields, with Checkboxes (multi-select lookups)

Cascading Drop Downs dynamically loaded from a Taxonomy (Managed Metadata Term Set)

Google Maps Thumbnails in List Views

Extensive editing interface for Google Maps fields

Simple Colour formatting

Announcement View as an Accordian

 

Hope you enjoyed the series (sorry it took so long!)

Posted in Uncategorized
  • pulrich

    I just started digging into CSR last week and your tutorials have been invaluable. Precious little information out there on this new tool, but as a reformed designer, I’m really enjoying the flexibility. Looking forward to more!

  • Josh Korn

    Martin, this is most enlightening. Believe it or not, I haven’t needed to know about Display Templates until now, so it’s in for a penny, in for a pound! So here’s my first question:

    Although Part 1 of your series mentions associating a Display Template to a Content Type, I haven’t yet found a single example (or even a single discussion) anywhere – including your example code on GitHub.

    Does this signify that people simply don’t do this?

    I have found a few examples of setting Display Templates on Site Columns, and in fact, that would do sufficiently well for what I need right now. But is there any dark secret involving Content Types that I should know about?

    Josh