Customising task outcomes and flows on ADF

[alfresco]

This tutorial is part of the Introduction to the ADF APS components and details how to customise task outcomes and flows on ADF. Now that we know how to control the stencils (bundled and customised) as atomic parts of the forms into an ADF application, let’s see how to control the outcomes of a form and flows in general. Controlling the outcomes is a key factor for the management of a process. In this section in particular, we are going to cover this topic to complete the discussion around the process services in an ADF application.

Introduction of the form events in activiti-task-details

Task outcomes and flows can be controlled using the concept of events in the Alfresco ADF components. More in detail, the activiti-task-details component has four relevant events that can be used and customized:

• formLoaded invoked when form is loaded or reloaded.

• formSaved invoked when form is submitted with Save or custom outcomes.

• formCompleted invoked when form is submitted with Complete outcome.

• executeOutcome invoked when any outcome is executed (default behaviour can be prevented via event.preventDefault()).

These events are extremely useful, if you want to check or do something during the outcome from a form. For further details about these and others events, please refer to the ng2-activiti-tasklist documentation.

Below we will see with an example on executeOutcome as the most generic one. The other events can be tested and used with success, following exactly the same approach and customisations of the components.

Changing the view component

Considering that we have to customise the activiti-task-details component adding the executeOutcome event, the first task to do is to change the activiti-demo source code into the <my-adf>/app/components/activiti folder.

Below the changes to the activiti-demo.component.html file.

<activiti-task-details 
  [taskId]="taskId" 
  (formCompleted)="onFormCompleted($event)"
  (executeOutcome)="myOutcomeControl($event)"
  #activitidetails></activiti-task-details>

And the changes to the activiti-demo.component.ts file.

@Component({
  selector: 'activiti-demo',
  templateUrl: './activiti-demo.component.html',
  styleUrls: ['./activiti-demo.component.css']
})
export class ActivitiDemoComponent implements AfterViewInit {
 ...
  // Add this method.
  myOutcomeControl(event: any) {
    alert('Outcome pressed on button ‘' + event.outcome.name + '‘');
  }
  ...
}

As you can see, the changes in the HTML file setup the event controller to the method called myOutcomeControl and the changes to the TypeScript file develop what the method does. In our example: a very basic message to the user containing the button name, representing the outcome (Save or Complete, by default).

Task outcomes in action

In the pictures below we can see two different screenshots, depending on the pressed button. The first, pressing the Complete button. The second, pressing the Save button.

Message shown pressing the Complete button.

Message shown pressing the Save button.

Before considering the example as completed, we would like to discuss a very common use case: the existence of tasks with several outcomes. As you probably know, APS can be easily configured to design a form with several (and customized) buttons and outcomes. This is not an issue for the ADF components and the solution discussed here will work also in this scenario.