Skip to main content

SharePoint 2013 Snippet Gallery Default Items

When I attended the SharePoint conference 2012 a group of dream team SharePoint designers all came together over lunch to chat about design and the new design features within SharePoint 2013. One of the topics of conversation was around the Snippet Gallery and if there was a list of all the standard OOTB snippets. No one knew of any such list so I figured I would take a stab at it. See below the two galleries one for Master Pages and the other for Page Layouts.

Master Page Snippets:
image
Page Layout Snippets:
image

Master Page Snippet Gallery: ~53 Snippets

image

Navigation
Top Navigation: The navigation snippets provide common navigation links and menu items on a site page.
image

Vertical Navigation: The navigation snippets provide common navigation links and menu items on a site page.

Search Box: Place the search box component on your page to allow users to search your site.
image

Administration
Site Title: Using the site title snippet rather than hardcoding the title gives non-designers simple control over the site's brand, which users with administrative permissions can change in Site Settings.

Site Logo: Using the site logo snippet rather than hardcoding the title gives non-designers simple control over the site's brand, which users with administrative permissions can change in Site Settings.

Sign In: Only authenticated users can see the ribbon. To give anonymous users a way to log into your site, insert the sign in snippet, which authenticated users won't see.

Containers
Edit Mode Panel:
To display content, including snippets, to contributing site authors only, place it inside an Edit Mode Panel.

  • Show Only in Edit Mode
  • Show Only in Regular Mode

Security Trim: To display content only to those users who have a specified level of security permissions, you can use a Security Trim Control. Specify one or more permission levels in the Behavior section of this control's properties. You can set it to many common permission levels, including the option to show content to no one but contributing site authors or site administrators. Then, insert the component on your page and place any content - including other SharePoint components - inside of it.

  • Show to Authors
  • Show to Authenticated Users
  • Show to Administrators

Device Channel Panel: A Device Channel Panel displays the content defined within it to one or more specified Device Channels. Device Channel Panels are typically used on Page Layouts to selectively hide certain regions and functionality from or show them to specified channels, and define channel-specific CSS.

Web Parts
Media and Content
Media Web Part: Use to embed media clips (video and audio) in a web page.
Content Editor: Allows authors to enter rich text content.
Get started: This web part displays a set of tiles with common SharePoint actions.
Image Viewer: Displays a specified image.
Page Viewer: Displays another Web page on this Web page. The other Web page is presented in an IFrame.
Picture Library: Use to display a slideshow of images and photos from a picture library.
Script Editor: Allows authors to insert HTML snippets or scripts.
Silverlight Web Part: A web part to display a Silverlight application.

Dynamic Content
Content Query:
Displays a dynamic view of content from your site.
Summary Links: Allows authors to create links that can be grouped and styled.
Table of Contents: Displays the navigation hierarchy of your site.
Timeline: Use this timeline to show a high level view of data from another webpart or tasks list.
Relevant Document: Displays documents that are relevant to the current user.
XML Viewer: Displays documents that are relevant to the current user.
Content Search: Content Search Web Part will allow you to show items that are results of a search query you specify.
Term Property: Displays the specified property of a Term.

Other Web Parts 

  • Blog
    • Blog Notifications
    • Blog Tools
    • Blog Archives
  • Document Sets
    • Document Set Properties
    • Document Set Contents
  • Forms
    • HTML Form Web Part
  • Social Collaboration
    • Site Users
    • User Tasks
  • Search-Driven Content
    • Catalog-Item Reuse
    • Pages
    • Items Matching a Tag
    • Web Pages
    • Pictures
    • Popular Items
    • Recently Changed Items
    • Recommended Items
    • Videos
    • Wiki Pages
  • Search
    • Taxonomy Refinement Panel
    • Refinement
    • Search Results
    • Search Box
    • Search Navigation
  • Forms
    • InfoPath Form Web Part

Custom ASP.NET Markup
Custom ASP.NET Markup:
In the background, we convert your HTML Master Pages and Page Layouts to ASP.NET files. If you have any ASP.NET elements you'd like to include that aren't available in the Snippet Gallery, paste the markup for those elements into the text box below, click the Update button, and paste the resulting HTML Snippet into your page.


Page Layout Snippet Gallery: ~72 Snippets

image

Page Fields

Content Fields 1:

  • Page Image
  • Page Content
  • Summary Links
  • Summary Links 2

Content Fields 2:

  • Content Type
  • Name
  • Title
  • Document Modified
  • Document Created
  • Comments
  • Scheduling Start Date
  • Scheduling End Date
  • Contact
  • Contact E-Mail
  • Contact Name
  • Contact Picture
  • Page Layout
  • Rollup Image
  • Target Audiences
  • Hide physical URLs from search
  • Browser Title
  • Meta Description
  • Meta Keywords
  • Hide from Internet Search Engines

Containers
Web Part Zone:
For site content authors to be able to add, edit, and delete Web Parts on a SharePoint page, add Web Part zones to the Page Layout.

All Other Containers, Web Parts, and Custom ASP.NET Markup are the same for both Master Page and Page Layout.


Looking at this list and what is provided via SharePoint designer or visual studio it is hard to determine if anything was left out. If anything it is easier to add and find the elements that you want to add to your master page or page layout.

I hope this helps!

Comments

Unknown said…
Microsoft Sharepoint 2013

This is the first time I am visiting your site and happy to read this post. This site it is very useful one and gives in depth information. Thanks for this sharing this article.
schuess said…
Hi Erik, Have you ever ran into the issue that even though you add a unique class of your own to the snippet customization CSSClass, update and copy the code into your master page or page layout, publish, that your class never shows up on the rendered page source, thus your styles are never applied? I am seeing this behavior.
Gerardo said…
Hi Erik, Im trying to add a snipped for SearchBox in my HTML converted file, but this control does not showing. Anothers controls like Site Title, TopBarNavigation, works fine, but I having troubles with SearchBox. Has anyone had this problem and can help me?
Thx

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

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

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