Reactjs forms from camunda modeler

Developers Modeler
1

Hello everyone!
Sorry for the possible generic question.

I have a BPMN model built with Camunda modeler. THere, I have some user tasks with defined forms.
Then, in my react-js application, I am making a request and I am retrieving each form’s schema.

How can I use this to create the appropriate form in my application?
After that I will complete the user task by making a tasklist api request to camunda, but at this moment I am trying to generate the form.

2

By generating the form you mean displaying the form based on the schema?

1 Like
3

Yes exactly @philippfromme

4

This is documented in the project’s README: GitHub - bpmn-io/form-js: View and visually edit JSON-based forms.

5

To generate a form in your React application based on the schema you retrieved from Camunda, you can use a form library such as React Hook Form or Formik. Here are the general steps you can follow:

  1. Parse the schema: The schema you received from Camunda is likely in JSON format. You will need to parse it and convert it into a format that can be used by your form library. Both React Hook Form and Formik accept schemas in JSON format, but you may need to make some adjustments depending on the structure of your schema.
  2. Render the form fields: Once you have parsed the schema, you can use your form library to render the appropriate form fields based on the schema. Each field in the schema will likely correspond to a specific input component in your React application. You can use conditional rendering to display different types of fields (e.g. text inputs, dropdowns, checkboxes, etc.) based on the type of each field in the schema.
  3. Handle form submission: When the user submits the form, you will need to handle the form data and send it back to Camunda to complete the user task. You can use the onSubmit callback provided by your form library to handle the form submission. In this callback, you can create a JSON object containing the form data and send it to Camunda using the appropriate API endpoint.
    import React, { useState, useEffect } from “react”;
    import { useForm } from “react-hook-form”;

function TaskForm({ taskId }) {
const { register, handleSubmit } = useForm();
const [schema, setSchema] = useState({});

// Fetch the schema from Camunda and set it as state
useEffect(() => {
fetch(/camunda/api/task/${taskId}/form)
.then((response) => response.json())
.then((data) => setSchema(data));
}, [taskId]);

const onSubmit = (data) => {
// Send the form data to Camunda to complete the user task
fetch(/camunda/api/task/${taskId}/complete, {
method: “POST”,
body: JSON.stringify(data),
headers: { “Content-Type”: “application/json” },
});
};

return (

{Object.entries(schema).map(([fieldName, fieldConfig]) => {
// Render the appropriate input component based on the field type
if (fieldConfig.type === “string”) {
return (


{fieldConfig.label}
<input {…register(fieldName)} />

);
} else if (fieldConfig.type === “enum”) {
return (

{fieldConfig.label}
<select {…register(fieldName)}>
{fieldConfig.values.map((option) => (

{option.name}

))}


);
} else {
// Handle other field types as needed
return null;
}
})}
Submit

);
}

export default TaskForm;
In this example, the TaskForm component uses React Hook Form to render a form based on the schema retrieved from Camunda. The onSubmit function handles the form submission by sending the data back to Camunda using the appropriate API endpoint. Note that this is just a rough example and you may need to adjust it based on the structure of your schema and the specific requirements of your application.