Sitecore Experience Editor Enchancements

Sitecore Experience Editor Enchancements

Enhancements can be made to the Sitecore Experience Editor (formerly known as the Page Editor) to allow authors to more easily edit and manipulate content. Giving the author visibility to hidden or complex fields allows them to edit components in the Experience Editor without having to switch to the Content Editor. Custom Experience Buttons can be added to individual template or component renderings to give the authors additional options in the Experience Editor. Edit Frames can be added around specific parts of a template or component to expose hidden or complex fields for editing. Custom Experience Buttons Custom Experience buttons are a good way to allow content authors to edit content fields or groups of fields that are not easy to display in the Experience Editor. The buttons can be configured to show meta-data or other hidden content fields so that extra fields do not need to be added to the Experience Editor markup just to allow for editing. This way the Experience Editor display can be as close as possible to the display of the published page and authors can then edit fields without having to leave the Experience Editor. They can also be configured to perform actions on items or their children, such as Insert, Delete or Sort. Creating and Configuring Custom Experience Buttons Custom Experience Buttons can be added in the Core Database under content/applications/webedit/custom Experience Buttons. 1. Add a new button to the Custom Experience Buttons folder or to a sub folder. Insert from Template and select one of two button type options. singlestoneconsulting.com Page 1

Field Editor Button (templates/system/webedit/field Editor Button) - These buttons enable content field editing on specified fields. Enter text for the Header and Tooltip, select an Icon, and configure which fields should be exposed in the content editor window. Add the fields as they are defined on the template for the item, sorted appropriately and pipe delimited. In the example below the Title and Body field would be exposed in the content editor window. WebEdit Button (templates/system/webedit/webedit Button) - These buttons allow for other actions to be executed on the item exposed by the Edit Frame. Add text for the Header and Tooltip, select an Icon, and add an action for the button to execute. singlestoneconsulting.com Page 2

The actions can be built in Sitecore actions, like the webedit:delete, or they can be custom actions. Hooking up Custom Experience Buttons to Renderings Custom Experience Buttons must be added to renderings in order to show up in the Experience Editor. In the Content Editor, select the layout rendering to enable the buttons. Under Editor Options > Experience Editor Buttons select the buttons to add and order them appropriately. In the following example the Edit Properties button we created earlier is added to a component s Experience Editor Buttons. The Custom Experience Button will now appear as an option when selecting that template/component in the Experience Editor. The Edit Properties button is shown below on the component rendering s floating toolbar. singlestoneconsulting.com Page 3

Clicking the button will display the content editing window with the specified fields available for editing. Note the two fields that were configured to show in the content editor window when the button was created. Additional Experience Editor Buttons There are other built-in Sitecore buttons that can be added as Experience Editor Buttons in addition to the custom Edit Properties button. For example, the Insert button allows the author to insert allowed child components and the Sort button enables sorting of existing child components. These and other built-in buttons give the author more control over child items without having to leave the Experience Editor. singlestoneconsulting.com Page 4

Edit Frames Edit Frames are another way to allow content authors to edit content fields or groups of content fields that are not as easy to display in the Experience Editor. For instance, if a particular set of markup is controlled by multiple fields, an Edit Frame can be placed around that markup specifically. The buttons on that Edit Frame s floating toolbar can then be configured to display a content editing window that allow authors to edit that group of fields. Edit Frames can also enable editing of child items and their content fields so that the author doesn t need to switch between the Experience Editor and Content Editor, or switch between items in order to edit the content on multiple components. Creating and Configuring Edit Frame Buttons Edit Frame buttons can be added in the Core Database under content/applications/webedit/edit Frame Buttons. 1. Add a new Edit Frame Button Folder Any edit Frame buttons that need to appear on a component in the Experience Editor must be added to a single Edit Frame Button Folder. This folder is what actually gets referenced by the Edit Frame in the code rather than the individual buttons. Referencing the folder allows for multiple buttons to be added to the component s singlestoneconsulting.com Page 5

floating toolbar with a single reference. Even if there is only one button that needs to be added to the Edit Frame, a folder must still be referenced. 2. Add a new Button to the Edit Frame Button Folder Two types of buttons are available to add. Field Editor Button - Same as Field Editor Button described with Custom Experience Buttons Edit Frame Small Button - Same as WebEdit Button described with Custom Experience Buttons Hooking up the Edit Frames in Views Adding Edit Frames and Edit Frame buttons is done through code rather than through the Content Editor. The code must reference the group of buttons to display and the item to be edited. Note: For Edit Frames the reference to the buttons must be to a Sitecore folder containing one or more buttons to display. A reference directly to a single button will not work so even if there is only one edit button needed, that button must still be added to a folder and that folder referenced. Code Example using (BeginEditFrame(Button Folder}, {Item}.FullPath)) { {Markup} } Where {Button Folder} is a reference to the Sitecore Edit Frames button folder. See above note about folders. {Item} is the Sitecore Item to be edited. For a template or component where fields on that template/component need to be edited, pass in the Sitecore Item for that singlestoneconsulting.com Page 6

template/component. The edit frame buttons will display a content editing window where the author can directly edit fields for that template/component. {Markup} is the HTML the edit frame should appear around. There must be something in this area for the Edit Frame to display. Child Items For a template/component that can have child-items the Edit Frame can be placed around each of the child-items in order for fields on those child items to be edited. In this case {Item} should be the Sitecore Item representing the child-item rather than the parent component/template. foreach (var childitem in Model.Children) { using (BeginEditFrame({Button Folder}, childitem.fullpath)) { {Markup} } } In this case, an Edit Frame would appear around each child item in Model.Children. When clicking one of the Edit Frame buttons for one of those child items, the content editing window that displays would allow the user to edit fields directly on that particular child item. In the example below, each of the individual child items has an Edit Frame around it and can be edited directly. Additional Edit Frame Buttons The functionality described thus far has referred only to the editing capability of the Edit Frame buttons, but other types of buttons can also be added to the Edit Frame as shown in the example. The Delete (red X) and Sorting buttons (move up and move down arrows) call standard Sitecore actions to further expand on the control of child items in the Experience Editor. These additional buttons are included in the same Edit Frame Button folder referenced for that particular Edit Frame. singlestoneconsulting.com Page 7

Jeremy Haun Senior Consultant About SingleStone Founded in 1997, SingleStone is a consulting firm specializing in customer experience solutions, spanning technology, strategy, business processes and culture. We help our clients improve their interactions and communications with customers by combining these disciplines to create, implement and support end-to-end customer experiences that benefit both business and humanity. Connect With Us 4101 Cox Road, Suite 350 Glen Allen, VA 23060 804.648.0600 SingleStoneConsulting.com