Hi to everyone.
I want to call some Embedded HTML-based Task Forms from my user tasks in my process diagram.
I have written the relative forms for my first 3 user tasks but I would like to modify a bit the form which the user has to complete when he/she logs in the Camunda Tasklist. The issue is that I am not very familiar with writing more complicated HTML forms yet and I would need a little help to this direction if anyone can contribute of course.
For this reason, I have uploaded the BPMN file of my process, the relative screenshots of my HTML Forms in the IDE of Eclipse and the ones which the user sees when he/she logs in the Camunda Tasklist.
As for my 1st user task (Add categories) I want for my user to be able to add (and respectively to delete) more categories in the same form (not only one as it is shown in my current form).
As for my 2nd user task (Add products) I want for my user to be able to see the added categories from the previous task form and concurrently to add for each one values for 3 other variables (description, detailed description, price).
As for my 3rd user task (Select products) I want for my users to be able to see (without being able to edit) all the added values (from the previous 2 forms) for the 3 variables (category, description, price) and concurrently to select the desired category from a list (like a combo box maybe) with the description and price corresponding to it and to fill in a text input field the desired number of pieces (integer variable) for each product.
I hope I made my issues clear until this point.
Electronic Equipment Competitions2.bpmn (21.3 KB)
Thank you in advance,
@steftriant
Hi,
I would recommend an understanding of angular forms with model/view/controller. Tutorials are common online, here’s a link to one which may get you started…
regards
Rob
Hi @Webcyberrob,
I am going to take into account your recommendation for the above link, thank you!
I would also like to ask something which has to do with the values in the fields of the forms (if you know of course).
In one of these forms shown in the Taskllist, when I left empty one input field (I didn’t give a value to one of the variables) and pressed Complete, my process continued normally to the next stage. I want to render the input of a value in any of the form fields obligatory (in case the user does not give a value, I want my process will not continue).
I suppose that this aspect has to do with the HTML Forms in Eclipse.
Have you got any idea on this?
Thanks a lot,
Steve
Hi
Check out the forms reference [1]. You can validate a form before submission such that you can enforce certain fields to be mandatory etc…
regards
Rob
[1] https://docs.camunda.org/manual/7.7/reference/embedded-forms/lifecycle/#event-listeners
Hi again @Webcyberrob.
I took a look at your reference page and more specifically at Javascript chapter
(Javascript | docs.camunda.org).
Nevertheless, I didn’t understand exactly how I can use custom JavaScript in my embedded forms in order to enforce certain fields to be mandatory.
For example, will I have to replace my HTML with a JavaScript form in the IDE of my Eclipse?
Or, will I have to make a combination of these 2 types of forms?
The only clue which may help me that I found in the above chapter concerns the attribute evt.submitPrevented = true; in
Participating in the Form Lifecycle | docs.camunda.org
Sorry if my questions may look silly but unfortunately I am not an expert in programming
In addition to this issue, I would like to ask you if Camunda supports the dynamic form fields because I found somewhere ( Bootstrap Snippet Dynamic Form Fields - Add & Remove using HTML CSS jQuery) a code snippet in order to create a similar form in Tasklist for the 1st task of my process (if you remember from my 1st post here). I created a similar form but the button + which I need, is deactivated.
Thank you again,
Steve
Hi,
Heres a link [1] to an example which may give you some insight.
If you want to create dynamic fields, then I would recommend that you look at this example of how to use a Json model [2]
Note - you are wanting to use some advanced techniques hence my suggestions to understand the basics…
regards
Rob
[1] https://github.com/camunda/camunda-bpm-examples/tree/master/usertask/task-form-embedded
[2] https://github.com/camunda/camunda-bpm-examples/tree/master/usertask/task-form-embedded-json
Hi again @Webcyberrob.
I think that I overcame the issue with the mandatory input fields by writing the word required after every input element in my HTML files in Eclipse.
But, I am facing another issue with the type of my variables, as although I have defined almost all of them as String into my HTML Forms, the user can insert into their fields a numeric value.
Does the variable type String also accept numeric values?
On the contrary, the variable type Double accepts only numeric values, not characters in the respective
input fields.
Thanks,
Steve
Hi,
Yes a string will accept both alpha and numeric characters.
R
