Przyjazna edycja metadanych - Smart Sitecore Polski Blog

Implementując stronę na platformie Sitecore, jednym z najczęstszych zadań jest edycja metadanych związanych ze stronami, lub pojedynczymi komponentami. Idealnie autorzy powinni mieć możliwość edycji danych bezpośrednio w Experience Editor. Częstym podejściem do rozwiązania tego problemu jest użycie “Edit Frame” wbudowanych w Sitecore. Edit Frame’y są proste do zaimplementowania dla programisty (szczególnie za pomocą Glass Mapper’a), ale tworzą dodatkową warstwę nad komponentem, która może być myląca dla edytujących treść powiązaną z kontekstem strony (np tagi: Meta Title, Meta Descrption). Na szczęście istnieje łatwy sposób na rozszerzenie Sitecore’a o możliwość edycji tego rodzaju danych, za pomocą dodatkowych przycisków kontekstowych, lub w głównym menu.

Metadane strony

Metadane strony to na przykład tagi SEO. Naszym celem będzie dodanie do głównego menu nowego przycisku, umożliwiającego edycję pól dla item’u bieżącej strony.

Zaczynamy od dodania nowego itemu w menu w bazie core, pod “/sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Page Editor/Edit” używając jednego z template’ów dla przycisków (e.g. “Small Button”). Potrzebujemy wypełnić pola “Header”, “Icon” and “Tooltip” oraz wpisać nazwę komendy “trigger:button:click” w polu “Click” i identyfikator w polu “ID”.

Ponieważ modyfikujemy komponent SPEAK, wewnątrz Experience Editor, musimy użyć Sitecore Rocks, aby ustawić layout dla przycisku, stworzonego w poprzednim kroku. Używamy renderingu “SmallButton” i uzupełniamy następujące pola:

“AccessKey” – wpisujemy tutaj nazwy pól, które chcemy edytować w itemach stron
“Click” – powinno być takie samo jak w polu “Click” item’u
“Command” – wpisujemy tu nazwę funkcji javascript, która będzie wywoływana po kliknięciu na przycisk
“PageCodeScriptFileName” – ścieżka do pliku .js w którym zdefiniujemy funkcję z pola “Command”

Następnie definiujemy funkcję javascript dla komponentu SPEAK. W kodzie przekazujemy nazwy pól do pipeline’u, który zwróci URL zawierający obszar edycyjny dla wybranych pól. Na koniec wyświetlamy zawartość URL’a w okienku dialogowym. Podany kod działa w Sitecore 8.1 i wyższym (dla wcześniejszym wersji sprawdź artykuł źródłowy w odnośnikach).

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].accessKey;

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

            }
        };
});

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].accessKey;

ExperienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.GenerateFieldEditorUrl", function (response) {

var dialogUrl = response.responseValue.value;

var dialogFeatures = "dialogHeight: 380px;dialogWidth: 640px; edge:raised; center:yes; help:no; resizable:yes; status:no; scroll:no";

ExperienceEditor.Dialogs.showModalDialog(dialogUrl, '', dialogFeatures, null);

}).execute(context);

}

};

});

W kodzie pipeline’a tworzymy FieldDescriptors dla każdego pola podanego w parametrze i zwracamy URL dla edycji pól:

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

namespace Sitecore.Foundation.FieldEditor.Pipelines.SpeakRequest.Processors
{
    public class GenerateFieldEditorUrl : PipelineProcessorRequest<ItemContext>
    {
        public override PipelineProcessorResponseValue ProcessRequest()
        {
            return new PipelineProcessorResponseValue
            {
                Value = GenerateUrl()
            };
        }
        
        private 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(RequestContext.Item, field));
            return fieldList;
        }
    }
}

using System.Collections.Generic;

using Sitecore.Data;

using Sitecore.Text;

using Sitecore.Shell.Applications.ContentEditor;

using Sitecore.ExperienceEditor.Speak.Server.Requests;

using Sitecore.ExperienceEditor.Speak.Server.Responses;

using Sitecore.ExperienceEditor.Speak.Server.Contexts;

namespace Sitecore.Foundation.FieldEditor.Pipelines.SpeakRequest.Processors

{

public class GenerateFieldEditorUrl : PipelineProcessorRequest<ItemContext>

{

public override PipelineProcessorResponseValue ProcessRequest()

{

return new PipelineProcessorResponseValue

{

Value = GenerateUrl()

};

}

private 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(RequestContext.Item, field));

return fieldList;

}

W ostatnim kroku rejestrujemy pipeline poprzez patch w konfiguracji:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/">
  <sitecore>
    <sitecore.experienceeditor.speak.requests>
      <request name="ExperienceEditor.GenerateFieldEditorUrl" type="Sitecore.Foundation.FieldEditor.Pipelines.SpeakRequest.Processors.GenerateFieldEditorUrl, Sitecore.Foundation.FieldEditor" />
    </sitecore.experienceeditor.speak.requests>
  </sitecore> 
</configuration>

<sitecore.experienceeditor.speak.requests>

</sitecore.experienceeditor.speak.requests>

</sitecore>

</configuration>

Po deploy’u kodu nowy przycisk pojawi się w głównym menu Experience Editor’a w sekcji “Edit”:

Kliknięcie na przycisk spowoduje otwarcie okna z obszarem edycyjnym dla wybranych pól metadanych w itemie bieżącej strony:

Metadane komponentów

Metadane powiązane z komponentem to z reguły jego właściwości, które nie są renderowane bezpośrednio na widoku, ale wpływają w pewny sposób na komponent, na przykład może to być wybór styli, lub kolejności elementów.

Dodanie przycisku w menu kontekstowym komponentu w Experience Editor jest bardzo łatwym zadaniem, niewymagającym pisanie dodatkowego kodu. To czego potrzebujemy do niestandardowy item dla przycisku w bazie core wewnątrz gałęzi “/sitecore/content/Applications/WebEdit/Custom Experience Buttons/”. Powinniśmy utworzyć item używając template’u “Field Editor Button” i uzupełnić pola “Header”, “Icon”, “Tooltip” i “Fields”. W polu “Fields” wpisujemy nazwy pól, które chcemy edytować dla wybranego komponentu:

Przełączmy się z powrotem na bazę master i otwórzmy rendering item wybranego komponentu, w którym chcemy edytować metadane. W polu “Experience Editor Buttons” należy wybrać item utworzony w poprzednim kroku:

Po otwarciu Experience Editor’a i wybraniu komponentu powinien pojawić się nowy przycisk:

Kliknięcie na przycisk otworzy okno z obszarem edycyjnym dla pól wybranych w pierwszym kroku: