Instrukcja modyfikacji interfejsu Comarch MES 2025.1

Spis treści

Możliwość modyfikacji interfejsu w Comarch MES (Nowy interfejs)

Procedura uruchomienia gotowych przykładów

Procedura wdrożenia własnych dodatków

Możliwość modyfikacji interfejsu w Comarch MES (Nowy interfejs)

Poniższa instrukcja opisuje mechanizm umożliwiających modyfikację interfejsu Comarch MES od strony programistycznej. Możliwość wprowadzania zmian została udostępniona w wersji Comarch MES 2025.0 (Nowy interfejs). Modyfikacje umożliwiają między innymi:

  • Personalizację nazewnictwa – zmianę etykiet, nazw istniejących elementów interfejsu, aby były zgodne z terminologią zakładu produkcyjnego,
  • Rozszerzenie funkcjonalności – dodanie przycisków wywołujących niestandardowe akcje,
  • Integrację z zewnętrznymi aplikacjami – możliwość uruchamiania zewnętrznych aplikacji z poziomu MES, co pozwala automatyzować przepływ pracy,
  • Dynamiczne zarządzanie kontekstem operacyjnym – dostęp do bieżących ustawień i parametrów konfiguracyjnych, które mogę automatycznie być przekazywane do zewnętrznych aplikacji bez konieczności manualnego przepisywania.

Wszystkie modyfikacje opierają się na statycznej strukturze plików serwera WWW (Nginx). Poniższa tabela przedstawia kluczowe lokalizacje odpowiedzialne za działanie rozszerzeń:

ObiektLokalizacja w katalogu instalacyjnymRola w procesie konfiguracyjnym
Plik sterujący (Hydra)\nginx\wwwroot\assets\hydra.jsGłówny plik zarządzający, w którym rejestrowane są importy oraz funkcje typu callback.
Katalog rozszerzeń\nginx\wwwroot\assets\addOns\Dedykowane miejsce, do którego należy wgrywać wszystkie własne pliki źródłowe .js.
Rejestr komponentów\nginx\wwwroot\assets\addOns\constants\componentsNames.jsPlik zawierający listę bazowych komponentów Angulara, na których dopuszczalne jest wywoływanie modyfikacji.
Plik startowy aplikacji\nginx\wwwroot\ index.htmlGłówny plik HTML, w którym ładowane są skrypty przed inicjalizacją rdzenia systemu.

Wskazówka
Hydra umożliwia dostęp do globalnego obiektu window[‘store’], który pozwala na dynamiczne reagowanie kodu na stan aplikacji. Przykład jego wykorzystania (do odczytania ustawień konfiguracyjnych po zalogowaniu – np. id zalogowanego operatora) został umieszonych w przykładowym pliku allOperationsList.js.

Uwaga
Nowe procesy uruchomione poprzez customowe przyciski, należy zamykać ręcznie po każdym użyciu przycisku (działanie analogiczne do starego interfejsu).

Procedura uruchomienia gotowych przykładów

W folderze instalacyjnym MES dostępne są gotowe scenariusze modyfikacji, między innymi:

ModyfikacjaNazwa plikuDziałanie
Modyfikacja logowania\nginx\wwwroot\assets\addOns\login.jsPodmienia nazwę istniejącego, domyślnego przycisku służącego do logowania w systemie
Katalog rozszerzeń\nginx\wwwroot\assets\
addOns\allOperationsList.js		Podmienia nazwy przycisków generowania dokumentów PW oraz RW na listach operacji, dodaje nowy, niestandardowy przycisk w dolnej sekcji pod listą, a także demonstruje odczyt konfiguracji ze store'a.
Użycie wywołuje zewnętrzną aplikację w nowym procesie.
Selekcja na podstawie gniazd\nginx\wwwroot\assets\
addOns\filtersList.js		Automatycznie zaznacza określone gniazda robocze na liście filtrów. Dostosowuje swoje działanie do otwartej listy.
Rozszerzenie tabeli Zlecenia produkcyjne\nginx\wwwroot\assets\
addOns\prodOrdersList.js		Odpowiada za dynamiczne rozszerzenie tabeli Zleceń Produkcyjnych o nową, spersonalizowaną wizualnie kolumnę „Status Info”.

Wskazówka
Część przykładowych plików .js dostępnym w folderze addOns, jest dodatkowo opisana w opowiadającym pliku “<nazwa pliku .js>Guide.md”.

Aby aktywować i przetestować działanie przykładów, należy wykonać następujące kroki:

  1. Otwórz plik z przykładowymi modyfikacjami, np. login.js (np. poprzez Visual Studio Code).
  2. Odkomentuj treść pliku (w VSC, po zaznaczeniu można użyć skrótu CTRL + /).
  3. Otwórz plik hydra.js.
  4. Odkomentuj fragmenty pliku odpowiadające plikowi z modyfikacjami (jak na zrzucie ekranu):
    1. Odpowiadający mu import,
    2. Odpowiadający switch oraz case,
  5. Zapisz zmiany i odśwież MES w przeglądarce, aby widzieć zmodyfikowany interfejs.
Fragmenty hydra.js do odkomentowania dla login.js

Uwaga
Należy zwrócić szczególną uwagę na zachowanie wielkości liter w nazwach – w razie wystąpienia niezgodności znaków, aplikacja się nie uruchomi.

Procedura wdrożenia własnych dodatków

Aby zaimplementować własne rozszerzenia należy zrealizować następujące korki:

  1. Otwórz plik componentsNames.js i upewnij się, że komponent, który chcesz zmodyfikować, znajduje się na liście obsługiwanych przez system.
  2. Stwórz nowy plik .js o odpowiedniej strukturze. Jako bezpośredni wzorzec i punkt odniesienia zaleca się wykorzystanie struktury pliku login.js.
  3. Umieść swój nowy plik .js w folderze addOns.
  4. Otwórz plik hydra.js, dodaj import swojej nowej funkcji, a następnie dopisz odpowiedni blok case wewnątrz metody callbackOnInit (ewentualnie w callbackOnDestroy – umożliwiającej czyszczenie modyfikacji po opuszczeniu danego obszaru).
  5. Otwórz plik index.html z katalogu wwwroot i dodaj do niego swój plik .js w znaczniku <script> (plik uwzględnia już przykłady, można je wykorzystać jako wzorzec). Pamiętaj, aby deklaracja znalazła się przed załadowaniem standardowych modułów aplikacji.
  6. Odśwież działanie aplikacji MES.

Wskazówka
Nazwa tworzonego pliku .js nie ma znaczenia, nie mniej sugerujemy, aby były skojarzone z nazwami komponentów, pod który się podpinamy.

Wskazówka
Nowo utworzone pliki .js mogą być umieszczane zarówno bezpośrednio w folderze addOns oraz w podfolderach – o ile zostanie to uwzględnione w plikach hydra.js oraz index.html (w ramach dostępnych przykładów zaprezentowane zostały oba scenariusze).

Uwaga
Należy zwrócić szczególną uwagę na zachowanie wielkości liter w nazwach – w razie wystąpienia niezgodności znaków, aplikacja się nie uruchomi.

Czy ten artykuł był pomocny?

Wyślij opinie