Removing required validation while triggering bpm error in embedded task form

Camunda 7 Topics Discussion & Questions
,
1

Hi all,
I’d like to develop an embedded html form for user task that would have “required” validation on some fields but also the option to abort the process via bpm error.
Validation of mandatory field is working ok for happy path (I’m using required property in html) but I have issues with disabling it when I’m triggering the bpm error via a button from the form. In case I want to abort process, I want to disable all required validations for form fields.

Approaches I tried:

  1. destroying the variable on error event
camForm.on('error', function(evt) {
    camForm.variableManager.destroyVariable('myVariableName');
});
  1. removing required attribute on error event - 2 approaches:
 camForm.on('error', function(evt) {
	document.getElementById('myElementName').removeAttribute('required');
});

camForm.on('error', function(evt) {
	 document.getElementById('myElementName').required = false;
});
  1. providing nonsensical value on error event to meet the required validation criteria
 camForm.on('error', function(evt) {
	  variableManager.variableValue('myVariableName', 'unimportantValue');
 });

I even added dismissal of the task on error:

camForm.on('error-success', function() {
    angular.element('.task-card').scope().dismissTask()
})

which helped a little but the validation error stays on screen after task disappears which is not a great user experience.

I’d appreciate any suggestions and ideas.

About my setup and why I am not investigating other options:
I’m using Camunda 7.15 community version (spring boot app with some plugins and customizations) as remote engine in homogenous 2 node cluster, with multitenancy and shared db. I don’t have any custom frontend app, so I need to use default tasklist. Due to multitenancy I’d like to avoid any changes to webapps resources that could affect the tasklist experience for other tenants.
I can’t use Camunda Forms because they don’t have enough functionalities to meet my other requirements even if I upgraded to 7.18. Processes are deployed with their forms via REST API.

Sources I already went through:
Lifecycle documentation
Excluding variable from submit
BPMN error button
Dismissing task form
Throwing error from form
Removing required property from input

2

In case anyone needs it: workaround I found is adding novalidate like this:

<form novalidate role="form" name="form">

This way when I click the error button, no annoying popups appear. But at the same time the “complete” button is disabled until I meet validation criteria if I decide to complete task normally.
I’m not sure whether it will work for all the use cases, so be cautious if you decide to use it.
Inspiration found in the angularjs docs: AngularJS

3