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

How To: Create Hyperlink to Modal Pop-Up Form

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…) I basically took the code directly from the “Add new item” and the “Add Document” link within the list view. What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page. This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name. Full Code For a List Item: <a onclick="javascript:NewItem2(event, &quot
27 comments
Read more

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 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