LibrarySites.Banner

Hidden Secrets of Page Editor Solution 2: Editing Meta-Data

This blog post describes how to use field editors and custom menu buttons in order to make it easier for Page Editor users to edit values that are not visible on web pages, such as SEO-related meta-data. This is solution 2 from my Hidden Secrets of Page Editor presentation from Sitecore Symposium 2012.

One goal was to create custom buttons that allow different fields to be edited via dedicated forms. For example, a button that allows SEO-related meta-data fields to be edited would display the fields that provide values to the meta-tags for description and keywords.

The second goal was to create a button that only appeared if the page has a certain field. The specific example was the "region" field. If a page represented a travel destination, it would have a field to store the destination's geographic region (North America, EU, APAC, etc.). If the page was a travel destination, we wanted to  display a button for editing the region. If the page was not a travel destination, we wanted to hide the button.

This post describes getting the buttons added to Page Editor (the first goal). The processes for supporting buttons that appear only under certain conditions (the second goal) is described in an earlier blog post (see Rule Based User Interface Components for the Sitecore Client).

Finding the fields to display

When a content author clicks the button, a form should appear that allows the content author to edit fields on the item that are not visible in Page Editor. In order to do this, I must determine the exact names of those fields.

  1. In Content Editor, find the template where the SEO-related meta-data fields are defined:  /sitecore/templates/Jetstream/Sections/Meta
  2. Note the names of the fields I want to display: "Meta Keywords" and "Meta Description".

    template

Understanding Sitecore ribbons

Creating a custom button involves creating a number of new Sitecore items in the "core" database. The Page Editor menu - just like all user-interface components in the Sitecore client - are defined by items in the "core" database. Adding custom buttons requires a little bit of knowledge about the different templates that are involved.

The ribbon - which is the toolbar that appears at the top of Page Editor - is made up of strips. A strip is like a toolbar that is stacked on top of other toolbars. The strip's name is often called a tab. Clicking on the tab causes the strip to appear.

The strip is made up of chunks. A chunk is a collection of user-interface components, like buttons. 

menu templates

The user interface component triggers a command. A command is an instruction for Sitecore to do something. A command is usually just a name. The name is mapped to a .NET class via a config file. The following command is included with Sitecore. It is the command that should be triggered by the custom button I am going to create.

<command name="webedit:fieldeditor" type="Sitecore.Shell.Applications.WebEdit.Commands.FieldEditor, Sitecore.Client"/>

Parameters can be passed to commands. In the case of the "FieldEditor" command I am going to use, parameters are required:

  • command: Item ID from the item in the "core" database that has the icon that should be used in the popup window. The item must have a field named "Icon". If the item has a field named "Title", the value of that field is displayed next to the icon. If the item does not have a field named "Title", the word "Data" is used.
  • fields: Pipe-separated (|) list of field names

An example of the command being used is:

webedit:fieldeditor(command={70C4EED5-D4CD-4D7D-9763-80C42504F5E7},fields=Meta Description|Meta Keywords)

And the resulting popup windows looks like this:

fieldeditor popup

Create the new user-interface components

  1. In Content Editor, switch to the "core" database.
  2. Create a new item under /sitecore/content/Applications/WebEdit/Ribbons/WebEdit
    * Template: /sitecore/templates/System/Ribbon/Strip
    * Name: Properties
  3. Set the following field values:
    * Header: Properties
    * ID: PropertiesStrip
  4. Create a new item under the "Properties" item.
    * Template: /sitecore/templates/System/Ribbon/Chunk 
    * Name: Meta Data
  5. Set the following field values:
    * Header: Meta Data
  6. Create a new item under the "Meta Data" item.
    * Template: /sitecore/templates/System/Ribbon/Large Button
    * Name: Edit Meta Data
  7. Set the following field values:
    * Header: Edit Meta Data
    * Icon: business/32x32/note_edit.png
    * Click: webedit:fieldeditor(command={70C4EED5-D4CD-4D7D-9763-80C42504F5E7},fields=Meta Description|Meta Keywords)
    * Tooltip: Edit Meta Data
  8. Switch back to the "master" database. 
  9. If Page Editor is already open you need to refresh it. Then you should see the new strip in the ribbon. Clicking the strip should reveal the new chunk and its button. Clicking the button should display a popup window where the "Meta Description" and "Meta Keywords" fields can be edited.

    customized strip

  • I'm so glad this was posted. I kept missing this session, and realized I probably shouldn't have.

  • Great post. Hidden content is especially hard to handle well in the Page Editor.  A few months ago, Thomas Stern posted a similar solution here: blog.istern.dk/.../   And as a follow up, I wrote about how to open the Media Library here: briancaos.wordpress.com/.../  Also, sometimes you need to give access to parts of the content tree to allow the customer to add non-visual content items from the page editor. Read about that here: briancaos.wordpress.com/.../

  • I have followed the method described here but when I am in chrome I change the value and hit OK, chrome tells me "There are unsaved changes.  Are you sure you want to exit this page".  If I press stay on this page and then press OK again the new value I have entered is lost and the item is not updated.  Any ideas what could be causing this?

  • I had a similar problem at first. Check your command Item ID. It should be pointing to your content editor in your 'core' database.

  • This is really cool. I've been using the Field Editor option on sublayouts and WebEdit buttons in general for the custom experience scenarios and its very nice.  Question: is it possible OOTB to do something like this, but instead of having field context on the context item, have it provide context to the site's root item? Say for example that I have global settings defined on the root item and not the page itself (e.g. an Analytics Snippet). I know how to do this with a custom command and corresponding class, I'm just not sure if we can somehow re-use the Field Editor command to do this OOTB.  Thanks in advance

  • Hi Mark,  Depends on how loosely you define OOTB. The pipeline getContentEditorFields is responsible for getting the fields that are displayed in the Field Editor. You could add a new parameter to the command, like:  webedit:fieldeditor(command={70C4EED5-D4CD-4D7D-9763-80C42504F5E7},fields=Meta Description|Meta Keywords,root={xxxx-xxxx-xxxx...})  And then you could add a new processor to the getContentEditorFields pipeline that looks for this parameters and changes the context item within the pipeline (args.Item).  It's OOTB in the sense that Sitecore is already equipped to support this. It's not OOTB in the sense that you need to add code in order to support a new parameter.

  • Adam -  That's a great solution. I should have guessed that a pipeline was exposed for that. If I can simply add a new processor and patch it in then to support the extra param that's as OOTB as I need!  Thanks again

  • I've used this solution in Sitecore 7.2, then upgraded to Sitecore 8 and the custom ribbons are gone. I can still see the items in the Core database. Any ideas how to implement the same functionality in Sitecore 8?

  • Ben Wyatt, did you ever find a solution. I have the same problem! I have tried to create a new strip, chunk and button, but they do not appear. The only thing that works, is duplicating an existing strip and its contents.

  • I found that it is a bit different in Sitecore 8 to create a new button (haven't tried it myself yet):  reyrahadian.com/.../

  • I followed the solution here for Sitecore 8: blog.istern.dk/.../. This is also mentioned in the link posted by Esben above.