External Task Forms in Camunda 7 – Complete Guide with Examples

External Task Forms are used when your human task UI lives outside Camunda Tasklist — such as:

✔ Your own Angular/React/Java web app
✔ Mobile app
✔ External portal
✔ Microservice UI
✔ ERP/CRM screens

Instead of using Tasklist forms, you build your own UI, and Camunda provides the API to:

• Fetch the task

• Fetch task details

• Fetch form fields

• Complete the task

• Submit variables

This is the modern approach for enterprise UI integration.

---

⭐ What Are External Task Forms?

External Task Forms are not forms inside Camunda.
They are forms that you host, and Camunda exposes APIs so your UI can:

✔ Get form variables
✔ Retrieve form schema (if needed)
✔ Submit form data
✔ Complete the task

So the UI is 100% yours, but task lifecycle is controlled by Camunda.

---

When to Use External Task Forms?

✔ You don’t want to use Camunda Tasklist
✔ You have your own front-end application
✔ You need complete UI freedom (React/Vue/Angular/Flutter)
✔ You want branded UI that matches your client
✔ You want to integrate the human task in another system

---

⭐ The Architecture

1. User opens your custom UI

2. UI calls Camunda REST API to load tasks

3. UI loads task variables

4. User fills the UI form

5. UI submits the form via REST API

6. Camunda completes the task and continues the process

---

⭐ 1️⃣ Fetching Tasks Using REST API

Your UI first loads tasks assigned to a user.

GET http://localhost:8080/engine-rest/task?assignee=john

Response contains:

• Task ID

• Name

• Description

• Process Instance ID

• Due Date

• Form key

---

⭐ 2️⃣ Fetching Form Variables

To get task fields and current data:

GET http://localhost:8080/engine-rest/task/{taskId}/form-variables

Example response:

{
  "customerName": {"type": "String", "value": "Surjeet"},
  "loanAmount": {"type": "Long", "value": 25000},
  "approved": {"type": "Boolean", "value": false}
}

Your UI uses this to fill input fields.

---

⭐ 3️⃣ Submitting Form Data (Completing the Task)

When user submits the form:

POST http://localhost:8080/engine-rest/task/{taskId}/complete
Content-Type: application/json

{
  "variables": {
    "customerName": {"value": "Shikha"},
    "loanAmount": {"value": 50000},
    "approved": {"value": true}
  }
}

Once completed, Camunda continues the BPMN flow.

---

⭐ 4️⃣ Using Form Key With External Forms

In BPMN, set:

camunda:formKey="external:myApp/loan-form"

This is not an embedded form.
It tells your UI what form to display.

Example meaning:

• external: → This is an external form

• myApp/loan-form → Your UI route (Angular/React component)

---

⭐ 5️⃣ Example React/Angular Integration

React Example (simplified)

useEffect(() => {
  fetch(`/engine-rest/task/${taskId}/form-variables`)
    .then(res => res.json())
    .then(setFormData);
}, []);

Submitting:

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

---

⭐ 6️⃣ Example BPMN Setup

<bpmn:userTask id="UserTask_ApproveLoan" name="Approve Loan"
  camunda:assignee="manager"
  camunda:formKey="external:loan/approval">
</bpmn:userTask>

This ensures that your UI shows the correct form page.

---

⭐ 7️⃣ Adding Validation in External UI

UI-level validation can be written in:

• Angular Reactive Forms

• React Formik/Yup

• Vue Vuelidate

• Backend API validation

• Java-based validation (spring boot)

Camunda only cares about final variable submission.

---

⭐ 8️⃣ Real-World Example – Loan Approval Portal

A bank uses:

• React UI for users

• Camunda to manage workflow

• REST APIs for integration

Steps:

1. User applies for loan via frontend form

2. Frontend posts variables to Camunda

3. Loan officer’s dashboard uses external-task forms

4. Officer approves/rejects

5. Camunda continues the process

This is a very common enterprise architecture.

---

⭐ Best Practices

✔ Use external:xxx form keys for clean routing
✔ Use typed variables for safety
✔ Keep REST calls simple and centralized
✔ Cache task details in UI for fast performance
✔ Log all submission requests
✔ Validate everything on UI & backend
✔ Always secure REST API with JWT/OAuth2 for production
✔ Do NOT expose Tasklist to end-users

---

🚫 Common Mistakes

❌ Mixing Embedded Forms with external forms
❌ Storing too many variables as Strings
❌ Not validating form on backend
❌ Displaying all tasks (not filtering by assignee)
❌ Hardcoding form paths incorrectly

---

🎉 Conclusion

External Task Forms in Camunda 7 give you:

✔ 100% UI flexibility
✔ Full control over front-end experience
✔ Complete separation of UI and workflow engine
✔ Secure and scalable enterprise architecture
✔ Easy integration with React, Angular, Vue, Java, Mobile Apps

This is the best way to build branded, professional, enterprise-grade forms with Camunda 7.

💼 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