Пример флага

Данный раздел содержит описание примера реализации элемента управления Пример флага.

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

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

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

Проект "CheckBoxDesignerExtension"

  1. Проект-расширение для конструктора разметок. Содержит описание элемента управления Пример флага для программы Конструктор Web-разметок.

  2. Демонстрирует описание и подключение нового ЭУ, используя класс ControlTypeDescription, задание ему стандартных свойств, реализованных в программе Конструктор Web-разметок. См. PropertyFactory.GetNameProperty() и добавление собственного свойства, используя класс PropertyDescription. См. свойство DefaultValue.

  3. Для свойства Поле секции, источник данных, реализован редактор, фильтрующий поля по типу boolean, класс BooleanMetadataEditor.

Проект "CheckBoxWebExtension"

Проект-расширение клиентской части Web-клиента. Содержит клиентский скрипт и стили для CheckBox.

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

  1. Откройте /Samples.sln.

  2. Соберите проект Controls > CheckBox > CheckBoxDesignerExtension.

  3. Откройте консоль в папке Controls > CheckBox > CheckBoxWebExtension и выполните команду npm install и npm run build:prod.

  4. Скопируйте каталог SamplesOutput\Plugins\CheckBoxDesignerExtension в каталог Путь к директории с исполняемым файлом конструктора Web-разметок\Plugins.

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

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

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

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

  2. Скопируйте любую разметку для карточки вида Служебная записка.

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

  4. Откройте разметку и добавить в нее новый элемент управления Пример флага.

  5. Задайте желаемые параметры элемента управления.

  6. Сохраните разметку.

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

  8. Откройте карточку с этой разметкой.

  9. Убедитесь, что появился новый элемент управления.