ecceene | a2 - Developer Guide ## Sections • [User Interface](https://doc.ecceene.com/a2-developer-guide/user-interface.md): This guide shows how to build user interfaces for processes on the ecceene Automation v2 frontend. You work in your own app folder, use the… • [Getting Started](https://doc.ecceene.com/a2-developer-guide/user-interface/getting-started.md): 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… • [Building Pages](https://doc.ecceene.com/a2-developer-guide/user-interface/building-pages.md): A process app consists of up to five kinds of pages. Each has a fixed place and a fixed file name, so the platform finds it without any registration.… • [Start Form](https://doc.ecceene.com/a2-developer-guide/user-interface/building-pages/start-form.md): The start form collects the data a process needs to start. The platform adds saving as draft, continuing a draft, submitting and the confirmation… • [Process Instance Page](https://doc.ecceene.com/a2-developer-guide/user-interface/building-pages/process-instance-page.md): The process instance page shows one business case: its data, documents, diagram, open tasks and history. File:… • [Task Page](https://doc.ecceene.com/a2-developer-guide/user-interface/building-pages/task-page.md): A task page is the form of one user task of your process, e.g. an approval. It opens in a new browser tab when a user works on a task from the task… • [Task Detail Renderer](https://doc.ecceene.com/a2-developer-guide/user-interface/building-pages/task-detail-renderer.md): The task list on the dashboard and on /tasks shows a detail pane for the selected task. State, owner and the buttons Claim , Release and Open come… • [App Dashboard](https://doc.ecceene.com/a2-developer-guide/user-interface/building-pages/app-dashboard.md): An app dashboard is the home page of your process app: a list of all cases, a tile to start a new one and the user’s saved drafts. File: free, by… • [Page Validator](https://doc.ecceene.com/a2-developer-guide/user-interface/building-pages/page-validator.md): A validator adds behaviour to a form page: show and hide sections depending on answers, check fields against each other, set defaults. It is a small… • [UI Components](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components.md): The Ecc components are the building blocks of every page. They are React components of the platform ( @/ecc/components/... ) that read data, show it… • [Component Basics](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/component-basics.md): All field components share one set of basic props, defined once in the component base ( EccBase , props type BaseProps ). They are all optional;… • [EccText](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/ecctext.md): EccText shows a single line of text and, with editable , lets the user enter it. TSX import { EccText } from "@/ecc/components/forms/EccText"; The… • [EccTextarea](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/ecctextarea.md): EccTextarea shows and edits longer text - as plain text or, with richText , in a WYSIWYG editor. TSX import { EccTextarea } from… • [EccNumber](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/eccnumber.md): EccNumber displays numbers, amounts and percentages in the platform format (German locale). It is a display component. TSX import { EccNumber } from… • [EccDate](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/eccdate.md): EccDate displays dates and times - absolute, relative (“3 hours ago”) or both - and produces ISO dates for the output. TSX import { EccDate } from… • [EccBoolean](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/eccboolean.md): EccBoolean shows and edits a yes/no value as checkbox or toggle switch. TSX import { EccBoolean } from "@/ecc/components/forms/EccBoolean"; The… • [EccDropDown](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/eccdropdown.md): EccDropDown lets the user choose one or several options - as native select, as searchable list or with a server-side search. TSX import { EccDropDown… • [EccRadioGroup](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/eccradiogroup.md): EccRadioGroup shows all options at once - as radio buttons (single) or checkboxes (multiple). TSX import { EccRadioGroup } from… • [EccPassword](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/eccpassword.md): EccPassword shows and edits secret values - passwords, API keys, PINs. The value is masked; an eye button reveals it for three seconds. TSX import {… • [EccButton](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/eccbutton.md): EccButton runs an async action and shows its state: idle, loading, success, error. It reads the result of platform API calls automatically. TSX… • [Layout Components](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/layout-components.md): Four small components and the tab classes structure a page. Combine them with the Bootstrap grid ( row , col-md-* ). Component Purpose Hidden by a… • [EccPanel](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/layout-components/eccpanel.md): EccPanel is a titled box around a part of a form. The header shows an optional icon and title; with collapsible a click on the header folds the… • [EccGroup](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/layout-components/eccgroup.md): EccGroup is a labelled group of fields inside a panel. With collapsible a click on the label folds the group. TSX import { EccGroup } from… • [EccLayout](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/layout-components/ecclayout.md): EccLayout places its children below each other ( vertical ) or next to each other ( horizontal ), aligned left or right. TSX import { EccLayout }… • [EccHideable](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/layout-components/ecchideable.md): EccHideable is an invisible container whose only purpose is to be shown or hidden as a whole by a page validator . Use it to hide several fields or… • [Tabs](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/layout-components/tabs.md): Tabs are not a component but plain markup with the platform classes ecc-tabs , ecc-tab , ecc-tab-active and ecc-tab-content . The page keeps the… • [JSON Tools](https://doc.ecceene.com/a2-developer-guide/user-interface/ui-components/json-tools.md): Four components help while you build pages. They are meant for development and test pages, not for end users. EccGenerateJsonOutputButton Copies the… • [Widgets](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets.md): Widgets are ready-made page parts of the platform with their own data loading. You place them on a page; they fetch what they need from the business… • [EccPageHeader](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccpageheader.md): EccPageHeader is the standard top of every app page: headline, short description and up to two content areas on the right. TSX import EccPageHeader… • [EccPageFooter](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccpagefooter.md): EccPageFooter is the fixed footer of a start form with Cancel , Save (draft) and Submit . It collects the output of all fields of the page (every… • [EccNewProcessInstance](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccnewprocessinstance.md): EccNewProcessInstance shows at the top of a start form which process is created, by whom, and - after the first save - the draft id. TSX import {… • [EccProcessInstance](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccprocessinstance.md): EccProcessInstance is the compact header of a running case: business key (click to copy), version, state badge, start, last change and process. TSX… • [ProcessDetail](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/processdetail.md): ProcessDetail is the right-hand pane of a case with the tabs Tasks and History . TSX import { ProcessDetail } from… • [EccProcessHistory](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccprocesshistory.md): EccProcessHistory shows the history of a case as a timeline: steps, task changes and custom entries from the process model, with user and time -… • [EccProcessDiagram](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccprocessdiagram.md): EccProcessDiagram shows the BPMN diagrams of a case: the root process and all its sub-processes, with completed steps, the active step and the path… • [EccProcessTasks](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccprocesstasks.md): EccProcessTasks lists the user tasks of a case - open and finished - with title, start time, group or owner, and a button to work on open tasks. TSX… • [EccTasks](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/ecctasks.md): EccTasks is the task list of the logged-in user - on the dashboard and on /tasks . It shows the tasks of all cases with search, sorting, paging,… • [EccTasksDetail](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/ecctasksdetail.md): EccTasksDetail is the detail pane next to EccTasks with two tabs: Detail and History . TSX import { EccTasksDetail } from… • [EccWidget](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccwidget.md): EccWidget is a dashboard tile with title, reload button and auto-refresh. You provide a loader and render the result. TSX import { EccWidget } from… • [ProcessCountWidget](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/processcountwidget.md): ProcessCountWidget is a ready-made dashboard tile that shows the number of active cases. TSX import { ProcessCountWidget } from… • [EccTable](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/ecctable.md): EccTable is a table with search, paging, sorting and reload, based on AG Grid. The task list and the list of drafts are built on it. TSX import… • [EccProcessTemplate](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccprocesstemplate.md): EccProcessTemplate shows tiles to start new cases. Each tile opens the start form of its process in a new tab ( /process/start/{processId} ). TSX… • [EccSavedProcesses](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccsavedprocesses.md): EccSavedProcesses lists the drafts of the logged-in user with search and paging. Together with SavedProcessDetail it lets the user continue or delete… • [SavedProcessDetail](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/savedprocessdetail.md): SavedProcessDetail shows the selected draft with continue and delete . TSX import { SavedProcessDetail } from… • [EccNotFound](https://doc.ecceene.com/a2-developer-guide/user-interface/widgets/eccnotfound.md): EccNotFound is the page content for an object that does not exist or that the user may not see. The platform shows it for start forms, process… • [Hooks and Utilities](https://doc.ecceene.com/a2-developer-guide/user-interface/hooks-and-utilities.md): Hooks Hook Import Returns / does useAuth() @/ecc/auth/AuthProvider user ( givenName , familyName , preferredUsername , email ), accessToken ,… • [Translations](https://doc.ecceene.com/a2-developer-guide/user-interface/translations.md): All texts your users see belong into the translation files - German and English together. File Content src/apps/i18n/en.json English texts of all… • [Objects](https://doc.ecceene.com/a2-developer-guide/objects.md): The objects of the platform - what the business service returns, what widgets show and what processes store. Each object has its own page with all… • [EccProcess](https://doc.ecceene.com/a2-developer-guide/objects/eccprocess.md): EccProcess describes a business case: a running or finished process instance, a saved draft or a process definition. A process instance, a saved… • [EccTask](https://doc.ecceene.com/a2-developer-guide/objects/ecctask.md): EccTask describes a user task of a case - what a user has to do, who may do it and with which data. A user task of a process instance, as delivered… • [EccProcessHistoryEntry](https://doc.ecceene.com/a2-developer-guide/objects/eccprocesshistoryentry.md): EccProcessHistoryEntry is one entry of the history of a case, as returned by the history endpoint. In the API Reference and in the business service… • [EccProcessHistoryTask](https://doc.ecceene.com/a2-developer-guide/objects/eccprocesshistorytask.md): EccProcessHistoryTask is the task summary that the history endpoint adds to user task entries with format=ui (field task of EccProcessHistory ). User… • [EccProcessNode](https://doc.ecceene.com/a2-developer-guide/objects/eccprocessnode.md): EccProcessNode is a node of a process model or of a running instance - a step the case has passed or is in. A node of a process model or process… • [EccProcessError](https://doc.ecceene.com/a2-developer-guide/objects/eccprocesserror.md): EccProcessError holds the error information of a process instance in error state (field error of EccProcess ). Error information of a process… • [EccUser](https://doc.ecceene.com/a2-developer-guide/objects/eccuser.md): EccUser is the logged-in user as seen by the business service, built from the Keycloak access token of the request. The authenticated user, built… • [EccUserRef](https://doc.ecceene.com/a2-developer-guide/objects/eccuserref.md): EccUserRef is a reference to a user inside other objects - who saved a draft, who did a step in the history. Reference to a user. TypeScript import… • [EccProcessWidget](https://doc.ecceene.com/a2-developer-guide/objects/eccprocesswidget.md): EccProcessWidget holds the counters of open cases for dashboards. In the frontend the type is called EccProcessWidgetCount . Counters of open root… • [EccLog](https://doc.ecceene.com/a2-developer-guide/objects/ecclog.md): EccLog is an entry of the application log of the business service. Application log entry of the business service, stored in ‘ecchistory’. TypeScript… • [EccEvent](https://doc.ecceene.com/a2-developer-guide/objects/eccevent.md): EccEvent is a user event that the frontend reports to the business service. A user event reported by the frontend. Fields Field Type Description _id… • [EccApiResponse](https://doc.ecceene.com/a2-developer-guide/objects/eccapiresponse.md): EccApiResponse is the envelope of every response of the business service. The payload - one of the other objects or a list of them - is in data .… • [EccException](https://doc.ecceene.com/a2-developer-guide/objects/eccexception.md): EccException is the payload ( data ) of an error response with a defined error code. Application exception with error code and i18n message Fields… • [EccBo](https://doc.ecceene.com/a2-developer-guide/objects/eccbo.md): EccBo is the base class for business objects in the process service. Every business object of a process - the request, a decision, a person - extends… • [EccPerson](https://doc.ecceene.com/a2-developer-guide/objects/eccperson.md): EccPerson is the standard contact object in process data - requester, contact person, decision maker. Java import com.ecceene.bpm.EccPerson;… • [EccDecisionBoolean](https://doc.ecceene.com/a2-developer-guide/objects/eccdecisionboolean.md): EccDecisionBoolean is the standard result of an approval step: yes or no, with reason, time and decision maker. Java import… • [Process](https://doc.ecceene.com/a2-developer-guide/process.md): This section is for process modellers and developers who build the BPMN side of an app: how to name processes and tasks so the user interface finds… • [Naming Conventions](https://doc.ecceene.com/a2-developer-guide/process/naming-conventions.md): The user interface finds the pages of your app from the ids and names in the BPMN model. Choose them with that in mind. Process id Rule Why lower… • [Business Objects](https://doc.ecceene.com/a2-developer-guide/process/business-objects.md): Business data of a process is modelled as Java classes (the process variables). Extend the ecceene base class so every object carries its type - user… • [Process History in BPMN](https://doc.ecceene.com/a2-developer-guide/process/process-history-in-bpmn.md): Every step of every process is recorded automatically in the process history - you do not model anything for it. Two things are in your hands: custom… • [Reading the Process History](https://doc.ecceene.com/a2-developer-guide/process/reading-the-process-history.md): The history of a business case is available from the business service as one list - the root process and all its sub-processes together. In a page… • [Reading the Process Diagram](https://doc.ecceene.com/a2-developer-guide/process/reading-the-process-diagram.md): The diagram of a business case - the root process and all its sub-processes - comes from the business service already in the look of the application.… • [Business Key](https://doc.ecceene.com/a2-developer-guide/process/business-key.md): Every process instance gets a business key when it is started - a readable identifier for users, e-mails and phone calls. The format is configured…