Aplikacje Noe Wewnętrzne

Aplikacje wewnętrzne to apki Noe, które wstrzykują się w istniejące strony Intum i dodają tam nowe funkcje albo zmieniają domyślne zachowanie systemu. Nie mają własnej strony - ładują się obok już istniejącego widoku, jak skrypt-rozszerzenie.

Typowe zastosowania: podświetlanie wybranych wierszy na liście, dodatkowe przyciski na karcie klienta, własne wykresy w widoku zadania, automatyczne wypełnianie pól formularza, integracja z zewnętrznym API uruchamiana z konkretnego widoku.

Jak to działa technicznie

W formularzu aplikacji wpisujesz wartość pola Show in module - to klucz, który mówi Intum gdzie apka ma się wstrzyknąć. Może to być:

• nazwa całego modułu (np. crm) - apka pojawi się w menu bocznym tego modułu jako dodatkowy element
• pełna ścieżka kontroler/akcja (np. mail/emails/index) - apka załaduje się tylko na tej konkretnej stronie

Gdy użytkownik otwiera taką stronę, Intum dokleja do HTML znacznik <script src="/a/<id>.js"> (dla silnika JS) albo odpowiedni kontener z apką skompilowaną z Svelte/Vue/React. Apka ma dostęp do window.NoeAppContext z danymi zalogowanego użytkownika i może manipulować DOM-em strony.

Kontekst użytkownika (window.NoeAppContext)

Apka osadzona w module ma dostęp do obiektu window.NoeAppContext:

{
  user: {
    login: "jan.kowalski",
    email: "jan@example.com",
    name: "Jan Kowalski",
    role: "admin",
    team_ids: [1, 2],
    team_names: ["Sprzedaż", "IT"],
    group_ids: [5],
    group_names: ["Menedżerowie"],
    department_ids: [3],
    department_names: ["Dział IT"]
  }
}

Dzięki temu apka może np. pokazać inne dane administratorowi a inne zwykłemu użytkownikowi.

Wartości pola show_in_module

Całe moduły (menu boczne)

• organize - zadania, projekty
• mail - poczta
• crm - klienci, kontakty, oferty
• helpdesk - zgłoszenia
• kb - baza wiedzy
• cms - strony www
• connect - integracje (InConnector)
• voip - telefonia
• form - formularze
• insight - raporty i analityka
• billing - subskrypcje i płatności
• drive - pliki
• fiskator - dokumenty fiskalne
• commerce - sklep
• account - ustawienia konta
• dashboard - pulpit po zalogowaniu

Konkretne strony (kontroler/akcja)

Poczta:

• mail/emails/index - inbox i listy maili
• mail/emails/show - widok pojedynczego wątku
• mail/folders/index - foldery pocztowe

Zadania i projekty:

• organize/tasks/index - lista zadań
• organize/tasks/show - widok zadania
• organize/projects/index - lista projektów
• organize/projects/show - widok projektu
• organize/tasklists/index - listy zadań
• organize/tasklists/show - widok listy zadań
• organize/posts/index - posty zespołowe

CRM:

• crm/clients/index - lista klientów
• crm/clients/show - karta klienta
• crm/contacts/index - lista kontaktów
• crm/contacts/show - karta kontaktu
• crm/deals/index - lista ofert
• crm/deals/show - widok oferty
• crm/notes/index - notatki CRM

Helpdesk:

• helpdesk/tickets/index - lista zgłoszeń
• helpdesk/tickets/show - widok zgłoszenia
• helpdesk/desks/index - kolejki/biurka

Baza wiedzy:

• kb/entries/index - lista wpisów
• kb/entries/show - widok wpisu
• kb/categories/index - kategorie

Strony CMS:

• cms/sites/index - lista stron
• cms/pages/index - lista podstron
• cms/articles/index - artykuły
• cms/layouts/index - layouty

Integracje (Connect / InConnector):

• connect/connectors/index - lista konektorów
• connect/connectors/show - widok konektora
• connect/flows/index - lista flow
• connect/apps/index - aplikacje integracyjne

VoIP:

• voip/calls/index - historia połączeń
• voip/sips/index - konta SIP
• voip/autocalls/index - autocalle

Formularze:

• form/forms/index - lista formularzy
• form/forms/show - widok formularza
• form/results/index - wyniki formularzy

Raporty:

• insight/reports/index - raporty
• insight/datasets/index - zbiory danych
• insight/alerts/index - alerty

Płatności:

• billing/subscriptions/index - subskrypcje
• billing/payments/index - płatności
• billing/customers/index - kontrahenci
• billing/products/index - produkty rozliczeniowe
• billing/plans/index - plany cenowe

Pliki:

• drive/files/index - pliki
• drive/folders/index - foldery
• drive/documents/index - dokumenty

Sklep:

• commerce/products/index - produkty
• commerce/orders/index - zamówienia
• commerce/categories/index - kategorie
• commerce/invoices/index - faktury
• commerce/settings - ustawienia sklepu

Fiskalizacja:

• fiskator/documents/index - dokumenty fiskalne
• fiskator/printers/index - drukarki
• fiskator/print_requests/index - zlecenia wydruku

Konto:

• account/users/index - lista użytkowników
• account/users/show - profil użytkownika
• account/modules - moduły konta
• account/api_tokens/index - tokeny API
• account/groups/index - grupy uprawnień
• account/departments/index - działy

Skąd się bierze ta wartość

Format to controller_path/action_name z railsowego routingu. Np. widok https://twoje.intum.pl/organize/tasks/123 korzysta z kontrolera Organize::TasksController i akcji show - czyli show_in_module to organize/tasks/show.

Nie wszystkie strony obsługują wstrzykiwanie. Jeśli apka się nie pojawia, sprawdź:

• czy pole Active jest zaznaczone
• czy w show_in_module nie ma literówki
• czy w konsoli przeglądarki nie ma błędu JS z apki

O czym pamiętać

• apka wewnętrzna ma realny wpływ na UX - błąd JS może rozwalić stronę użytkownikom; testuj na sobie zanim wgrasz na produkcję
• w trybie inline style (jak w przykładzie maili) zmiany nie kolidują z motywami Intum, ale dla większych zmian rozważ Tailwind kompilowany
• jedna strona może mieć wiele apek z tym samym show_in_module - wszystkie się załadują w kolejności utworzenia
• aplikacje wewnętrzne nie wstrzykują się publicznie - tylko zalogowani użytkownicy konta je widzą

Konkretny przykład

Krok po kroku z gotowym kodem JS, który podświetla maile od konkretnego nadawcy w inboxie: Jak dodać własną apkę Noe podświetlającą maile od konkretnego nadawcy

Powiązane

• Aplikacje Noe - ogólny opis aplikacji Noe i ich rodzajów