Component Basics
All field components share one set of basic props, defined once in the component base (EccBase, props type BaseProps). They are all optional; without them a component is a plain read-only display. The examples on this page use EccText; the props work the same in every component listed below.
Label and info
<EccText fieldLabel="Cost center" value="4711" />
<EccText fieldLabel="Cost center" value="4711" info="<b>Cost center</b> of the requesting department." />
fieldLabel renders a label above the field; without it no label element exists. info adds a (?) button that opens a popover with the given HTML.
Value: direct or by path
Direct value - any string or expression:
<EccText value="Fixed text" />
<EccText value={`${task.name} (${task.state})`} />
Path into a data object - pass the whole object as data and a dot path as value:
<EccText value="inputs.purchase.title" data={task} />
<EccText value="inputs.purchase.requester.email" data={task} />
<EccText value="variables.purchase.requestType" data={process} />
A value is treated as a path when it contains at least one dot, no space and does not start with a digit. Everything else is displayed as text.
Texts with a dot and without a space - e-mail addresses, ids like purchase.approval01, version numbers like 1.0 - are read as paths and show up empty. Pass them as valueInit instead: valueInit={user?.email}.
| task | value of |
|
| empty (or |
| any |
|
| process |
|
| - | the process name |
For top-level fields use the direct form: value={process.processName}, value={task.name}. Paths are meant for nested data.
Missing paths never throw - the field stays empty. Use valueInit for a fallback:
<EccText value="inputs.purchase.costCenter" data={task} valueInit="not assigned" />
Paths do not support array indices. For list data read the array with getJsonValue and map it yourself.
Editable fields
<EccText fieldLabel="E-mail" value="purchase.requester.email" data={draft} editable mandatory valueOut />
|
| input instead of display |
|
| red star; the field is marked invalid while empty |
| - | start value of the input if the path gives nothing |
Output: valueOut
valueOut writes the field’s current value into the page result (start data or task output):
| same as the |
| this path |
omitted | no output |
<EccText value="purchase.title" data={draft} valueOut editable /> {/* -> purchase.title */}
<EccTextarea valueOut="output.decisionBoolean.comment" editable /> {/* -> output.decisionBoolean.comment */}
<EccText valueInit={user?.email} valueOut="output.decisionBoolean.decisionMaker.email" hidden />
Read-only and hidden fields can have valueOut too - that is how fixed values get into the result.
Hidden
<EccText valueInit="purchase.approval01" valueOut="output.decisionBoolean.decisionId" hidden />
hidden hides the field without removing it: its value is still written. A validator can hide fields at runtime with setHidden(id, true).
Id
<EccText id="purchase-requester-email" value="purchase.requester.email" data={draft} valueOut editable />
The id makes the field reachable for a validator (getById, setError, setHidden). Use unique, readable ids per page.
Copy to clipboard
|
| plain display |
|
| icon only as decoration |
|
| click on the text copies |
|
| click on the icon copies |
<EccText fieldLabel="Business key" value={process.businessKey} copyable showIcon iconPreset="hash" />
<EccText fieldLabel="Account" value="Konto: ACC-20250504-7728" copyValue="ACC-20250504-7728" copyable />
Icon presets: copy (default), clipboard, link, id, mail, key, hash, user. Tooltips: iconTooltip, fieldTooltip. The clipboard needs HTTPS or localhost.
Visibility by group
<EccNumber fieldLabel="Budget" value="variables.purchase.budget" data={process} allowedGroups={["purchase-controlling"]} />
The field is rendered only if the logged-in user is in at least one of the groups (Keycloak groups claim). Otherwise nothing is rendered.
This controls the display only. What a user may see and change is enforced by the backend.
Styling
| outer wrapper (label and field) |
| icon button |
|
|
<EccText value="Total" className="ecc-text fw-bold" align="right" style={{ marginTop: 12 }} />
All basic props
|
| - | id for validators |
|
| - | label above the field |
|
| - | info popover |
|
| - | text or dot path |
|
| - | object the path is resolved against |
|
| - | fallback / initial value |
|
|
| input mode |
|
|
| required marker |
|
| - | write value to the result |
|
|
| hide, keep value |
|
|
| enable copying |
|
|
| show the icon button |
|
|
| icon |
|
| displayed value | text to copy |
|
| "Copy to clipboard" (localized) | tooltips |
|
| - | groups that may see the field |
| - | styling |
Components built on these basics
built on the component base - all basic props | |
built on the component base - all basic props, display only | |
built on the component base - all basic props, display only | |
built on the component base - all basic props | |
built on the component base - all basic props | |
basic props, own rendering | |
basic props, own rendering; no copy and no info popover | |
a subset of the basic props: |
On this page
- Component Basics