Создание карточки пользовательского типа

Данный раздел содержит описание примера добавления в диалог создания карточки пользовательского типа.

Ссылка на пример на GitHub: CreateCardDialog.

Пример рассчитан на версию Web-клиента 6.1 или выше.

Пример рассчитан на версию Web-клиента 6.1 или выше.

Перечень необходимых инструментов:

Сборка и установка

  1. Открыть /Samples.sln

  2. Собрать проект ServerExtensions > CreateCardDialog > CreateCardDialogServerExtension

  3. Открыть консоль в папке ServerExtensions > CreateCardDialog > CreateCardDialogWebExtension и выполнить команду npm install, затем npm update и в конце npm run build:prod

  4. Скопировать каталог SamplesOutput\Extensions\CreateCardDialogServerExtension в каталог Путь к сайту Web-клиента\Extensions

  5. Скопировать файл SamplesOutput\Extensions\ru\CreateCardDialogServerExtension.resources.dll в каталог Путь к сайту Web-клиента\Extensions\ru

  6. Скопировать каталог SamplesOutput\Content\Modules\CreateCardDialogWebExtension в каталог Путь к сайту Web-клиента\Content\Modules

  7. Перезапустите dvwebclient

Проверка примера

  1. Запустить конструктор разметок.

  2. Выбрать библиотеку ApprovalDesigner карточки.

  3. Выбрать тип Этап согласования.

  4. Создать разметку создания и просмотра (Например, добавить элемент управления Строка и привязать его к свойству MainInfo\Name).

  5. Выбрать условия использования этих разметок.

  6. В конфигурационном файле Web-клиента appsettings.json в секции Docsvision > Platform > CardTypes добавить строку:

    	{

        "CardTypeId": "0DB13C90-21B6-49D8-9070-8144DF97552A", (1)
        "CssClass": "approval-stage"
    }
    1 0DB13C90-21B6-49D8-9070-8144DF97552A — идентификатор типа карточки этапа согласования.

  7. Разрешить создание карточек вида Этап согласования в справочнике видов карточек.

  8. Перезапустите dvwebclient.

  9. Открыть Web-клиент и нажать на кнопку Создать.

  10. Должен появиться новый тип карточки Этап, доступный для создания (фон — фиолетовый).

  11. При выборе его, открывается созданная разметка, при этом фон боковой панели и шапки становится фиолетовым.

Проект "CreateCardDialogServerExtension"

Проект реализует серверное расширение, в котором регистрируется фабрика для создания типа карточки Этап, отличная от стандартной.

Проект "CreateCardDialogWebExtension"

Содержит клиентские скрипты реализующие веб-расширение, которое регистрирует тип карточки для его корректного отображения в Web-клиенте.

Примечания

В базовом варианте, чтобы подключить к Web-клиенту карточку нового типа, достаточно внести изменения в конфигурационный файл Web-клиента, как описано в инструкции проверки примера, а так же описать стиль класса approval-stage-color, например как:

.approval-stage-color {
  background-color: black;
}

Этот стиль применяется к элементам добавляемого типа карточки в диалоге создания карточки.

Если необходимо изменять цвет основных элементов управления Web-клиента, например, основной кнопки, шапки, боковых панелей, следует реализовать стили по примеру, описанному в approval-stage.scss.

Локализованные наименования всех зарегистрированных типов карточек доступны на клиенте и содержатся в объекте resources. Наименование пользовательского типа доступно по ключу CardType_{CardTypeName}_DisplayName, где {CardTypeName} - наименование типа карточки в файле метаданных.

В собственном решении или элементе управления можно использовать цвета, связанные с каким-то типом карточки. Для этого следует воспользоваться системными CSS классами:

  • card-type-background-color — стандартный фон элемента типа карточки.

  • card-type-background-color-hover — стандартный фон элемента типа карточки при наведении мыши.

  • card-type-background-color-light — светлый фон элемента типа карточки.

  • card-type-background-color-light-hover — светлый фон элемента типа карточки при наведении мыши.

  • card-type-background-color-disabled — заблокированный фон элемента типа карточки, например, когда кнопка недоступна для нажатия.

  • card-type-foreground-color — стандартный цвет шрифта типа карточки.

Список может быть расширен, при необходимости обратитесь к документации разработчика.

Если определенная бизнес-логика реализована или необходимо её реализовать, например если требуется задать значение какого-то поля по умолчанию при создании карточки, можно подключить серверное расширение (см. LayoutWebClientExtension.cs) и реализовать в нем интерфейс ICardFactory, в котором реализуется собственная логика по созданию карточки или созданию карточки по шаблону.

Фрагмент файла "LayoutWebClientExtension.cs"
namespace CreateCardDialogServerExtension
{

    public class LayoutWebClientExtension : WebClientExtension (1)
    {

        public LayoutWebClientExtension(IServiceProvider serviceProvider) (2)
            : base()
        {
        }

        public override string ExtensionName (3)
        {
            get { return Assembly.GetAssembly(typeof(LayoutWebClientExtension)).GetName().Name; }
        }

        public override Version ExtensionVersion (4)
        {
            get { return new Version(FileVersionInfo.GetVersionInfo(Assembly.GetExecutingAssembly().Location).FileVersion); }
        }


        #region WebClientExtension Overrides

        public override void InitializeServiceCollection(IServiceCollection services) (5)
        {
            services.AddTransient<ICardLifeCycleEx, ApprovalStageCardLifeCycle>();
        }

        protected override List<ResourceManager> GetLayoutExtensionResourceManagers() (6)
        {
            return new List<ResourceManager>
            {
                { Resources.ResourceManager }
            };
        }

        #endregion
    }
}
1 Задаёт описание расширения для Web-клиента, которое задано в текущей сборке.
2 Создаёт новый экземпляр LayoutWebClientExtension.
Параметры:

  • serviceProvider — сервис-провайдер.
3 Получить название расширения.
4 Получить версию расширения.
5 Регистрация типов в IoC-контейнере.
Параметры:

  • containerBuilder — сборщик контейнеров.
6 Получает менеджеры ресурсов для расширения разметки.