Articles in this series

 

Part 1: The requirements
Part 2: Installing Sitecore and setting up a Visual Studio solution
Part 3: Architecture
Part 4: The basic layouts
Part 5: Identity and documents
Part 6: Navigation
Part 7: The homepage - content oriented spots

Part 8: The homepage - presentation oriented spots
Part 9: News
Part 10: Search
Part 11: Deploying the solution

 

The Unified Page Editor

 

In this article we will use the Unified Page Editor to give the end user an optimal user experience through a visual GUI. Most of the features for the Unified Page Editor have recently been released and this article is based on Sitecore 6.4.1.101221. If you are developing on a previous version of Sitecore, you should upgrade before implementing the functionality described in this article.

As we already have developed the content oriented solution, the presentation oriented implementation will be created next to it (side-by-side). When you develop your solution, you should probably decide which implementation you want, and only use that.

Sitecore has also provided some documentation on the editor, which you can read about in the Client Configuration Cookbook

Also note that the Unified Page Editor is a merger between the old Page Editor and the Page Designer. No longer will the editors have to switch between the two. Further Sitecore has implemented a huge amount of features which improve the usability and fixed most of the technical issues, developers were complaining about. Therefore I suggest you use the presentation oriented implementation in your future solutions.

 

Layout deltas

 

A lot of improvements have been applied to the original Page Designer, which was released in a previous version of Sitecore. Besides improving the usability for the end user, Sitecore has addressed one of the biggest advocates against the Page Designer – the issue where layouts were copied from the templates standard values to the specific item, when adding a single presentation. This issue resulted in a solution which was hard to maintain, as it was impossible to control presentations in a centralized manner. But as I said, this has been addressed by Sitecore with the concept of layout deltas.

Layout deltas are a rather good solution, as only the specific presentation – added through the Unified Page Editor – is saved on the specific item. This means you can have areas on your website, where you allow editors to control presentations. You can still add presentations centralized, but the deltas from the standard values are saved on the items and will therefore be applied afterwards. This makes it perfect for spot frameworks. Here you want to give the control over the presentations to the editor in certain placeholders.

For more information on layout deltas I recommend you read Adam Conns blog post about it.

 

The implementation

 

Implementing the presentation oriented solution is no more complex, than the content oriented. In fact it might be simpler, as we don’t need any logic to add spots dynamically – Sitecore takes care of this for us. However there are a lot more configurations, if you want the editors to have the best user experience.

In this implementation we don’t need a spot render, as the placeholders handles this for us. Actually we don’t even need to modify the spots; we developed in the last part. However we need to ensure the editor will setup a binding between the presentation and a datasource. This is done through configuration.

 

 

The placeholders

In the same way we created the TwoColumnSpot sublayout in the content oriented implementation, we need a sublayout containing the placeholders, where the presentations can be inserted. We need to add this to a new component – we will call it SpotNew, as it is the “new way” to implement spots. So go ahead and create the component folders and project, as you by now have done a few times. (Note that we create a new component as this implementation is built next to the content oriented implementation). Further create a sublayout called TwoColumnPlaceholder: 

 

 

In this sublayout we need nothing else but two placeholders:

 

< div class="TwoColumn">

  < div class="LeftColumn">

    < sc : placeholder id="LeftPlaceholder" runat="server" key="SpotLeftPlaceholder" />

  </ div >

  < div class="RightColumn">

    < sc : placeholder id="RightPlaceholder" runat="server" key="SpotRightPlaceholder" /> 

  </ div >

</ div >

 

 

This is actually it. There isn’t any need for the spotpresenter I described in the last article. Now all we need to do is, to change the home page to use our new presentation. So go to the homepage templates standard values and view the layout details. Here we need to change the TwoColumnSpot sublayout to the TwoColumnPlaceholder sublayout:

 

 

 

 

The spots

In the last article we implemented the HTML and image spot. As I mentioned the implementation for the presentation oriented solution is actually the same. This is due to the fact that the data is pulled from the datasource, which is specified through the XSLT variable $sc_item.

