Quantcast
Channel: nonlinear thinking » Grant Bartlett
Viewing all articles
Browse latest Browse all 6

Sitecore Page Editor: Adding a custom component

$
0
0

In my previous post outlining the method of overcoming common Sitecore Page Editor challenges, I mentioned the idea of Custom Experience Buttons which I thought we could take a closer look at here.

Sitecore supports FieldRenders for fields such as rich text, single-line text image and general link, however reference fields (fields that reference other items in Sitecore) are not easily represented in Page Editor mode. In the screenshot below, you can see that my Reference Component allows for the editing of the title field directly inline. However, the datasource of the component also contains a reference field called Reference items which is not editable inline.

Sitecore Reference Component

Out of the box, the easiest way to get to this field is to enter through the content editor or use the Edit the related item option under the More drop-down. Both options are more cumbersome than necessary.

Creating a custom button for the reference component:

1. Switch to the Core database

2. Navigate to: /sitecore/content/Applications/WebEdit/Custom Experience Buttons

3. Create a new item based on the following template: /sitecore/templates/System/WebEdit/Field Editor Button

4. Fill in the information as illustrated in the screenshot below. Most importantly fill in the Fields field with the name of the fields you want to expose.

Sitecore Reference Item Properties icon creation

6. Now that the custom button has been created, switch back to the Master database.

7. Find the sublayout for your component and find the Page Editor Buttons field.

8. Select the button you just created and save.

Add new Sitecore Page Editor button

9. Return to page editor mode and look at the menu of your component, you will find your new button is now available.

New Sitecore Page Editor button

10. Clicking on the button allows you to edit the field referenced in your button.

Edit new Sitecore Page Editor button field

I hope this helps you out the next time you are trying to improve your content author experience.

Looking for more customized Sitecore posts? Check out these blogs on how to customize your security access to the Sitecore ribbon buttons, conduct an A/B test in Sitecore, use the DMS to drive personalized web experiences, or create a custom index in Sitecore7.

The post Sitecore Page Editor: Adding a custom component appeared first on nonlinear thinking.


Viewing all articles
Browse latest Browse all 6

Latest Images

Trending Articles





Latest Images