Task Detail Renderer
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 from the platform. Below that, the renderer of your app shows the business data, so users can decide which task to pick without opening it.
File: src/apps/{processId}/renderer/{ProcessId}TaskDetailRenderer.tsx - picked up automatically for all tasks of the process.
Example
import type { RendererProps } from "@/ecc/renderer/eccRendererRegistry";
import { getJsonValue } from "@/ecc/core/eccJsonResolve";
import { EccText } from "@/ecc/components/forms/EccText";
import { EccNumber } from "@/ecc/components/forms/EccNumber";
import { EccDate } from "@/ecc/components/forms/EccDate";
export default function PurchaseTaskDetailRenderer({ data }: RendererProps) {
// combine two values into one line
const typeAndTitle = `${getJsonValue(data, "inputs.purchase.requestType") ?? ""} - ${getJsonValue(data, "inputs.purchase.title") ?? ""}`;
return (
<div>
<EccText fieldLabel="Request" value={typeAndTitle} />
<EccText fieldLabel="Cost center" value="inputs.purchase.requesterCostCenter" data={data} />
<EccText fieldLabel="Requester" value="inputs.purchase.requester.email" data={data} copyable showIcon iconPreset="mail" />
<EccDate fieldLabel="Needed by" value="inputs.purchase.neededBy" data={data} displayRelative dateFormat="dateLong" />
<EccNumber fieldLabel="Net amount" value="inputs.purchase.netTotal" data={data} currency="EUR" />
</div>
);
}
Ecc components in this example: EccText, EccDate, EccNumber - how to use them is described in UI Components.
Props
|
| the complete task (EccTask) - use paths like |
|
| id of the task |
|
| app key the renderer was chosen for, e.g. |
Type the data if you prefer direct access:
import type { EccTask } from "@/ecc/types/taskTypes";
export default function PurchaseTaskDetailRenderer({ data }: RendererProps<EccTask>) {
return <EccText fieldLabel="Task" value={data.name} />;
}
Rules
- The file name decides everything:
Purchase+TaskDetail+Renderer. The part beforeTaskDetail(first letter lower case) must equal the app folder. - Default export, no registration.
- Keep it read-only and compact - it is a preview, not a form.
- Missing values are no problem: a path without data renders an empty field.
Without a renderer, development builds show a yellow hint with the expected file name and the raw data; production builds show only the platform part.
On this page
- Task Detail Renderer