This presentation introduces the new WCM features of SharePoint 2013 that web developers/architects can consider when desgining and developing Publishing websites on SharePoint 2013

1. SharePoint 2013
Web Content Management Features for Developers

2. Agenda
• Managed Navigation
• Content Search WP
• Display Templates
• Cross-site Publishing
• Product Catalog
• Demos

3. Managed Navigation
• What ?
o Navigation for Publishing site based on Taxonomy (managed metadata)
• Why ?
o Decouple structure of site from Navigation
o Helps build clean URLs
• How ?
o Choose term Set for Site collection and use additional properties for Navigation
o Can be combined with other features such as Cross site publishing
• Drawbacks
o No version control on terms
o No publishing workflow on terms

4. Managed Navigation

5. Managed Navigation: Pinning
Terms
Term Pinning - New in 2013:
• Pinning is the ability to attach a term to a target
• Similar to Term Reuse in 2010, but is read-only
• Allows to reuse the terms and manage it from one central location
• Example code for pinning terms:
o https://msdn.microsoft.com/EN-US/library/office/jj163273.aspx

6. Managed Navigation: Pinning
Terms

7. Content Search Web Part
• New WP in 2013
• Similar to CQWP, but is based on search
• Has many built-in configuration mechanisms for search query, filter,
etc.
• UI can be customized by ‘Display Templates’

8. Content Search WP

9. Content Search WP

10. Display Templates
• Templates used by search-based web parts to format query results
[Only Search Web Parts can use display templates]
• Controls which properties are shown and how they appear
• Consist of 2 files that are associated:
• HTML version which developer uses
• JavaScript file which SharePoint uses
o Association causes automatic one-way sync from HTML to JS
o Association cannot be broken

11. Display Templates: Types
Two types
• Control templates: Determines the overall structure of how the results
are presented. Includes lists, lists with paging, and slide shows.
• Item templates: Determines how each result in the set is displayed.
Includes images, text, video, and other items.
Built-in Display Templates: https://technet.microsoft.com/en-
us/library/jj944947.aspx

12. Display Templates: Types

13. Display Templates: Customizing
• Start by copying with existing template(HTML) in ‘Display Templates’
folder
o A .js file that has the same name is created in the location where you copied the HTML file.
o All markup required by SharePoint Server 2013 is added to the .js file so that the display template
displays correctly.
o The HTML file and the .js file are associated, so that any later edits to the HTML file are synched to the
.js file when the HTML file is saved.
• Customizing Information: https://msdn.microsoft.com/en-
us/library/office/jj945138.aspx
• Example:
http://blogs.technet.com/b/sharepoint_quick_reads/archive/2013/08/
01/sharepoint-2013-customize-display-template-for-content-by-search-
web-part-cswp-part-1.aspx

14. Cross-site Publishing
• What ?
o One or more authoring site collections to author and store content, and one or more publishing site
collections to control the design of the site and to show the content
• Why ?
o Decouples content from site design
o Helps manage permissions
• How ?
o Enable libraries and lists in author sites as catalogs
o Content tagged with metadata
o Search is used to crawl and display published content
• Drawbacks
o Content not shown until it is indexed
o Term store does not support versioning

15. Cross-site Publishing
1. Content is created in libraries and lists that are shared as catalogs in the authoring site
collection.
2. The search system crawls the content and builds the search index.
3. A user views a page on a publishing site, which triggers queries from Search Web Parts.
4. Results are returned from the search index, and shown in Search Web Parts on the page.

16. Product Catalog
• What ?
o A Site template (for authoring site)
o Has features pre-configured for cross-site publishing and managed navigation
• Why ?
o Helps to setup a Product-centric website
o Reduces the hassle for configuring features and web parts
o Automatically creates Category page and Catalog-item page
• How ?
o Create a ‘Product Catalog’ template site for Author site
o Configure for publishing
o Consume catalog in Publishing site

17. Product Catalog : Example
http://blogs.technet.com/b/tothesharepoint/archive/2013/02/14/how-to-set-up-a-product-centric-web-
site-in-sharepoint-2013.aspx

18. References
• Managed navigation in SharePoint 2013 (https://msdn.microsoft.com/en-
us/library/office/jj163978.aspx)
• Configure Search Web Parts in SharePoint Server 2013
(https://technet.microsoft.com/en-us/library/jj679900.aspx)
• SharePoint 2013 Design Manager display templates
(https://msdn.microsoft.com/en-us/library/office/jj945138.aspx)
• Overview of cross-site publishing in SharePoint Server 2013
(https://technet.microsoft.com/en-us/library/jj635883.aspx)
• How to set up a product-centric website in SharePoint Server 2013
(http://blogs.technet.com/b/tothesharepoint/archive/2013/02/14/how-to-set-up-a-product-centric-web-
site-in-sharepoint-2013.aspx)