In the same way as in the content oriented implementation, we need templates to keep the content in. We might as well structure this in exactly the same way, as we did before. As it is a side-by-side implementation, I am going to create the data templates for the spots again. The templates have the same fields, but I prefix them with SpotNew, as this is the component name:

 

 

I am also going to create a new spotfolder called SpotNewFolder and set the insert options of the standard values to point at our two new spots:

 

 

Now create a spot folder in the content tree:

 

 

As the code is more or less the same, go ahead and copy the renderings from the implementation we implemented in the last part of the article series:

 

 

Now all we need to do is to change the XSLT to use our new field names. The HTMLspot should look something like this:

 

< xsl:template match = "*" mode="main">

  < div class = "Spot">

    < div class = "HTMLSpot">

      < div class = "SpotTitle">

        < sc:text field = "SpotNew_Title"/>

      </ div >

      < div class = "SpotText">

        < sc:html field = "SpotNew_Text"/>

      </ div >

      < div class = "SpotLink">

        < sc:link field = "SpotNew_Link">

          < sc:text field = "SpotNew_LinkText"/>

        </ sc:link >

      </ div >

    </ div >

  </ div >

</ xsl:template >

 

 

And the ImageSpot should look something like this:

 

< xsl:template match = "*" mode="main">

  < div class = "Spot">

    < div class = "ImageSpot">

      < sc:link field = "SpotNew_Link">

        < sc:image field = "SpotNew_Image"/>

      </ sc:link >

    </ div >

  </ div >

</ xsl:template >

 

 

As you can see, it is really simple and only very little code is needed, but now comes the configuration.

 

 

Configuring the Unified Page Editor

 

The Unified Page Editor is a great tool for the editors. However by default it is rather open and the editors can change and insert presentations to all placeholders. You should always decrease the possibilities for the editors as much as possible, if you want to keep your site streamlined. What can be changed, will be changed. So we need to set this up.

First of all we need to ensure that the editors cannot insert presentations in every placeholder on the site. When you login to the editor and click insert component, you will see that you can insert it everywhere:
 

 

Here the editor can even insert presentations to the header, footer etc. and we don’t want that. This means we have to configure Sitecore to disallow it.

The insert possibilities are created through a concept called Placeholder Settings.

 

 

Placeholder settings and bindings

 

Note that the configuration I do in this section of the article, is only for documentation. You should look through it to understand placeholder settings and the binding mechanisms. If you are actually implementing a site following this article series, you should wait to the next section to do anything. 

 

As the name indicates, placeholder setting is where you control the settings for placeholders. It is controlled through an item in Sitecores content tree under layouts:

 

 

These items control different things for the placeholders. I will come back to the different settings later. First of all it is important to understand how a placeholder settings item is associated with a placeholder. There are multiple ways:

 

• By name. If a placeholder has the same name as an item in the placeholder settings folder.
• By explicit reference through the layout field on an item (or standard values if layouts are added on this).
  

 

Both are referenced by the placeholder key.

The first option isn’t very nice, as this means we lose our settings, if we rename a placeholder and that we need a setting item per placeholder name. Instead we can use the second option to create generic settings, which can be reused.

Sitecore by default creates a reference by the name, if you use the standard functionality. This is done by accessing a page through the Page Editor. When you select a placeholder, you can click properties and a setting item with the name of the placeholder is created:

 

 

But as I mentioned, this is not all that good, so you should - more often than not - use the other binding mechanism. You can do this by creating the settings item in the content editor:

 

 

Now that you have created the item, you need to associate with a placeholder. So go to the item where you have assigned the layouts (should be on standard values) and click layout details in the ribbon. Here you can click edit and you can select placeholder settings. Then click add, and you can now define your binding:

 

 

In this example I bind the HeaderRegion (note that the placeholder key must be typed in lower case letters) to use the GenericSettingItem I earlier created.

I will explain the different setting options in the next chapter.
 

 

Controlling presentation insert options

Note: Now we are back on track and you should now implement the configuration I describe. 

 

