Adding Experience/Page Editor button to edit meta data fields with Sitecore 8.1

You can find all the ingredients to do this yourself in in various blog posts out there already, but hopefully this post brings it all together (plus a couple of extras thrown in for good measure...)

If you've worked with Sitecore for any length of time you've probably come across the idea of making non-visible data editable via the Page/Experience Editor, in order to promote a "Page-Editor first" approach (so that as well as all the obvious page text and modules, things like meta data and other page configuration can be amended without having to switch back to the content editor.) Prior to Sitecore 8 and SPEAK, this could be done by adding a few items to the Core database - no coding required! It's a little more effort from Sitecore 8 onwards, although extra configurability is now available. You'll also need to install the Sitecore Rocks Visual Studio extension.

Note that the following example works for Sitecore 8.1 Update 2.

1) Add some custom JavaScript to be triggered on your button click. This triggers the server-side request processor we define in the next step, and uses the information it gets back to open the modal dialog window. Note that the list of field names (context.currentContext.argument) which is sent to the pipeline processor gets extracted from the tooltip of your new button - this seems a little odd to me but I couldn't get it working by passing it via any of the other available attributes. The dialogFeatures variable lets you set various properties of the field editor popup - such as the title text:

define(["sitecore", "/-/speak/v1/ExperienceEditor/ExperienceEditor.js"], function (Sitecore, ExperienceEditor) {
    Sitecore.Commands.LaunchFieldEditor =
    {
        canExecute: function (context) {
            return true;
        },
        execute: function (context) {
            context.currentContext.argument = context.button.viewModel.$el[0].title;

            ExperienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.GenerateFieldEditorUrl", function (response) {
                var dialogUrl = response.responseValue.value;
                var dialogFeatures = "header: Edit Page Meta Data; dialogHeight: 250px;dialogWidth: 520px; edge:raised; center:yes; help:no; resizable:yes; status:no; scroll:no";
                ExperienceEditor.Dialogs.showModalDialog(dialogUrl, '', dialogFeatures, null);
            }).execute(context);

        }
    };
});

2) Add a SPEAK request handler and hook it into the relevant place. This generates a URL for the modal dialog window based on the fields which are to be made available for editing:

using System.Collections.Generic;
using Sitecore.Data;
using Sitecore.ExperienceEditor.Speak.Server.Contexts;
using Sitecore.ExperienceEditor.Speak.Server.Requests;
using Sitecore.ExperienceEditor.Speak.Server.Responses;
using Sitecore.Shell.Applications.ContentEditor;
using Sitecore.Text;

namespace RedMoon.Pipelines.ExperienceEditor
{
    public class GenerateFieldEditorUrl : PipelineProcessorRequest<ItemContext>
    {
        public string GenerateUrl()
        {
            var fieldList = CreateFieldDescriptors(RequestContext.Argument);
            var fieldeditorOption = new FieldEditorOptions(fieldList);

            //Save the item when the OK button is pressed
            fieldeditorOption.SaveItem = true;
            return fieldeditorOption.ToUrlString().ToString();
        }

        private List<FieldDescriptor> CreateFieldDescriptors(string fields)
        {
            var fieldList = new List<FieldDescriptor>();
            var fieldString = new ListString(fields);
            foreach (string field in new ListString(fieldString))
                fieldList.Add(new FieldDescriptor(RequestContext.Item, field));
            return fieldList;
        }

        public override PipelineProcessorResponseValue ProcessRequest()
        {
            return new PipelineProcessorResponseValue
            {
                Value = GenerateUrl()
            };
        }
    }
}

<configuration>
        <sitecore>
                <sitecore.experienceeditor.speak.requests>
                        <request name="ExperienceEditor.GenerateFieldEditorUrl" type="RedMoon.Pipelines.ExperienceEditor.GenerateFieldEditorUrl, Redmoon" />
                 </sitecore.experienceeditor.speak.requests>
        </sitecore>
</configuration>

3) Add the button in the Core database

  • First, add a new 'strip' to /sitecore/content/Applications/WebEdit/Ribbons/WebEdit; insert an item here which is based on the /sitecore/templates/System/Ribbon/Strip template.

 

New strip item

Call it something like 'Meta'. Also set the Header field of the item to 'Meta', and the ID field to 'MetaStrip'. Locate the item in Sitecore Rocks and right-click; select Tasks then Design Layout. Within the layout view, click Add Rendering and then add the /sitecore/client/Applications/ExperienceEditor/Common/Layouts/Renderings/Ribbon/Strip rendering to the item

  • Next, add a new 'chunk' underneath your new 'strip'; insert an item here which is based on the /sitecore/templates/System/Ribbon/Chunk template. Call it something like 'Page Meta Data'.

New chunk item

Set the Header field of the item to 'Page Meta Data' and ID field to 'PageMetaDataChunk'. Locate the item in Sitecore Rocks and right-click; select Tasks then Design Layout. Within the layout view click Add Rendering and then add the /sitecore/client/Applications/ExperienceEditor/Common/Layouts/Renderings/Ribbon/Chunk rendering to the item

  • Then we add the button itself - to the 'chunk' item we just created, add an item which is based on the /sitecore/templates/System/Ribbon/Large Button template - you can call this something like 'Edit Page Meta Data'.

New button item

Set the Header field of the item to 'Edit Page Meta Data' and ID field to 'EditPageMetaDataButton'. In the Tooltip field add a pipe-separated list of all the fields you would like to be editable - e.g. Title|MetaDescription|NoIndex|NoFollow. Within the layout view, click Add Rendering and then add the /sitecore/client/Applications/ExperienceEditor/Common/Layouts/Renderings/Ribbon/LargeButton rendering to the item. Then right-click on the rendering and choose Edit.

Editing the rendering properties of the new button

The Click field needs to contain "trigger:button:click" and the command field "LaunchFieldEditor". The PageCodeScriptFileName field needs the path of the custom JS file you created earlier (relative to the website root.)

Job done!

Field editor model window

 


By James at 9 Jun 2016, 21:12 PM


Comments

Post a comment