Skip to main content

SharePoint 2013 Display Templates Overview

SharePoint 2013 Display templates are one of the many new features in SharePoint 2013 Publishing site Design Manager.

In the following video blog I walk you through creating a mocked up wireframe that includes a image rotator, document, blog post, and task query. I created a custom Page layout and also walked through the process of customizing and creating your own display template. This is all possible with the use of the new Content Search Web Part.

Enjoy!

Labels:

Comments

Erik said…
What an excellent video! Thanks for posting this. I look forward to using the content search web part in the near future.
January 14, 2013 at 1:57 PM
Anonymous said…
This is an awesome video. Thanks for that..I also have another question which is not relating to this video. What is the best way to do SharePoint 2013 Foundation branding?? If you could please share your experience that would be great. Thanks, will wait for your reply.
January 17, 2013 at 9:37 AM
Unknown said…
I am William..I just browsing through some blogs and came across yours! Excellent blog, good to see someone actually uses for quality posts.Your site kept me on for a few minutes unlike the rest :) Keep up the good work!Thanks for sharing a important information on http://www.bigclasses.com/microsoft-sharepoint-online-training.html
January 29, 2013 at 8:59 AM
Anonymous said…
its not more complicated but wildcard people are usually serch few thing about Sharepoint 2013,one thing is that new functionality is not fully working page is in edit mode duw to some extra encoding of the query string in edit mode.
February 15, 2013 at 5:55 AM
Anonymous said…
Hi Erik, I've watched your video, and near the end when you goto in SharePoint designer 'All Files > _catalogs > masterpage > Display Templates> Content Web Parts' the video displays .js files and .html files. However whenever I look in any of the Display Template folders I only see .js files. This is the same if I navigate to the Master Page Gallery within SharePoint site itself. It's as if I have a filter on, but it's pretty much a new on-prem instance of SharePoint 2013. Do you have any ideas why this is? I've checked both farms I've created and the same happened in both. Both site are using HNSC paths (don't know if that's makes a difference, but I doubt it).
February 19, 2013 at 9:07 AM
Anonymous said…
I've worked out that if I use publishing site, or turn the publishing feature on, the HTML files are created. Can you confirm that the Display Templates are for publishing sites only?
February 19, 2013 at 10:08 AM
Erik Swenson said…
Hey Paul, You are correct I should have stated that more clearly. But the display templates and the Design Manager is only available if you create a Publishing Portal site collection or if you enable the publishing infrastructure on the site collection. Thanks for following my posts and reviewing the videos. I should have more soon.

Erik S.
February 19, 2013 at 10:13 AM
Unknown said…
Do you know how to work around the 50 item limit?
March 5, 2013 at 3:42 PM
Unknown said…
Erik, thanks for your videos, it always helps me to see and hear when learning a new subject. Your videos are much appreciated!

I have a question, I've put together a web part page with a Content search slideshow on top, then three content search WPs below it showing some two line displays. Mine doesn't look nearly as smooth as yours though. I have a large gap between the rows. Did you use custom CSS in your page layout?
March 26, 2013 at 10:05 PM
Unknown said…
You r the Best Eric..... Thank you
May 20, 2014 at 1:50 PM
Post a Comment

Popular posts from this blog

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class. I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover. Ribbon Row Table Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu Workspace Body Container Title Row Title ...
112 comments
Read more

SharePoint 2010 Content Query for Blog Posts

I hope this post will help many of you feel comfortable with using the Content Query Web Part. In this post I will walk you through the process of creating a content query web part and configuring it to show custom field types. I will also give details on how to use XSLT to stylize and format the data being pulled. I will be using the following scenario as an example. Say that you had a site collection with a top level publishing site. This publishing site would display a the most recent blog posts from all blog sites within its own site collection. To solve this problem we will use a Content Query Web Part and a customized ItemStyle.xsl using XSLT. Please note that the “SharePoint Server Publishing Infrastructure” needs to be enabled at the site collection to display the content query web part. Step 1: Add a Content Query Web Part to Page Navigate to the site that you want the blog posts to show up and click on edit page. Under Editing Tools in the Ribbon, Click on ...
79 comments
Read more

SharePoint 2013 Responsive Table Columns

I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts. SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way! In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document? Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displ...
17 comments
Read more