Replace Complete with Approve / Reject buttons

Camunda 7 Topics Discussion & Questions
,
1

Does anyone know of someone already done this type of work replacing the Complete button for a Approve / Reject button?

It’s very usual to have this type of task or how we can customize it?

Thanks.

2

@lcrodriguez the complete button is mapped to the submit-from/complete task api endpoint. Whether something is Accepted or Rejected is irrelevant of completing a task.

Could you just use a Checkbox or a Radio button for Approve/Reject?
This pattern also better supports being able to add things like a “Reason” or “Notes” field related to the approval or rejection.

3

Yes, I could and that would be a workaround for now, but the end users need more clear direction and the buttons make more sense and avoids confusion.

Another option is: Could I hide it somehow and replace with mines?

4

@lcrodriguez there is prob some modifications you can make to the app. Does it make sense to do so? It is a usage pattern to train your end users on. In every Task scenario you need to “complete” a task to move on. But then you introduce a secondary variation where in some cases they do not have to “complete” the task. They have to select Approve or Reject (which just “completes” the task anyways).

5

You can add some CSS to the user-styles.css file that hides the default Complete button. In your embedded form you would then have to add your accept and reject button, that send the appropriate request to the REST-API to complete the task. Or - if you prefer a “hackier”, but easier solution, set the variable and then procedurally “click” the hidden Complete button via Javascript :wink:

6

Thanks. That could be an option.
I may have to go deeper in the camunda code to see what is possible.

7

@lcrodriguez, as another option you could leverage External Task Forms: https://docs.camunda.org/manual/7.5/user-guide/task-forms/#external-task-forms

And build a small front-end with your tailored Approve/Reject buttons that preforms the API to camunda to set the variable of the outcome (approved or rejected / approved=true), and callback to camunda web app.

8

Thks for the answer sebastian. How would you build the API call to complete the task?

9

To complete the task, you would call the Submit Form REST Endpoint.

10

@lcrodriguez

Do you have sample code snippet which worked for this ? I have similar requirement.

11

@Gayathri,

To hide the default buttons you can use the snippet from here: hideCompleteButton being reset in recent Camunda versions

And for the custom buttons, it could look something like this if you are using embedded forms:

// Wire this to the button 
function onclick() {
  camForm.submit();
}
12

I have two buttons. One is approve and another is Reject. How can I handle this scenario?
Also Iam using Camunda Modeler. So how will I be able to edit the css file?

13

You’ll need to set a Process variable depending on which one is pressed and submit the form like shown above. You can then use the process variable in you model to choose a sequence flow

14

Okay I can do that. But How will I hide submit button since I dont have the css file for tasklist.

15

Check this page here. If you need help locating the file, it helps to know which application server you are using

16