Camunda and tables

Hey everyone,
I got some Issues with my table in camunda… i built it kinda like this:

<table id="table1" class="table1">
              <tr>
                <th>a</th>
                <th>b</th>
                <th>c</th>
              </tr>
              <tr>
                <td>
                  <input id="a" ng-minlength="1" ng-maxlength="50" type="text"cam-variable-type="String" cam-variable-name="a" style='width:100%' />
                </td>
                <td>
                  <input id="b" ng-minlength="1" ng-maxlength="50" type="text" cam-variable-type="String" cam-variable-name="b" style='width:100%' />
                </td>
                <td>
                  <input id="c" ng-minlength="1" ng-maxlength="50" type="text" cam-variable-type="String" cam-variable-name="c" style='width:100%' />
                </td>
              </tr>
            </table>

in addition i have a button that adds the values you entered in a new <tr> element… but i dont know how i would get those values in my next task(that just reviews what the user before has done). I would be really grateful for every help since i’m kinda new to camunda,html and javascript :smiley:

Hi Kiwi,

I think you already figured out that the cam-variable-name attribute in your inputs refer to the process variables. If I understood you correctly, you want to add more process variables using a button, that also adds more columns to the table. To dynamically add variables after the form is loaded, you have to use Javascript to tell the variableManager about the new variables. You can find a Javascript snippet how to create such additional variables here.

The rest depends on your specific scenario: Do the variable names follow a specific pattern? Do you only want to have one variable containing all the data? Does the user provide both the variable name and the value or is the name fixed?

Cheers
Sebastian

2 Likes

Well I tried something like this: var node_tr = document.createElement(“tr”);
clicks += 1;
node_tr.id = clicks;
node_tr.setAttribute(‘cam-variable-name’,clicks);
so I have to somehow transfer the value of the clicks variable to the next task…and then iterate over it to get every tr element … would that work? or do i need a cam name for every td field and transfer those?

Nope, that would unfortunately not work. The reason is, that elements with a cam-variable-name attribute, that are added to the form after it is loaded, do not create process variables. You would have to manually add the variable to the variable manager as shown in the documentation.

You also probably need a variable keeping track of which variables have been created to be able to load them in the second form.

I dont get this… I have given the td element an id “0abc” and use, like in the example, jquery var customField = $(’#0abc’, camForm.formElement); and the rest’s the same… but I try to click the Complete button( which is cickable) and nothng happens… has noone ever tried to use such tables in Camunda before? there should be an easier way to deal with those… even creating this editable table was really hard on a noob like me, … I don’t want to whine about it and if I ever do manage this table I’d be happy to contribute it to camunda, so it’s easier for the next person… but till then there is a loooong way to go. I appreciate all your help very much and try to understand how these cam forms function…

Could you elaborate on that? You click the Complete button and nothing happens? The form does not disappear and neither a success nor error message is shown? In that case, you might have an error in the Javascript. You can check that by opening the Developer console (F12 if you are using Chrome). The console should contain the error message that prevents the form to send data to the server.

Well at least I found one mistake… Unlike shown in the Example, you can’t put the script into the form part, but have to put it in the head… So after I put it in the head part, the Task could be completed…

I am a little bit confused as embedded forms usually don’t have a <head> element, but I am glad that it works for you now.

Hi there,

actually, using a “” is probably a mistake (and should probably not be possible/done).

Did you checked that the script tag inside the form has the correct “type” attribute (“text/form-script”) has in:

<form role="form">
  <script cam-script type="text/form-script">
  // custom script goes here
  </script>
</form>

(taken from https://docs.camunda.org/manual/7.5/reference/embedded-forms/javascript/cam-script/)

Cheers,
Vale

I guess the problem is that a td element doesnt have a value and so camunda can’t get it via variableManager.variable(‘custom’).value; and yes, i have to revive it since the issue occurs in other processes i try to build, too :frowning:

furthermore: I copied the form script in the docs aaand it gives out an error…(maybe this should be a new topic…)

It would be helpful if you could post the error message and your embedded form file :wink:

<form role="form">

  <!-- custom control which does not use cam-variable* directives -->
  <input type="text"
     class="form-control"
     id="customField">

  <script cam-script type="text/form-script">
var variableManager = camForm.variableManager;
var customField = $('#customField', camForm.formElement);

camForm.on('form-loaded', function() {
  // fetch the variable 'customVariable'
  variableManager.fetchVariable('customVariable');
});

camForm.on('variables-fetched', function() {
  // value has been fetched from the backend
  var value = variableManager.variableValue('customVariable');
  // write the variable value to the form field
  customField.val(value);
});

camForm.on('submit', function(evt) {
  var fieldValue = customField.val();
  var backendValue = variableManager.variable('customVariable').value;

  if(fieldValue === backendValue) {
    // prevent submit if value of form field was not changed
    evt.submitPrevented = true;

  } else {
    // set value in variable manager so that it can be sent to backend
    variableManager.variableValue('customVariable', fieldValue);
  }
});
 </script>

</form>

Error: Value ‘val’ is not of type undefined
so what ever I put into the input box it’s not undefined and throws an error

I tried your form and it works as expected for me. Which line throws the error? Which Camunda version are you using?

camunda BPM platform v7.6.0

Error: Value ‘jun’ is not of type undefined
at i (:8080/camunda/app/tasklist/scripts/camunda-tasklist-ui.js?bust=7.6.0:5)
at d.variableValue (:8080/camunda/app/tasklist/scripts/camunda-tasklist-ui.js?bust=7.6.0:5)
at Array.eval (eval at (:8080/camunda/app/tasklist/scripts/camunda-tasklist-ui.js?bust=7.6.0:4), :27:25)
at c.g.trigger (:8080/camunda/app/tasklist/scripts/camunda-tasklist-ui.js?bust=7.6.0:5)
at c.CamundaForm.fireEvent (:8080/camunda/app/tasklist/scripts/camunda-tasklist-ui.js?bust=7.6.0:5)
at d (:8080/camunda/app/tasklist/scripts/camunda-tasklist-ui.js?bust=7.6.0:4)
at :8080/camunda/app/tasklist/scripts/camunda-tasklist-ui.js?bust=7.6.0:4
at Object.invoke (:8080/camunda/lib/deps.js?bust=7.6.0:34552)
at c.fireEvent (:8080/camunda/app/tasklist/scripts/camunda-tasklist-ui.js?bust=7.6.0:4)
at c.CamundaForm.submit (:8080/camunda/app/tasklist/scripts/camunda-tasklist-ui.js?bust=7.6.0:5)

it comes up when i enter something into the input box and click complete

and i use chrome… not sure if thats the issue…

Does customVariable exist in your process? You fetch the customVariable when the form is loaded but the error message indicates that this variable does not exist. If you want to create a new variable in your form, you need to use variableManager.createVariable, see here.

yeah in my first task I create my variable with the code given in your example. and in the next task I should get the value form the first task into the input field. but it’s empty… (at least the error is now gone :D)

If the variable already exists, the form you posted should work. You could check if the correct variable is retrieved from the server by going to the Network tab of your browser console and check the request payload and response of the form variables query.

I don’t understand how or where that should be implemented xDI’m sorry…

The query is done automatically by Camunda, so you don’t need to implement it yourself :wink: We would just need to look at it to find out why the form field in your second task is empty. I assume in the second task the variable exists and you are using the form markup you posted earlier.

Could you open your browser console and have a look at the Network tab? For Chrome it would look like this:

You need to make sure that the variableNames field contains your customVariable and that the Response tab contains the data for the customVariable