Быстрый старт

Кастомизация пользовательского интерфейса происходит подключением к приложению внешних модулей пользователя. Внешние модули содержат список точек расширения, которые могут дополнять/изменять поведение приложения.

В качестве примера кастомизации, в шапку приложения будет добавлена кнопка, используя точку расширения RightHeaderItem:

1. Создать директорию проекта <projectRoot> и перейти в неё.

2. Создать внешний модуль <projectRoot>/custom.js:

   const {Platform, Vendor} = window.Universe;
   const {Uikit, Locale} = Platform;
   
   Locale.i18n.addResourceBundle(Locale.Locales.Ru, {HeaderButton: {text: 'Нажми меня!'}});
   Locale.i18n.addResourceBundle(Locale.Locales.En, {HeaderButton: {text: 'Click me!'}});
   
   export class HeaderButton extends Vendor.React.Component {
       render() {
           return (
               Vendor.React.createElement(
                   Uikit.Button,
                   {intent: Uikit.INTENT.DANGER},
                   Locale.i18n.t('HeaderButton>text')
               )
           );
       }
   }
   
   export default {
       userExits: [
           {
               type: 'RightHeaderItem',
               moduleId: 'uniqueId',
               active:true,
               system: false,
               resolver: () => true,
               meta: {
                   order: 1,
               },
               component: HeaderButton,
           }
       ]
   };
   Copy

   В данном примере внешний модуль написан на чистом JavaScript, для быстрого подключения его к приложению, без дополнительных шагов сборки. Если есть необходимость использовать TypeScript, JSX, и подключение сторонних библиотек, то следует обратиться к разделу Сборка внешних модулей.

3. Создать и настроить конфигурационный файл <projectRoot>/customer.json:

   {
       "APP_TYPE": [],
       "serverUrl": "/universe-backend/api/",
       "EXTERNAL_MODULES": [
           "./CUX/custom.js"
       ]
   }
   Copy

   В свойстве EXTERNAL_MODULE указываются пути к внешним модулям, относительно корневой директории приложения в docker-контейнере: /usr/share/nginx/html/.

4. Запустить docker-контейнер приложения:

   docker run %{APP_DOCKER_IMAGE}% \
       -p '80:80' \
       -v ./customer.json:/usr/share/nginx/html/customer.json \
       -v ./custom.js:/usr/share/nginx/html/CUX/custom.js\
       -e BACKEND_ADDRESS=$BACKEND_ADDRESS 
   Copy

   Где $BACKEND_ADDRESS - Адрес запущенного бэкенда системы (например: http://localhost:8080)

   Внутри docker-контейнера:

   • /usr/share/nginx/html/customer.json - Путь к файлу конфигурации приложения
   • /usr/share/nginx/html/CUX/ - Рекомендуемая директория для расположения внешних модулей

5. Приложение будет доступно по адресу: http://localhost. После запуска приложения, добавленную точку расширения можно увидеть в правом углу шапки.