Sitecore

Item and Field Names in Sitecore

Item and Field names in Sitecore might sound like a simple subject, but there are a few options that you may not be aware of.

Item Names

When you create an item in Sitecore it will ask you for a name to give the item. That name then appears in the content tree and at the top of the details pane to identify what your looking at.

It's also used for the URL in the front end of your site.

All fairly basic stuff. However in this example you will see that I've placed a hyphen between "Company" and "News" to make the the URL a little more friendly, rather than having a space or no gap at all. While good for the URL it comes at a sacrifice to the admin experience where a gap would be nicer.

On a multilingual site the URL's are also still using this same name. If your languages are English and US English that may be ok, but if your second language is French then they would probably prefer a URL in French.

Display Names

This is where Display Names come in. By setting a Display Name for your item you can configure a name to show in the admin that contains the space which can also differ per language.

However at this point the URL on the front end of your site will still be "Company News". Through a config setting though you can set Sitecore to use item display names rather than the item name when constructing a URL.

1<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
2  <sitecore>
3    <linkManager>
4      <providers>
5        <add name="sitecore">
6          <patch:attribute name="useDisplayName">true</patch:attribute>
7        </add>
8      </providers>
9    </linkManager>
10  </sitecore>
11</configuration>

Of course at this point your URL will be back to having a space within it.

Field Names

When you define a template in Sitecore you create add a section name and then add a field within that section. All simple stuff, however what you generally find is you have to prefix the name of your fields with the name of the section. This is because when it comes to accessing the field data in code, the sections don't exist and you need a way to avoid having two fields just called "Title" or "Text".

While this solves the issue from a code perspective, for content editors it's far from ideal.

Fortunately there is a solution to this. By navigating to the actual field item within the content tree, we can specify a Title for the field that will be used in the editor rather than its name.

On top of that if you click the Configure tab and select Help, you can enter some help text that will appear next to the field name in the content editor.

Sitecore: Data binding to a datasource rather than the context

By default when you place a Sitecore control. e.g. on a page it will bind to the pages context item even if the rendering has had a Data Source set against it.

MVC - View Renderings

If your Sitecore solution is MVC based and you are using a View Rendering then this is simple. Make sure your view's model is set to Sitecore.Mvc.Presentation.RenderingModel and then pass Model.Item as the item parameter to the Sitecore HTML helper function for rendering a field.

1@using Sitecore.Mvc
2@using Sitecore.Mvc.Presentation
3 
4@model Sitecore.Mvc.Presentation.RenderingModel
5 
6<div>
7    <h2>@Html.Sitecore().Field("Title", Model.Item)</h2>
8    <div>@Html.Sitecore().Field("Content", Model.Item)</div>
9</div>

WebForms - Sublayouts

However if your Sitecore solution is using WebForms with sub-layouts then thing's get a little trickier. Unlike with the View Rendering there is no equivalent of Model.Item so a bit of work is required to get the Data Source Item.

If you check to see if the controls parent is a sublayout, you can then cast it as a sublayout and access the datasource property from their. You will then need to set the Item property of each of the Sitecore Controls in your sublayout. In this example the Sitecore Control is being referenced by controlled in the code.

1Item DataSource;
2if (Parent is Sublayout)
3   DataSource = Sitecore.Context.Database.GetItem(((Sublayout)Parent).DataSource);
4 
5controlId.Item = DataSource;

Bundling and Minification with Sitecore

There's various ways to add bundling and minification to a site, but one of the easiest is to use Microsoft's support from the Microsoft.AspNet.Web.Optimization package. This implementation has some great features including:

  • Automatically create the bundles and minify them as files are changed
  • Create unique urls to each version of a bundle to force browser refreshing of the file
  • Debug mode which outputs links to the raw files rather than the bundled minified version

The functionality is also fully compatible with Sitecore. To use it in your Sitecore solution follow these steps:

1. Add Microsoft.AspNet.Web.Optimization to your project from NuGet. This is the package from Microsoft that contains the functionality to do bundling and minification

 

2. Create your CSS and Javascript bundles. Where you put the logic for this is up to you but it will need to run when the application starts. Outside of Sitecore my main development is on bespoke ASP.NET MVC and Web API projects so I like to organise startup scripts into an App_Start folder and reference it from the Application_Start event in the global ascx file.

If you are running a Sitecore instance with multiple sites or if you do not have direct access to the production config files, it may be better to keep the logic separate and use a pipeline to create the bundles.

