iStern Blog

This post is an update of an old post https://blog.istern.dk/2012/05/21/running-sitecore-field-editor-from-a-command/ . Sitecore 8 brought along speak and deprecated the old solution presented in that blog post. So let’s speakify it and create a  new solution. Luckily Alister Berry provided an excellent blog post about creating simple custom ribbon in the experience editor http://www.programmingbynumbers.com/2015/01/31/creating-a-new-experience-editor-button-in-sitecore-8/ – So go read the post a comeback when your are done J.  For the rest of this post the button or functionality, if you like, will be to edit the HTML metatags ie. Title, meta-description, meta-keywords.

So let us begin with creating the button. Start Visual Studio launch the Sitecore Rocks and go to the Core database and navigated to “/sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Page Editor” under the item create a new folder and the the newly created folder add a new Large button Fille out the fields as shown below.

 

 

 

 

So next step is to and a layout to the new button select the button and choose “Design layout” in Sitecore Rocks – shortcut “ctrl + u”, and choose and a new rendering “Large Button”

 

 

 

 

 

Next lets add the properties required for the solution to work

The properties are Click is “trigger:button:click”, Command “LaunchFieldEditor”, PageCodeScriptFileName : “PATH TO THE JS FILE WE CREATE NEXT”

 

 

 

 

Okay now we need to create PageCodeScriptFile:

define(["sitecore"], function (Sitecore) {

Sitecore.Commands.LaunchFieldEditor =
{
canExecute: function (context) {
//YOU COULD ADD FUNCTIONALITY HERE TO SEE IF ITEMS HAVE THE CORRECT FIELDS
return true;
},
execute: function (context) {
///CHOOSE YOUR OPTION BELOW

// THIS IS FOR THE ALT TEXT ON IMAGE
context.currentContext.argument = context.button.viewModel.$el[0].firstChild.alt;

//THIS IS THE TOOLTIP ON LINK TAG "A"
context.currentContext.argument = context.button.viewModel.$el[0].title;

Sitecore.ExperienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.GenerateFieldEditorUrl", function (response) {
var DialogUrl = response.responseValue.value;
var dialogFeatures = "dialogHeight: 680px;dialogWidth: 520px;";
Sitecore.ExperienceEditor.Dialogs.showModalDialog(DialogUrl, '', dialogFeatures, null);
}).execute(context);

}
};
});

Rather simple file which calls some server side code.  Also note that the settings will be save to the item when the ok button is clicked right away not need to click the save button in the experience editor.

public class GenerateFieldEditorUrl : PipelineProcessorRequest<ItemContext>
{
public string GenerateUrl()
{
var fieldList = CreateFieldDescriptors(RequestContext.Argument);
var fieldeditorOption = new FieldEditorOptions(fieldList);
//Save item when 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(this.RequestContext.Item, field));
return fieldList;
}

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

Now lyou should  register the Request processor open the this file “Sitecore.ExperienceEditor.Speak.Requests.config” found in App_config/include folder. And add the new processor.

<request name="ExperienceEditor.GenerateFieldEditorUrl" type="PT.Framework.SitecoreEditor.GenerateFieldEditorUrl, PT.Framework.SitecoreEditor"/>

Just before we see the result there a few things that are nice to know. Because the server side code actually does a bit more the just returning and url for fieldeditor.  The creation of the URL Handle also besides creating a URL to the fieldeditor is storing required parameters in the current session in the urlhand id. The fieldeditor then pickups on parameters by going in to the session with hdl-id see url below. Hdl=F60F9A3AB4DC4CC8A7E28D25C4EC13B8

http://local/sitecore/shell/applications/field%20editor.aspx?mo=mini&hdl=F60F9A3AB4DC4CC8A7E28D25C4EC13B8

Okay now to the tricky part we need to pass in which fields we want to edit to the server class GenerateFieldEditorUrl,  unfortunately the parameter part of the layout isn’t rendered out and can’t be used but there are som simple ways we can force the fieldnames out in the HTML.

First you can edit the button item and set in the fieldnames in n the tool tips section

 

 

Alternatively you can set it in layout details page under tooltips, Be advised that if you choose this, editor will see the fieldname in the editors.

 

 

 

See the two different models below. The javascript in this post include selector for both option see comments in the js file

 

 

 

 

And now to the final result

 

 

So thats how you laucnh the field editor with a speak modal dialog, in the sitecore experience editor.

 

 

UPDATE 1
A problem with the two selector presented above is that they both requires you to add the fields to all language versions of the button item. So one of collegues Stephan Rifbjeg came up with a smart solution, simply to add the fields to the acceskey field on the layout see image below.

You can now get the value out with the following selector

context.currentContext.argument = context.button.viewModel.$el[0].accessKey;

Update from  kayeenl to catch the GenerateFieldURI

public class GenerateFieldEditorUrl : PipelineProcessorRequest<ItemContext>
{
public string GenerateUrl()
{
var fieldList = CreateFieldDescriptors(RequestContext.Argument);
var fieldeditorOption = new FieldEditorOptions(fieldList);
//Save item when ok button is pressed
fieldeditorOption.SaveItem = true;
return fieldeditorOption.ToUrlString().ToString();
}<span class="para_break"><i class="copy_only">
</i></span>       private List<FieldDescriptor> CreateFieldDescriptors(string fields)
{
var fieldList = new List<FieldDescriptor>();
var fieldString = new ListString(fields);
foreach (var field in new ListString(fieldString))
{
try
{
var descriptor = new FieldDescriptor(RequestContext.Item, field);
fieldList.Add(descriptor);
}
catch (Exception)
{
Log.Error(string.Format("Cannot create field editor for field '{0}'. Please configure the fields on the tooltip of the button", field), this);
}
}
return fieldList;
}<span class="para_break"><i class="copy_only">
</i></span>       public override PipelineProcessorResponseValue ProcessRequest()
{
return new PipelineProcessorResponseValue
{
Value = GenerateUrl()
};
}