Screen navigation based on userregistration form using webapp

Camunda 7 Topics Discussion & Questions
1

Hi,
I have a webapp having user registration form of 5 steps. I have to navigate the steps based on condition in step1 using camunda workflow by calling rest api from ny webapp.
Is it possible for external webapp to do this?
If yes, please guide us.

Thanks.

2

Sure, create your process with the logic and forms you need and deploy, then use the REST API like this:

  1. GET /process-definition/key/{process_key}/form-variables --> Render form for step1 in your external webapp
  2. POST /process-definition/key/{process_key}/submit-form --> Returns an instance_id for the registration
  3. GET /task?processInstanceId={instance_id} --> Returns a task_id for the next step in the registration process
  4. GET /task/{task_id}/variables --> Render form of next step in your external webapp
  5. POST /task/{id}/submit-form --> Go to to 3. until process completes
3

Thank you so much for the reply.
But still i am not sure how to do it. How to validate my angular form by calling camunda through rest api and based on the result i have to call the next screen in angular.
Can you pls help me out on this with an example.

Thanks

4

You could specify the form fields and some basic validation, such as allowed values and mandatory fields to your process like this:

 <bpmn:startEvent id="StartRegistration" name="Start registration">
  <bpmn:extensionElements>
    <camunda:formData>

      <camunda:formField id="AccountType" label="Account Type" type="enum">
       <camunda:value id="buyer" name="Buyer" />
       <camunda:value id="reseller" name="Reselller" />
      </camunda:formField>
      
      <camunda:formField id="Country" label="Country" type="string">
       <camunda:validation>
        <camunda:constraint name="required" />
       </camunda:validation>
      </camunda:formField>
    
    </camunda:formData>
  </bpmn:extensionElements>
</bpmn:startEvent>

The rest API (endpoint 2. above) will give you a 400 if the form is invalid. The next form logic based on user input can be defined in the process using gateways (see attachment).

registration.bpmn (7.4 KB)

These are just some ideas, you have many option in Camunda such as using DMN in your workflow if you have complex rules for the form sequencing or specify the forms and process separately.

5

I dont want to create a form in camunda.
I have a webapp which has 4 steps of registration form in angular. Using camunda workflow I have to navigate the steps in angular based on response for each step from camunda.

6

Right, you don’t have to explicitly specify the form in your process. Just post your values to the engine so it can decide about the next step:

  1. POST /process-definition/{id}/start --> Attach any variables
  2. GET /task?processInstanceId={instance_id} --> Returns the task_id for the next step
  3. POST /task/{id}/complete --> Go to to 2. until process complete

The key is step 2. above where you request the next step in the process instance from Camunda, be it a task form or just the name of the next task/step.

1 Like
7

Great,
But how do I navigate to Step2 or Step3 in my UI based on the condition validated in Step1 form variables sent to camunda.
How can I get the response for Step1 Post method where I send the variables to camunda and get the next screen in my external webapp such as Step2 or Step3.
Like how do I map the response from camunda for Step1 to the next Step in UI

8

In angular template:

<div *ngIf="currentStep === 'step1'">form for step1 goes here</div> 
<div *ngIf="currentStep === 'step2'">form for step2 goes here</div>
<div *ngIf="currentStep === 'step3'">form for step3 goes here</div>

In angular component:

currentStep = 'step1';
processInstanceId;
currentTaskId;

step1OnSubmit(){
 // call service to POST /process-definition/{your_registration_process_id}/start
 // fetch process instance id from response into processInstanceId
 goToNextTask();
}

stepXOnSubmit(){
 // call service to POST /task/{currentTaskId}/complete
 goToNextTask();
}

goToNextTask(){
  // call service to GET /task?processInstanceId={processInstanceId}
  // fetch task id from response into currentTaskId
  // fetch task name into currentStep 
}
9

Thank you so much,
I just need one more help, sorry for the inconvenience.
Actually what I am doing is the scenario below.
As I said I have registration steps in Angular.
I am fetching the form values from Step1 to java and sending the values to camunda using rest API from java class instead of directly calling in angular.
Now validating the field say any values which i sent to camunda from java for Yes or No and have to call the step2 or step3 from the response given by camunda to java code and from java I have to map the response to particular step in angular2.
Is this possible?

10

Its a bit of a guessing game what you want to do. Its clear now that you want to build your forms in
Angular and route the requests to Camunda trough the Java backend. What exactly do you want Camunda to do for you and what response do you expect from Camunda? Did you already model a process that shows what you want to achieve and that you could share?

11

You are exactly right.
I want camunda to validate the field or fields which is sent in Step1 and based on the validation or logical function results send the response whether to call step2 or Step3 which has to be mapped to angular UI from java.
For Example :
I have to create customer form with 3 steps and each step which has many fields where one field in Step1 has a field with name existingClient. When the user send Y or N as a value for the field, based on the value validate the condition in camunda and send the response to call the step2 screen for value Y or Step3 screen for value N to java and map that step in angular.
Please find the process attached.

customer.bpmn (7.2 KB)

12

Alright, Camunda will not directly give you that kind of response after completing a step. It just closes the task and continues the process execution. In fact, the approach I outlined does it in two steps:

After submitting the form in step1 with a existingCustomer variable there is a running instance of that process. That instance will continue executing and then stops waiting either at step2 or step3 depending on the existingCustomer variable. Thus, you will then have to query for the currently open task on that process instance and Camunda will tell you if there is a step2 or step3 task pending which allows you to present the appropriate screen.

13

So what will be the response after executing the Step1 with existingCustomer variable so that i can call the appropriate screen?

14

https://docs.camunda.org/manual/7.9/reference/rest/process-definition/post-start-process-instance/#result
https://docs.camunda.org/manual/7.9/reference/rest/task/post-complete/#result

15

Thank you so much for the support.
I have one issue.
The Rest api GET /task?processInstanceId={processInstanceId} when called from java gives the response only once. If I call api again the response is empty.
Only after i restart my java application it gives me the response for the first request again it fails when it is called second time.So, how can i solve this?

16

Sounds odd. What does it return in terms of http status code after the second call? Is there anything in Camunda’s logs that looks like an error? What does your Java code and the process look like?

17

Thank you.
I got the solution for it. There was a problem with the process.
Now I am trying to call the approval process.
The flow would be like say after I submit the form, there will be a group of approver.
I have to call the next step only if the users in the group approve the form submitted like if there are 2 users in that group, then until both the users approve it should not call next step.
How can i do this?

18

You will have to create multiple tasks, either with a parallel gateway or a multiple-instance activity:

19

Actually task will be one where the task will be to approve the request. But it has to be approve my 2 persons who are in the group assigned to that task.
So, until all persons in group are approved it should not go to other step.

20

Understood, it’s the same approval task for both. Still, technically it will be two different tasks assigned to different users through parallel gateway or multiple-instance.