Getting Started

Your app folder

Everything that belongs to one process lives in one folder under src/apps/. The folder name is the processId of the root process in lower case.

 
src/apps/
├── i18n/
│   ├── de.json                           texts of all apps (German)
│   └── en.json                           texts of all apps (English)
└── purchase/                                 app of the process "purchase"
    ├── PurchaseDashboard.tsx                 overview page of the app (route /procurement)
    ├── PurchaseStarter.tsx                   start form           -> /process/start/purchase
    ├── PurchaseInstance.tsx                  process instance page -> /process/{processInstanceId}
    ├── renderer/
    │   └── PurchaseTaskDetailRenderer.tsx    task data in the task list
    └── tasks/
        ├── PurchaseTaskValidator.ts          shared validator of the task pages
        └── approverequestlevel1/
            └── ApproveRequestLevel1.tsx   page of the user task "Approve Request Level 1"

Start form, instance page, task pages and renderers are found automatically from their file names. You do not register them anywhere.

File names at a glance

Every page file needs a default export.

Run locally

 
npm install
cp .env.example .env      # fill in the Keycloak values
npm run dev               # http://localhost:5173, API calls go to the business service on port 8877

The business service and the process service must be running. npm run lint and npm run build check your code before you commit.

Checklist for a new process app

1. Create src/apps/{processId}/.
2. Add the texts under app.{processId} in src/apps/i18n/en.json and de.json (see Translations).
3. Build the start form {ProcessId}Starter.tsx - open /process/start/{processId} to test it.
4. Start a process and open it at /process/{processInstanceId}. Without an instance page you see the generic view; add {ProcessId}Instance.tsx when you want your own layout.
5. Open a task from the task list. The generic task page tells you the exact path of the task page file to create.
6. Add a {ProcessId}TaskDetailRenderer.tsx so the task list shows the business data of your tasks.
7. Optional: an app dashboard with its own route (see App Dashboard).

Rules

• Use the Ecc components and widgets for fields and layout, Bootstrap classes (row, col-md-4, …) for the grid.
• Load data only through the functions of @/ecc/services/ApiService - no own fetch calls.
• Put all visible texts into the translation files, German and English together.
• Import with the alias @ (= src/), e.g. import { EccText } from "@/ecc/components/forms/EccText";.
• Do not change files under src/ecc/ - they are shared by all apps.