Reference a Snippet


Sample
The snippet is any area of the screen that can be created to represent any portion of a content page, so it literally could look like anything you can create from your set of components.
Name/sitecore/layout/Renderings/Score/Content/Reference a Snippet
Description

The snippet component is used to "pull" content created in the current website's Snippets shared content folder into the current placeholder location. Snippets can be arbitrary parts of the page, so snippets have the ability to violate the placeholder settings rules for content areas of the page and should be used with caution or only by experienced users.

Please read below about certain requirements that the Snippet Component has to its surroundings (layout document, placeholders, and the Snippet Container) to function properly.

TypeController Rendering
Thumbnail
Page Editor View

The snippet placed within the screen renders as a read-only item to the editor. Only the source snippet can be edited.

Experience Editor View is changed for SCORE v3.0

Rendering Parameters

key=/SnippetContainer/Snippet&type=snippet

The rendering parameters passed into the snippet identify two things - first the name of the placeholder key that the reference component will pull from to fetch the snippet contents from the source snippet item page. Second, the type is used to show the user what they are looking at in the read only mode:

Datasource Location

query:ancestor-or-self::*[@@templateid='{1469DFF6-C07C-4EAA-9E07-2D42D996E57E}']/*[@@templateid='{C6EF6188-4880-457B-BF56-F9E8FEC512FE}']

Datasource Template

/sitecore/templates/Score/Base/Snippet

The datasource location of the snippet utilizes a query to find snippets for the current site from shared content. However, there is also a pipeline handler that tells Sitecore to not just look for items of the base Datasource Template type, but also for derived types.

<processor type="Score.Custom.Pipelines.Editor.AddDerivedTemplatesForSelection, Score.Custom" 
           patch:source="zzScore.Snippets.config">
   <templates hint="list:AddTemplateId">
      <template>{BFAFEBB6-319B-42E6-A9AD-0F58F2F4B96F}</template>
   </templates>
</processor>



Requirements

Snippet functionality has certain expectations about snippet's surroundings to function properly:

  • Layout Document and Container Placeholder.
    The layout document used by the Snippet's data template's standard values item should declare a single placeholder - SnippetContainer.

Here's how SCORE scaffolds a layout document for snippets:

...
    <div class="container">
        <div class="row">
            <img src="~/Areas/ScoreBootstrapUI/images/icons/score128snippet.jpg" style="float:left" />
            <h1>Content Snippet</h1>
            <br style="clear:left;" />
        </div>
    </div>

    <div class="pageWrapper">
        @Html.Sitecore().Placeholder("SnippetContainer")
    </div>
...
  • Snippet Container.
    There should be a Snippet Container component bound to the SnippetContainer placeholder. This component declares the actual Snippet placeholder that you will put your components into in the Page Editor. The container also handles customizing your snippet experience (testing it in context of another item and changing the orientation for better editing experience). Here's how a snippet data template's standard values looks like after the scaffolding:

    TBD