User Interface

Hooks and Utilities

Hooks

Hook

Import

Returns / does

`useAuth()`	`@/ecc/auth/AuthProvider`	`user` (`givenName`, `familyName`, `preferredUsername`, `email`), `accessToken`, `logout()`
`useHideSideNav()`	`@/ecc/context/LayoutContext`	hides the side navigation while the page is open - use on forms
`usePageTitle(title)`	`@/ecc/core/usePageTitle`	sets the browser tab title
`useNotification()`	`@/ecc/context/NotificationContext`	`showNotification("success" or "error", message)`
`useEccProcess()`	`@/ecc/core/EccProcessPageWrapper`	the case inside `EccProcessPageWrapper`
`useExistingProcess()`	`@/ecc/context/ProcessStartContext`	`existingProcess` - the draft a start form was opened with
`useEccOutput()`	`@/ecc/context/EccOutputContext`	`collectOutput()`, `getByPath(path)`, `getById(id)`

TSX

 const { user } = useAuth();
const { showNotification } = useNotification();
useHideSideNav();
usePageTitle(`Requisition ${process.businessKey}`);

showNotification("success", "Saved.");

Reading values: getJsonValue

TSX

 import { getJsonValue } from "@/ecc/core/eccJsonResolve";

const title  = getJsonValue<string>(task, "inputs.purchase.title");
const amount = getJsonValue<number>(process, "variables.purchase.netTotal") ?? 0;
const items  = getJsonValue<unknown[]>(task, "inputs.purchase.items") ?? [];

Backend calls: ApiService

Import the functions from @/ecc/services/ApiService. They add the login token, handle a session end and return the typed response.

Function

Returns

`fetchCurrentUser()`	the user incl. groups
`getProcessInstanceById(idOrBusinessKey)`	one case or `null`
`fetchProcessList(processId, page, size, query)`	cases of a process
`fetchSavedProcesses()`	drafts of the user
`fetchProcessHistory(processInstanceId, include?)`	history entries prepared for display (`format=ui`), newest first; `include` e.g. `"gateway,subprocess"`
`getProcessTaskInstances(processInstanceId)`	all tasks of a case
`fetchTasks(page, size, query, sortBy, sortOrder, scope)`	tasks of the user
`getTaskById(taskId)`	one task or `null`
`claimTask(taskId)`, `releaseTask(taskId)`	task actions
`fetchProcessWidgetCount()`	counters for dashboards
`fetchProcessDefinitions()`, `fetchNodeSchema(...)`	process definitions and data structures

TSX

 const [process, setProcess] = useState<EccProcess | null>(null);
useEffect(() => { getProcessInstanceById("PR260930-3f9a1c2b").then(setProcess); }, []);

Objects in this example: EccProcess.

Do not call fetch yourself. If you need an endpoint that has no function yet, ask for it to be added to ApiService.

Types

Type

Import

`EccProcess`, EccTask, EccProcessHistoryEntry, EccApiResponse	`@/ecc/types/taskTypes`
`BaseProps`, `IconPreset`	`@/ecc/types/EccTypes`
`RendererProps`	`@/ecc/renderer/eccRendererRegistry`

Put your own business types (e.g. PurchaseInput) into src/apps/{processId}/types/.

Sections

Hooks and Utilities

Hooks

Reading values: getJsonValue

Backend calls: ApiService

Types

On this page