As I mentioned we do not want editors to insert presentations to placeholders like the header region – only in the spot placeholders. You can control this by using the “Editable” field of the placeholder settings. If this field is unchecked, it is impossible to insert presentations to that placeholder. So go ahead and create a generic placeholder setting item, which we can assign to all the placeholders except the spot placeholders. In my case I have decided to call it NoInsertOptions and I have disabled editing:

 

 

Note that the editors still have the possibility to alter and create content - but just not insert any presentations.

Now we need to assign this to all the placeholders, where the editor shouldn’t be allowed to insert anything. On the frontpage template this should be the placeholders with the following keys:

 

• HeaderRegion
• ContentRegion
• FooterRegion

 

So go ahead and add these settings to the standard values of the frontpage:

 

 

When you now go to the Page Editor, you will see that it is only possible to insert something to the spot placeholders:

 

 

Now this makes it better, but we still have work to do. If you click one of those “Add to here” buttons, you will see that the editor can select any presentation. First of all this isn’t very userfriendly, second of all we don’t want the editor to insert anything but actual spots. We can also control this through the placeholder settings in the “allowed controls” field.

To set this up create a new settings item, which we will use for all spot placeholders. To make it a little more transparent which component the settings item belong to, create it in a new folder called Spots. When created add our two spot renderings to the allowed controls field:

 

Now assign it to the following placeholders:

 

• SpotLeftPlaceholder
• SpotRightPlaceholder

 

Again remember to use lower case letters:

 

 

If you now click the “add to here” button, you will see that the editor can only select the controls we specified:

 

 

That makes it a lot easier to use. However we are still not done.

 

 

Setting up presentation items for the Unified Page Editor

 

Even though we have come a long way, there are still a few improvements, we need to work on. First of all it doesn’t make much sense to let the editor insert a presentation without specifying a datasource – remember that we use the datasource property to pull out data. If the editor inserts a control without specifying the datasource, the control will use the context item. This item doesn’t have any of the spot fields, hence there will be rendered no content. However the new unified page editor holds a dialog in cohesion with the insert control dialog, which allows the editor to both select an existing content item and create a new. To ensure that the editor does this every time, we have to configure this on the individual rendering.

The first thing we want to ensure is that the datasource dialog is triggered after insertion, but we don’t want to bother the editor with the properties dialog. The properties dialog can be used in some cases, to specify presentation properties, but most often it will more likely confuse the editor with settings such as caching, which is far too technical for a non-technical editor. You can control this with the setting “Open Properties after Add”. Set this to “No”:

 

 

The next thing we want to ensure is that the editor selects or creates the right type of datasource. This means that for a HTML spot, the editor should only be able to select the HTML spot data template we created earlier. Further we need to specify that if the editor wishes to create a new HTML spot item, it should also be based on the HTML spot template. This is done through the two settings “Datasource Location” and “Datasource template”. Set the first of the two to point at our spot folder and the second to the template of the HTML spot:

 

 

Now we have ensured that the editor needs to specify a datasource and that it should be of the right type.

When the editor inserts a presentation and clicks next, he is prompted with the following dialog:

 

In this dialog the editor can only select spots in the folder SpotsNew or create a new spot data item based on the HTML spot template. Try and create an example item. After you close the properties dialog, you can alter the content of the spot item through the Unified Page Editor. You can also see in the Content Editor that the item has been created.

Now do the same for the Image spot, but here you want to point at the Image Spot data template instead of the HTML Spot template:

 

Now you are almost done. The last thing we need to do is to take advantage of Sitecores new screenshot functionality. This allows you to give a better visual representation of the presentation the editor is inserting. We have already inserted an HTML spot to the frontpage, so we can use that for our screenshot. Go to the Appearances section of the HTML spot. There you will find a field called Thumbnail. This is used in the dialog, when an editor inserts a presentation. Click the “Take screenshot” button and capture the HTML spot we already inserted:

 

 

Here you need to enter the path and device where the page is present and you can now use the percentage slider to zoom in and out. Then you can select the image you want and that is then shown to the editor:

 

 

If I just had some graphical skills, that would look very sweet :) Do the same for the Image Spot.

Congratulations! You have now implemented the spot framework in a presentation oriented manner.

 

You can download the source code and the Sitecore content here