Создание точки расширения

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

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

1. Перейти в созданную директорию на прошлом шаге

2. Создать компонент, используемый в точке расширения <projectRoot>/custom.tsx

   import {Universe} from '@universe-ee/sdk';
   const {React} = Universe.Vendor;
   const {Uikit, Router} = Universe.Platform;
   
   type AbstractCardStore = Universe.Platform.Record.AbstractCardStore<Universe.Platform.Record.IRecordEntity>;
   
   interface Props {
     dataCardStore: AbstractCardStore;
     label: string;
   }
   
   export class CustomDataCardButton extends React.Component<Props> {
     onClick = () => {
         Router.routerStore.setRoute('EnumerationPage');
         
         console.log('UE_BTN_WORK!!!')
     };
     
     render() {
         return (
             <span>
                 <Uikit.Button 
                   intent={Uikit.INTENT.DANGER} 
                   onClick={this.onClick}
                 >
                     Go to enumerations!
                 </Uikit.Button>
             </span>
         );
     }
   }
   Copy

   Далее этот модуль, необходимо добавить в index.ts

   import {Universe} from '@universe-ee/sdk';
   import {CustomDataCardButton} from '<projectRoot>/custom.tsx';
   
   export default {
   userExits: [
     {
       type: 'DataCardButton',
       moduleId: 'DataCardButtonUniqueID',
       active: true,
       system: false,
       component: CustomDataCardButton,
       resolver: (dataCardStore) => true,
       meta: {
         label: 'Header button',
         intent: Uikit.INTENT.INFO
       }
     }
   ]
   } satisfies Universe.Platform.UserExit.ExternalModuleDefault;
   Copy

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

   npm run build
   Copy

   В результате исполнения команды в каталоге dist будут созданы артефакты сборки:

   • index.js
   • index.css

4. Далее можно переходить на шаг подключения собранных модулей