My bundle definitions would look something like this

1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Web;
5using System.Web.Optimization;
6 
7public class BundleConfig
8{
9    public static void RegisterBundles(BundleCollection bundles)
10    {
11        bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
12                    "~/Scripts/jquery-{version}.js",
13                    "~/Scripts/bootstrap.js"));
14 
15        bundles.Add(new StyleBundle("~/bundles/css").Include(
16            "~/Content/bootstrap.css",
17            "~/css/site.css"));
18    }
19}

And in my Global.asax.cs file I would have some logic like this to call the other function

1protected void Application_Start(object sender, EventArgs e)
2{
3    BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);
4}

3. Replace your Javascript/CSS references in your layout or rendering files with a call to render the bundle

Webforms

1<%: System.Web.Optimization.Scripts.Render("~/bundles/scripts") %>
2<%: System.Web.Optimization.Styles.Render("~/bundles/css") %>

MVC

1@Scripts.Render("~/bundles/scripts") 
2@Styles.Render("~/bundles/css")

4. In your web.config file there are a couple of changes needed to get things to work.

First you need to set an ignore url prefix to stop Sitecore trying to resolve the URL to the bundle. In this example mine is called bundles (note: you should add the prefix the what is already in your config file. e.g. |/bundles)

1<!--  IGNORE URLS
2      Set IgnoreUrlPrefixes to a '|' separated list of url prefixes that should not be
3      regarded and processed as friendly urls (ie. forms etc.)
4-->
5<setting name="IgnoreUrlPrefixes" value="/sitecore/default.aspx|/trace.axd|/webresource.axd|/sitecore/shell/Controls/Rich Text Editor/Telerik.Web.UI.DialogHandler.aspx|/sitecore/shell/applications/content manager/telerik.web.ui.dialoghandler.aspx|/sitecore/shell/Controls/Rich Text Editor/Telerik.Web.UI.SpellCheckHandler.axd|/Telerik.Web.UI.WebResource.axd|/sitecore/admin/upgrade/|/layouts/testing|/bundles" />
6

Next a dependant assembly binding needs to be set up for Web Grease. Without it you will see an error about the Web Grease version number

1<dependentAssembly>
2  <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
3  <bindingRedirect oldVersion="0.0.0.0-1.5.2.14234" newVersion="1.5.2.14234" />
4</dependentAssembly>

If you have done this and are still getting a version number error check the assembly binding tag. Older versions of Sitecore have the applies to property set which may be only applying the bindings to .Net 2 and you may be using .Net 4.

1<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1" appliesTo="v2.0.50727">

5. If you are using IIS7 you will also need to make a change in your web.config file

1<system.webServer>
2    <modules runAllManagedModulesForAllRequests="true">
3    </modules>
4</system.webServer>

6. Publish your changes into your Sitecore site. Depending if you have compilation mode set to debug or not you will now either have a bundle reference for all your JavaScript and CSS or the individual file references.

Sitecore MVC Page Editor: Combining a General Link with an Image

Sitecore's Page Editor provides content authors a simple way to edit content, visually seeing the changes as they make them. To make fields on a page editable though the Page Editor simply use the field renderer function to put a field's content on the page. When the page is viewed in page editor mode the function will output all the necessary html and JavaScript to make the page editor functionality work.

1@Html.Sitecore().Field("Title", Model.Item)

But what if your page needs to render the contents of one field inside another? e.g. You could have a link on an image or a link surrounding a combination of other fields.

In an xslt rendering you could simply nest one tag within another:

1<sc:link field="Image Link">
2   <sc:image field="Image" />
3</sc:link>

When you click the item in the Page Editor the toolbar would then combine the icons for the General Link field and the Image field so that you can edit the image and update the link. But with a ViewRendering in MVC, the Razer syntax used for views doesn't support nesting items in this way.

Thankfully Sitecore have considered this and rather than using the Field function they have included a BeginField and EndField function. Between the two you can place your nested fields:

1@Html.Sitecore().BeginField("Image Link", Model.Item)
2@Html.Sitecore().Field("Image", Model.Item)
3@Html.Sitecore().EndField()

Unfortunately it doesn't quite work right. The page will render correctly and the toolbar will show both options, however editing anything results in the content disappearing until you refresh the page. Thankfully there is a work around to get it to work:

1@Html.Sitecore().BeginField("Image Link", Model.Item, new { haschildren = true })
2@Html.Sitecore().Field("Image", Model.Item)
3@Html.Sitecore().EndField()