Many enterprises do not want to use Camunda’s default Tasklist.
They need a fully branded, modern, customized, and secure UI integrated with their own portal.

This guide explains how to build a 100% custom Tasklist UI using Angular or React, while letting Camunda 7 handle:

✔ User tasks
✔ Process state
✔ Form variables
✔ Workflow routing
✔ Authorization
✔ BPMN logic

Your custom UI will replace Tasklist entirely — but will still communicate with Camunda through REST API.

⭐ Why Build a Custom Tasklist UI?

✔ Brand consistency (company colors, layout, menu, portal)
✔ Better user experience
✔ React/Angular/Vue SPA instead of old AngularJS
✔ Mobile-friendly responsive UI
✔ Custom dashboards, metrics, SLA panels
✔ Multiple role-based UI layouts
✔ Integrate task processing inside an existing application
✔ Custom form builder, custom validation

Camunda becomes the workflow engine.
Your application becomes the task portal.

⭐ Architecture Overview

A custom Tasklist UI interacts with Camunda like this:

User logs into your app (React/Angular)
UI calls Camunda REST API to retrieve:
- Assigned tasks
- Candidate tasks
- Task variables
- Form variables
User completes task using UI form
UI submits data to Camunda REST API
Camunda continues BPMN process
UI refreshes list automatically

This pattern is called External Task Forms or Custom Tasklist Portal.

⭐ APIs Used for Custom Tasklist

Your Angular/React app will use these REST endpoints:

Get user tasks


GET /engine-rest/task?assignee=john

Get candidate tasks


GET /engine-rest/task?candidateGroup=manager

Get form variables


GET /engine-rest/task/{taskId}/form-variables

Complete task


POST /engine-rest/task/{taskId}/complete

Get process variables


GET /engine-rest/process-instance/{id}/variables

These APIs allow you to build a complete Tasklist UI without using Camunda Tasklist.

⭐ Step-by-Step Guide to Building a Custom Tasklist

1️⃣ Step 1: Create a New Angular or React Project

Angular


ng new camunda-tasklist
cd camunda-tasklist
ng serve

React


npx create-react-app camunda-tasklist
cd camunda-tasklist
npm start

2️⃣ Step 2: Build the Task List Component (React Example)


export default function TaskList() {

  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    fetch("/engine-rest/task?assignee=john")
      .then(res => res.json())
      .then(setTasks);
  }, []);

  return (
    <div>
      <h2>My Tasks</h2>
      <ul>
        {tasks.map(t => (
          <li key={t.id}>{t.name}</li>
        ))}
      </ul>
    </div>
  );
}

Angular equivalent can also be provided if you want.

3️⃣ Step 3: Load Form Variables


fetch(`/engine-rest/task/${taskId}/form-variables`)
  .then(res => res.json())
  .then(data => setFormFields(data));

The data returned:


{
  "customerName": {"type": "String", "value": "Shikha"},
  "loanAmount": {"type": "Long", "value": 50000}
}

4️⃣ Step 4: Build Dynamic Form Renderer

Your UI renders inputs based on type:

Text → <input type="text">
Number → <input type="number">
Boolean → <input type="checkbox">

Simple React example:


<input
  value={fields.customerName.value}
  onChange={(e) =>
    setFields({...fields, customerName: {value: e.target.value}})
  }
/>

5️⃣ Step 5: Complete the Task


fetch(`/engine-rest/task/${taskId}/complete`, {
  method: "POST",
  headers: {"Content-Type": "application/json"},
  body: JSON.stringify({
    variables: fields
  })
});

This completes the task and moves the workflow forward.

6️⃣ Step 6: Create a Dashboard (Optional)

Dashboard features:

✔ Number of pending tasks
✔ SLA counters
✔ Pie charts for departments
✔ Running vs completed process instances

Example API:


GET /engine-rest/process-instance/count

7️⃣ Step 7: Secure the Custom UI

Use:

Keycloak
OAuth2
Spring Boot with JWT
Azure AD
Okta

Your UI should authenticate the user and forward the token to Camunda REST API.

⭐ BPMN Configuration for External Forms

Inside BPMN, set the formKey:


camunda:formKey="external:loan/approval"

Meaning:

loan/approval → your UI route (React or Angular page)

⭐ Advantages of a Custom Tasklist UI

✔ 100% control of UI/UX
✔ Mobile-friendly
✔ You can integrate dashboards, reports, charts
✔ No dependency on outdated AngularJS
✔ Easier branding
✔ Can integrate with your CRM/ERP/Portal
✔ Scalable for large enterprises

⭐ Real-World Example – Custom Loan Processing Portal

A bank uses:

React dashboard
Camunda 7 as workflow engine
REST API communication
Custom forms for approval/rejection
Separate UI for different roles

Results:
✔ Faster operations
✔ Fully branded UI
✔ Better user experience
✔ Easy enhancement

⭐ Best Practices

✔ Use external:* form keys
✔ Cache task data for fast UI
✔ Use typed variables (Integer, Boolean)
✔ Add loading indicators
✔ Validate form inputs strongly
✔ Log all REST API calls
✔ Build role-based menus
✔ Use WebSockets or polling for task updates
✔ Add retry logic for network failures

⚠️ Common Mistakes to Avoid

❌ Trying to modify Camunda Tasklist instead of building new UI
❌ Using Embedded Forms when building external UI
❌ Not securing REST API
❌ Hardcoding task IDs
❌ Ignoring typed variables
❌ Displaying tasks from all users (security issue)

🎉 Conclusion

Building a custom Tasklist UI using Angular/React gives your application:

✔ Full control of UI
✔ Enterprise-level customization
✔ Separation of concerns
✔ Modern, mobile-ready interface
✔ Integrations with your internal systems
✔ A scalable and maintainable workflow portal

Camunda handles the process logic.
Your Angular/React app handles the user experience.

Together, they deliver a powerful workflow automation system.

💼 Professional Support Available

If you are facing issues in real projects related to enterprise backend development or workflow automation, I provide paid consulting, production debugging, project support, and focused trainings.

Technologies covered include Java, Spring Boot, PL/SQL, Azure, and workflow automation (jBPM, Camunda BPM, RHPAM).

📧 Contact: ishikhanirankari@gmail.com | info@realtechnologiesindia.com

🌐 Website: IT Trainings | Digital metal podium

Search This Blog

Learn IT with Shikha Blogs

Building a Completely Custom Tasklist UI for Camunda 7 Using Angular/React