Расширение LinkItem — Блог разработчиков Optimizely

Поле LinkItem — одно из наиболее востребованных сообществом свойств, позволяющее редакторам легко создавать ссылки на страницах и блоках и управлять ими. Он был представлен в CMS 12 – EPiServer.CMS 12.11.0 и эта запись в блоге покажет, как его можно расширить, чтобы улучшить авторский опыт.

Вот как вы определяете свойство в коде:

[CultureSpecific]
[Display(Name = "Primary Link", GroupName = TabNames.Content, Order = 10)]
public virtual LinkItem Link { get; set; }

А вот как редактор увидит это свойство

Когда вы нажмете «Добавить ссылку», вы увидите диалоговое окно, в котором вы можете создать/редактировать ссылку. Вы можете выбрать внутреннюю страницу и добавить внешнюю или даже медиа-ресурс.

Здесь вы можете заметить, что текст является обязательным и будет использоваться в качестве текста ссылки.

Расширение поля LinkItem: расширение возможностей текстового поля

Что, если мы хотим иметь заранее определенный список текста ссылок и включить эти параметры в поле «Текст» в модальном окне, чтобы обеспечить согласованность между ссылками. Такие вещи, как «Читать дальше», «Узнать больше», «Перейти» и т. д. можно каким-то образом создать, а затем редактор сможет выбрать текст из списка.

Это также полезно, если у вас многоязычный сайт и вам необходимо перевести текст каждой ссылки. Имея список текста ссылок со всеми переводами и предоставляя возможность редактору выбирать из него, можно сэкономить много времени. Очевидно, что если требуется конкретный текст, автор должен иметь возможность добавить собственный.

Опыт создания текста ссылок

Мы используем Настройки функция и список строк IList для поддержки этого содержимого. Вы можете применить другой подход для хранения списка текста, который мы собираемся использовать.

[SettingsContentType(DisplayName = "Site Settings",
    GUID = "ff69f929-c91b-a6cb-9829-2ecf9d11e13c"
    SettingsName = "Site Settings")]
public class SiteSettings : SettingsBase
{
   ....

   [CultureSpecific]
   [Display(Name = "Global Link Text", GroupName = 
   TabNames.Content, Order = 200)]
    public virtual IList LinkTextList { get; set; }
   ....
}

Редактор создаст список строк, и его может быть столько, сколько необходимо.

Используя встроенную функцию редактора автоматических предложений (https://docs.developers.optimizely.com/content-management-system/docs/built-in-auto-suggestion-editor), нам нужно создать «Фабрику выбора», чтобы получить все эти параметры из настроек и вернуть их в виде списка выбранных элементов. Помните, что этот класс должен наследовать от ISelectionQuery а не из ISelectionFactory.

namespace Website.CMS.SelectionFactories
{
    [ServiceConfiguration(typeof(ISelectionQuery))]
    public class LinkTextSelectionQuery : ISelectionQuery
    {
        private readonly IEnumerable _items;

        public LinkTextSelectionQuery()
        {
            var linkTexts = SettingsHelper.SiteSettings.GlobalLinkText != null ? SettingsHelper.SiteSettings.GlobalLinkText.ToList() : new List();

            var list = new List();
            list.Add(new SelectItem() { Text = string.Empty, Value = string.Empty });
            
            list.AddRange(linkTexts.Select(x => new SelectItem
            {
                Text = x,
                Value = x
            }));

            _items = list;
        }

        public IEnumerable GetItems(string query) => _items.Where(i => i.Text.StartsWith(query, StringComparison.OrdinalIgnoreCase));

        public ISelectItem GetItemByValue(string value) => _items.FirstOrDefault(i => i.Value.Equals(value));
    }
}

Список элементов будет извлекаться каждый раз, когда свойство LinkItem необходимо отобразить на странице или блоке.

Теперь нам нужно расширить модальное окно LinkItem, которое по сути является LinkModel под капотом.

[EditorDescriptorRegistration(TargetType = typeof(LinkModel), EditorDescriptorBehavior = EditorDescriptorBehavior.PlaceLast)]
internal class CustomLinkEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable attributes)
    {
        foreach (var modelMetadata in metadata.Properties)
        {
            var property = (ExtendedMetadata)modelMetadata;
            if (property.PropertyName == "Text")
            {
                property.ClientEditingClass = "epi/shell/form/SuggestionSelectionEditor";
                modelMetadata.EditorConfiguration["storeurl"] =
                    "/EPiServer/Shell/stores/selectionquery/Website.CMS.SelectionFactories.LinkTextSelectionQuery/";
            }
        }
    }
}

Установка Класс ClientEditingClass влияет на пользовательский интерфейс текстового свойства и преобразует его из поля ввода в раскрывающийся список с функцией автоматического предложения.
РедакторКонфигуратор вот в чем секрет заполнения раскрывающегося списка значениями, полученными в классе: Website.CMS.SelectionFactories.LinkTextSelectionQuery

Запустив решение и добавив ссылку, вы заметите, что поведение текста ссылки (который ранее был одним входным текстом) изменилось.