How to read json value in Camunda form

Hi Team,

I am calling API endpoint and return json {“name”:“santosh”,“address”:“delhi,india”,“phone”:“567890”}.
I want to display value in user form. I have added forms : name, address, phone in Camunda.
when load the task its automatically populated all three records based on json.

need your help; If possible please send sample bpmn files. where calling api endpoint and user form populated based on return json.

Thanks,
Santosh

Hi @santosh_t2 ,

(I assume you are referring the Camunda Forms)

Camunda Forms populates fields based on process variables (using the process variable name and the key field in the form to correlate the data), so you need to:

  1. the fields in the form would need to have the field Key equal to some process variable which contains the respective data. For example in your case address.
  2. then you need to create process variables with the data you want (e.g. execution.setVariable('address', 'delhi,india')

Here you can find out how to set process variables.

And here you can learn more about Camunda Forms.

Regards
Max

Hi Max,

Thanks for input,
If possible can you please share some sample bpmn file. so that easy for us.

Thanks,
Santosh

Sure,

please find attached an example BPMN using the external task pattern to provide the data.

The associated form looks like this:

{
  "type": "default",
  "components": [
    {
      "key": "weather",
      "label": "Current temperature",
      "type": "textfield",
      "description": "Displays the current temperature retrieved via external task worker",
      "validate": {
        "required": true
      }
    }
  ]
}

And the external task worker for example looks like this (node):

const { Client, logger, Variables } = require('camunda-external-task-client-js');

const config = {
  baseUrl: 'http://localhost:8080/engine-rest',
  use: logger };

// create a Client instance with custom configuration
const client = new Client(config);

// susbscribe to topic
client.subscribe('weather.getCurrentDegrees', async function({ task, taskService }) {

  console.log('retrieving current weather');
  // put your logic to call a webService here

  // set a local variable 'weather'
  const weather = new Variables();
  weather.set('weather', '20 degrees');

  await taskService.complete(task, {}, weather);
});

As a result, the form will pre-populate the weather field:

diagramWithForm.bpmn (3.5 KB)

Hi Max,

Thanks
But my case little difference. Please go through my screen shot.

Hi @santosh_t2,

have a look at this example using embedded forms: camunda-bpm-examples/usertask/task-form-embedded-json-variables at master · camunda/camunda-bpm-examples

Hope this helps, Ingo