Внутрішні застосунки - це застосунки Noe, які вбудовуються в наявні сторінки Intum і додають там нові функції або змінюють типову поведінку системи. Вони не мають власної сторінки - завантажуються поруч із уже наявним виглядом, як скрипт-розширення.
Типові застосування: підсвічування вибраних рядків у списку, додаткові кнопки на картці клієнта, власні графіки у вигляді завдання, автоматичне заповнення полів форми, інтеграція із зовнішнім API, що запускається з конкретного вигляду.
Як це працює технічно
У формі застосунку ви вписуєте значення поля Show in module - це ключ, який каже Intum, куди застосунок має вбудуватися. Це може бути:
- назва цілого модуля (наприклад,
crm) - застосунок з’явиться в бічному меню цього модуля як додатковий елемент - повний шлях
контролер/дія(наприклад,mail/emails/index) - застосунок завантажиться лише на цій конкретній сторінці
Коли користувач відкриває таку сторінку, Intum додає до HTML тег <script src="/a/<id>.js"> (для рушія JS) або відповідний контейнер із застосунком, скомпільованим зі Svelte/Vue/React. Застосунок має доступ до window.NoeAppContext з даними авторизованого користувача і може маніпулювати DOM-ом сторінки.
Контекст користувача (window.NoeAppContext)
Застосунок, вбудований у модуль, має доступ до об’єкта window.NoeAppContext:
{
user: {
login: "ivan.kovalenko",
email: "[email protected]",
name: "Іван Коваленко",
role: "admin",
team_ids: [1, 2],
team_names: ["Продажі", "IT"],
group_ids: [5],
group_names: ["Менеджери"],
department_ids: [3],
department_names: ["Відділ IT"]
}
}
Завдяки цьому застосунок може, наприклад, показати інші дані адміністраторові, а інші звичайному користувачеві.
Значення поля show_in_module
Цілі модулі (бічне меню)
-
organize- завдання, проєкти -
mail- пошта -
crm- клієнти, контакти, пропозиції -
helpdesk- звернення -
kb- база знань -
cms- вебсторінки -
connect- інтеграції (InConnector) -
voip- телефонія -
form- форми -
insight- звіти та аналітика -
billing- підписки та платежі -
drive- файли -
fiskator- фіскальні документи -
commerce- магазин -
account- налаштування облікового запису -
dashboard- панель після входу
Конкретні сторінки (контролер/дія)
контролер/дія)Пошта:
-
mail/emails/index- вхідні та списки листів -
mail/emails/show- вигляд окремого ланцюжка -
mail/folders/index- поштові теки
Завдання та проєкти:
-
organize/tasks/index- список завдань -
organize/tasks/show- вигляд завдання -
organize/projects/index- список проєктів -
organize/projects/show- вигляд проєкту -
organize/tasklists/index- списки завдань -
organize/tasklists/show- вигляд списку завдань -
organize/posts/index- командні пости
CRM:
-
crm/clients/index- список клієнтів -
crm/clients/show- картка клієнта -
crm/contacts/index- список контактів -
crm/contacts/show- картка контакту -
crm/deals/index- список пропозицій -
crm/deals/show- вигляд пропозиції -
crm/notes/index- нотатки CRM
Служба підтримки:
-
helpdesk/tickets/index- список звернень -
helpdesk/tickets/show- вигляд звернення -
helpdesk/desks/index- черги/дески
База знань:
-
kb/entries/index- список статей -
kb/entries/show- вигляд статті -
kb/categories/index- категорії
Сторінки CMS:
-
cms/sites/index- список сайтів -
cms/pages/index- список підсторінок -
cms/articles/index- статті -
cms/layouts/index- макети
Інтеграції (Connect / InConnector):
-
connect/connectors/index- список конекторів -
connect/connectors/show- вигляд конектора -
connect/flows/index- список flow -
connect/apps/index- інтеграційні застосунки
VoIP:
-
voip/calls/index- історія дзвінків -
voip/sips/index- облікові записи SIP -
voip/autocalls/index- автодзвінки
Форми:
-
form/forms/index- список форм -
form/forms/show- вигляд форми -
form/results/index- результати форм
Звіти:
-
insight/reports/index- звіти -
insight/datasets/index- набори даних -
insight/alerts/index- алерти
Платежі:
-
billing/subscriptions/index- підписки -
billing/payments/index- платежі -
billing/customers/index- контрагенти -
billing/products/index- розрахункові продукти -
billing/plans/index- цінові плани
Файли:
-
drive/files/index- файли -
drive/folders/index- теки -
drive/documents/index- документи
Магазин:
-
commerce/products/index- продукти -
commerce/orders/index- замовлення -
commerce/categories/index- категорії -
commerce/invoices/index- рахунки-фактури -
commerce/settings- налаштування магазину
Фіскалізація:
-
fiskator/documents/index- фіскальні документи -
fiskator/printers/index- принтери -
fiskator/print_requests/index- завдання на друк
Обліковий запис:
-
account/users/index- список користувачів -
account/users/show- профіль користувача -
account/modules- модулі облікового запису -
account/api_tokens/index- токени API -
account/groups/index- групи прав доступу -
account/departments/index- відділи
Звідки береться це значення
Формат - це controller_path/action_name з railsового роутингу. Наприклад, вигляд https://twoje.intum.pl/organize/tasks/123 використовує контролер Organize::TasksController та дію show - тобто show_in_module - це organize/tasks/show.
Не всі сторінки підтримують вбудовування. Якщо застосунок не з’являється, перевірте:
- чи позначено поле Active
- чи немає в
show_in_moduleпомилки в написанні - чи немає в консолі браузера помилки JS із застосунку
Про що пам’ятати
- внутрішній застосунок реально впливає на UX - помилка JS може зламати сторінку користувачам; тестуйте на собі, перш ніж вивантажите на продакшн
- у режимі inline style (як у прикладі з листами) зміни не конфліктують із темами Intum, але для більших змін розгляньте компільований Tailwind
- одна сторінка може мати кілька застосунків з тим самим
show_in_module- усі вони завантажаться у порядку створення - внутрішні застосунки не вбудовуються публічно - їх бачать лише авторизовані користувачі облікового запису
Конкретний приклад
Крок за кроком із готовим кодом JS, що підсвічує листи від конкретного відправника у вхідних: Як додати власний застосунок Noe, що підсвічує листи від конкретного відправника
Пов’язане
- Застосунки Noe - загальний опис застосунків Noe та їхніх видів