Camunda forms does not execute the script include on JSON

Camunda 8 Topics
1

I’m doing a test to include a call to a rest API within the Camunda forms. In the change event of a text type field I want to call an API to get the description associated with that text field. I have included a script section in the JSON of the form. But that section is not executed. I have placed console.log but I don’t see them in the browser console.
I’m using Camunda modeler 5.31. Deploying Camunda Self-managed 8.5
Here: part of the scripts: “scripts”: {
“formScript”: {
“type”: “text/javascript”,
“value”: “form.on(‘load’, function() { \n console.log(‘El formulario se ha cargado’); \n\n form.on(‘searchTerm.changed’, async function(event) { \n console.log(‘Evento searchTerm.changed detectado:’, event.data); \n\n try { \n console.log(‘Llamando a la API…’); \n const response = await fetch(‘https://jsonplaceholder.typicode.com/users’); \n if (!response.ok) { \n throw new Error('Error en la API: ’ + response.status); \n } \n const results = await response.json(); \n console.log(‘Datos recibidos:’, results); \n form.setProperty(‘apiResults’, results.map(function(item) { \n return { label: item.name, value: item.id }; \n })); \n } catch (error) { \n console.error(‘Error al cargar datos:’, error); \n } \n }); \n});”
}
},

2

As a context we are trying to make an example to implement the workaorund that is in the documentation “Load data on runtime with form events” Integrate API data | Camunda 8 Docs. It seems that the scripts do not get copied.

3

Hi @Hugo_Cam , sorry we missed your post

I have a minimal example on how to listen to events in a React here

If this is not what you’re looking for could you post a repro on Stackblitz so it’s easier to find the issue?

4

Hello vsgoulart, thanks for the reply.
What I’m trying to implement in this PoC is using camunda forms and updating the JSON, I’m including logic that responds to the onchange of a field. Is this possible? Here is the modified json. {
“components”: [
{
“label”: “Buscar”,
“type”: “textfield”,
“layout”: {
“row”: “Row_0mxzllu”,
“columns”: null
},
“id”: “searchTerm”,
“key”: “searchTerm”
},
{
“label”: “Resultados API 6”,
“values”: ,
“type”: “select”,
“layout”: {
“row”: “Row_1q06mor”,
“columns”: null
},
“id”: “apiResults”,
“key”: “apiResults”
}
],
“scripts”: {
“formScript”: {
“type”: “text/javascript”,
“value”: “form.on(‘load’, function() { \n console.log(‘El formulario se ha cargado’); \n\n form.on(‘searchTerm.changed’, async function(event) { \n console.log(‘Evento searchTerm.changed detectado:’, event.data); \n\n try { \n console.log(‘Llamando a la API…’); \n const response = await fetch(‘https://jsonplaceholder.typicode.com/users’); \n if (!response.ok) { \n throw new Error('Error en la API: ’ + response.status); \n } \n const results = await response.json(); \n console.log(‘Datos recibidos:’, results); \n form.setProperty(‘apiResults’, results.map(function(item) { \n return { label: item.name, value: item.id }; \n })); \n } catch (error) { \n console.error(‘Error al cargar datos:’, error); \n } \n }); \n});”
}
},
“type”: “default”,
“id”: “Form_P91_registro”,
“executionPlatform”: “Camunda Cloud”,
“executionPlatformVersion”: “8.5.0”,
“exporter”: {
“name”: “Camunda Modeler”,
“version”: “5.32.0”
},
“schemaVersion”: 18
}

5

@Hugo_Cam That’s not possible on our builtin Tasklist app.

If you want to achieve that you would have to build a custom app using form-js but then the script would not be able to be builtin in the form schema.

6

Thanks for the information. Is there anything in the development roadmap to support this feature in Tasklist app?