Создание и публикация клиентского расширения

Клиентское расширение разрабатывается на языке TypeScript с последующей компиляцией в JavaScript.

Чтобы создать клиентское расширение:

  1. Скопируйте к себе в рабочую папку каталог ProjectTemplates\TemplateWebExtension\ из репозитория WebClient-Samples.

  2. Настройте проект:

  3. Переименуйте папку TemplateWebExtension — укажите название расширения (например, "MyWebExtension").

  4. В файле MyWebExtension\copy-path.js измените значения:

    • SITE_ROOT — укажите относительный путь к папке, в которую будут выгружены файлы, полученные при сборке; для автоматизации процесса публикации файлов на сервере Web-клиента можно указать относительный путь к папке Web-клиента: \%WebCinstallDir%/Site.

    • EXTENSION_NAME — укажите название расширения (в данном примере — "MyWebExtension").

  5. Откройте папку MyWebExtension в командной строке и выполните команду: npm install.

  6. Создайте в папке MyWebExtension\src файл ts/tsx с кодом расширения.

    Примеры клиентских расширений приведены в следующих пунктах раздела, а также в репозитории "ДоксВижн".

  7. Измените содержимое файла src\Index.ts. В файле должна выполняться регистрация расширения с учетом реализованных в нем функций:

extensionManager.registerExtension({
    name: "My web Extension",
    version: "1.0",

    getLocalizations: ... , (1)
    controls: ... , (2)
    globalEventHandlers: ... , (3)
    globalServices: ... , (4)
    layoutServices: … (5)

})
1 Расширение добавляет локализованные ресурсы.
2 Расширение добавляет элементы управления.
3 Расширение добавляет обработчики событий.
4 Расширение добавляет публичные сервисы.
5 Расширение добавляет публичные сервисы, имеющие особое поведение в рамках каждой конкретной разметки.

Описание изменений, которые необходимо выполнить в файле Index.ts, приведено в описании примеров расширений, добавляющих обработчики событий, локализованные ресурсы и клиентские компоненты элементов управления.

  1. Откройте папку MyWebExtension в командной строке и выполните команду: npm run build.

    Данная команда выполнит компиляцию проекта. В папку, указанную в параметре SITE_ROOT, будут выгружены файлы: extension.js, extension.js.map, extension.css и extension.css.map. Файлы .map используются для отладки кода в браузере.

    Npm может отслеживать изменения в исходных файлах, и при этом самостоятельно выполнять сборку. Выполните команду, чтобы включить режим отслеживания: npm run watch.

  2. Скопируйте папку %SITE_ROOT%\Content\Modules\MyWebExtension в \%WebCinstallDir%\5.5\Site\Content\Modules.

    Если в переменной SITE_ROOT указан каталог Site сервера Web-клиента, то копирование будет выполнено автоматически при сборке проекта.

    После первого копирования файлов нужно перезапустить сервер IIS с приложением Web-клиента. При последующих обновлениях содержимого скриптов можно перезапустить IIS или очистить кэш браузера, или вызвать веб-метод http://WebCServer/WebClient/Navigator/ResetClientCache и обновить страницу.

  3. После завершения отладки клиентского расширения может быть собрана "релизная версия". Для этого, находясь в командной строке в папке MyWebExtension, выполните команду: npm run build:prod.

    Действие данной команды аналогично действию команды npm run build, за исключением того, что к полученным файлам будет применена процедура минификации (минимизации). Полученные файлы также необходимо скопировать в папку \%WebCinstallDir%\5.5\Site\Content\Modules.

    Информация о загруженных клиентских расширениях отображается в Web-клиенте в окне "О программе".