Start Process component

Starts a process.

adf-start-process

Contents

Basic Usage

<adf-start-process 
   [appId]="YOUR_APP_ID">
</adf-start-process>

Class members

Properties

Name Type Description
appId number (optional): Limit the list of processes which can be started to those contained in the specified app
name string (optional) name to assign to the current process
processDefinitionName string (optional) definition name of the process to start
variables ProcessInstanceVariable[] Variables in input to the process RestVariable
values FormValues Parameter to pass form field values in the start form if is associated
showSelectProcessDropdown boolean hide or show the process selection drodown, true by default

Events

Name Type Description
start EventEmitter<ProcessInstance> Emitted when the process starts
cancel EventEmitter<ProcessInstance> Emitted when the process is canceled
error EventEmitter<ProcessInstance> Emitted when the start process operation fails

Details

Starting a process with a default name and pre-selected process definition name

 <adf-start-process 
      [appId]="YOUR_APP_ID"
      [name]="PROCESS_NAME"
      [processDefinitionName]="PROCESS_DEFINITION_NAME">
 </adf-start-process>

You can use the processDefinitionName property to select which process will be selected by default on the dropdown (when there is more than one process to choose from). Use the name property to set the name shown on the dropdown item.

Starting a process not included in an app

 <adf-start-process 
      [processDefinitionName]="PROCESS_DEFINITION_NAME">
 </adf-start-process>

Use processDefinitionName to set the dropdown item as in the example above.

Custom data example

The following example shows how to pass in form field values to initialize the start form for the process:

const formValues: FormValues  = {
    'test_1': 'value_1',
    'test_2': 'value_2',
    'test_3': 'value_1',
    'test_4': 'dropdown_id',
    'test_5': 'dropdown_label',
    'dropdown': {'id': 'dropdown_id', 'name': 'dropdown_label'}
};
<adf-start-process 
    [values]="formValues"
    [appId]="YOUR_APP_ID" >
</adf-start-process>

Attaching a File to the start form of the process

You can see a repository in the Alfresco Repositories list once it is created in APS. If the repository is set up with an ID value of anything other than 1 then you will need to declare it in app.config.json. For example, if the repository's ID is 1002 and its name is alfresco then you would set the alfrescoRepositoryName property inapp.config.json to alfresco-1002 as follows:

{
    application: {
        name: 'Alfresco ADF Application'
    },
    ecmHost: 'http://{hostname}{:port}/ecm',
    bpmHost: 'http://{hostname}{:port}/bpm',
    logLevel: 'silent',
    alfrescoRepositoryName : 'alfresco-1002'
}

You then need to pass the node as the input values object with the other properties:

let node: MinimalNodeEntryEntity = null;

 this.nodesApiService.getNode(NODE_ID).subscribe((minimalNode) => this.node = minimalNode);

const formValues: FormValues  = {
    'file' : node
    'field_one': 'example text'
};

You could pass multiple nodes too:

const nodes: string[] = [NODE_ID_1, NODE_ID_2];

const values: FormValues = {
        'files': []
      };

      Observable.from(nodes)
        .flatMap((nodeId) => this.nodesApiService.getNode(nodeId))
        .subscribe(
              (node) => {
                values.files.push(node);
              },
              (error) => console.log(error) ,
              () => {
                this.formValues = values;
              });
    });

Note that in the object above, the key file is the name of the attach file field in the start form of the process. The value of the file property must be a MinimalNodeEntryEntity:

<adf-start-process 
    [values]="formValues"
    [appId]="YOUR_APP_ID" >
</adf-start-process>

The result will be the start form prefilled with the file data:

Start process load file

See also

Implements: OnChanges

Inputs

NameTypeDefault valueDescription
appId number

(optional) Limit the list of processes that can be started to those contained in the specified app.

name string

(optional) Name to assign to the current process.

processDefinitionName string

(optional) Definition name of the process to start.

showSelectProcessDropdown boolean true

Hide or show the process selection drodown.

values FormValues

Parameter to pass form field values in the start form if it is associated.

variables []

Variables in input to the process RestVariable.

Outputs

NameTypeDefault valueDescription
cancel EventEmitter<ProcessInstance>

Emitted when the process is canceled.

error EventEmitter<ProcessInstance>

Emitted when an error occurs.

start EventEmitter<ProcessInstance>

Emitted when the process starts.

Properties

NameTypeDefault valueDescription
errorMessageId string
processDefinitions []
selectedProcessDef ProcessDefinitionRepresentation
startForm StartFormComponent

Methods

Public cancelStartProcess()
getAlfrescoRepositoryName()
hasErrorMessage()
hasProcessName()
hasSingleProcessDefinition()
hasStartForm()
isProcessDefinitionEmpty()
isStartFormMissingOrValid()
Public loadStartProcess()
moveNodeFromCStoPS()
ngOnChanges(changes: SimpleChanges)
Public onOutcomeClick(outcome: string)
Public reset()
Private resetErrorMessage()
Private resetSelectedProcessDefinition()
Public startProcess(outcome?: string)
validateForm()

Constructor

constructor(activitiProcess: ProcessService, formRenderingService: FormRenderingService, activitiContentService: ActivitiContentService, appConfig: AppConfigService)
Parameters :
Name Type Optional Description
activitiProcess ProcessService
formRenderingService FormRenderingService
activitiContentService ActivitiContentService
appConfig AppConfigService

Methods

Public cancelStartProcess
cancelStartProcess()
Returns : void
getAlfrescoRepositoryName
getAlfrescoRepositoryName()
Returns : string
hasErrorMessage
hasErrorMessage()
Returns : boolean
hasProcessName
hasProcessName()
Returns : boolean
hasSingleProcessDefinition
hasSingleProcessDefinition()
Returns : boolean
hasStartForm
hasStartForm()
Returns : boolean
isProcessDefinitionEmpty
isProcessDefinitionEmpty()
Returns : string | true
isStartFormMissingOrValid
isStartFormMissingOrValid()
Returns : boolean
Public loadStartProcess
loadStartProcess()
Returns : void
moveNodeFromCStoPS
moveNodeFromCStoPS()
Returns : void
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional Description
changes SimpleChanges
Returns : void
Public onOutcomeClick
onOutcomeClick(outcome: string)
Parameters :
Name Type Optional Description
outcome string
Returns : void
Public reset
reset()
Returns : void
Private resetErrorMessage
resetErrorMessage()
Returns : void
Private resetSelectedProcessDefinition
resetSelectedProcessDefinition()
Returns : void
Public startProcess
startProcess(outcome?: string)
Parameters :
Name Type Optional Description
outcome string true
Returns : void
validateForm
validateForm()
Returns : boolean
import { Component, EventEmitter, Input, OnChanges,
    Output, SimpleChanges, ViewChild, ViewEncapsulation
} from '@angular/core';
import { ActivitiContentService, AppConfigService, AppConfigValues,
    StartFormComponent, FormRenderingService, FormValues
} from '@alfresco/adf-core';
import { ProcessInstanceVariable } from '../models/process-instance-variable.model';
import { ProcessDefinitionRepresentation } from './../models/process-definition.model';
import { ProcessInstance } from './../models/process-instance.model';
import { ProcessService } from './../services/process.service';
import { AttachFileWidgetComponent, AttachFolderWidgetComponent } from '../../content-widget';

@Component({
    selector: 'adf-start-process',
    templateUrl: './start-process.component.html',
    styleUrls: ['./start-process.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class StartProcessInstanceComponent implements OnChanges {

    /** (optional) Limit the list of processes that can be started to those
     * contained in the specified app.
     */
    @Input()
    appId: number;

    /** (optional) Definition name of the process to start. */
    @Input()
    processDefinitionName: string;

    /** Variables in input to the process
     * [RestVariable](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md).
     */
    @Input()
    variables: ProcessInstanceVariable[];

    /** Parameter to pass form field values in the start form if it is associated. */
    @Input()
    values: FormValues;

    /** (optional) Name to assign to the current process. */
    @Input()
    name: string;

    /** Hide or show the process selection drodown. */
    @Input()
    showSelectProcessDropdown: boolean = true;

    /** Emitted when the process starts. */
    @Output()
    start: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();

    /** Emitted when the process is canceled. */
    @Output()
    cancel: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();

    /** Emitted when an error occurs. */
    @Output()
    error: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();

    @ViewChild('startForm')
    startForm: StartFormComponent;

    processDefinitions: ProcessDefinitionRepresentation[] = [];

    selectedProcessDef: ProcessDefinitionRepresentation = new ProcessDefinitionRepresentation();

    errorMessageId: string = '';

    constructor(private activitiProcess: ProcessService,
                private formRenderingService: FormRenderingService,
                private activitiContentService: ActivitiContentService,
                private appConfig: AppConfigService) {
        this.formRenderingService.setComponentTypeResolver('upload', () => AttachFileWidgetComponent, true);
        this.formRenderingService.setComponentTypeResolver('select-folder', () => AttachFolderWidgetComponent, true);
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes['values'] && changes['values'].currentValue) {
            this.moveNodeFromCStoPS();
        }

        this.loadStartProcess();
    }

    public loadStartProcess() {
        this.resetSelectedProcessDefinition();
        this.resetErrorMessage();

        this.activitiProcess.getProcessDefinitions(this.appId).subscribe(
            (processDefinitionRepresentations: ProcessDefinitionRepresentation[]) => {
                this.processDefinitions = processDefinitionRepresentations;

                if (this.hasSingleProcessDefinition()) {
                    this.selectedProcessDef = this.processDefinitions[0];
                } else {
                    this.selectedProcessDef = this.processDefinitions.find((currentProcessDefinition) => {
                        return currentProcessDefinition.name === this.processDefinitionName;
                    });
                }
            },
            () => {
                this.errorMessageId = 'ADF_PROCESS_LIST.START_PROCESS.ERROR.LOAD_PROCESS_DEFS';
            });

    }

    hasSingleProcessDefinition(): boolean {
        return this.processDefinitions.length === 1;
    }

    getAlfrescoRepositoryName(): string {
        let alfrescoRepositoryName = this.appConfig.get<string>(AppConfigValues.ALFRESCO_REPOSITORY_NAME);
        if (!alfrescoRepositoryName) {
            alfrescoRepositoryName = 'alfresco-1';
        }
        return alfrescoRepositoryName + 'Alfresco';
    }

    moveNodeFromCStoPS() {
        let accountIdentifier = this.getAlfrescoRepositoryName();

        for (let key in this.values) {
            if (this.values.hasOwnProperty(key)) {
                let currentValue = this.values[key];

                if (currentValue.isFile) {
                    this.activitiContentService.applyAlfrescoNode(currentValue, null, accountIdentifier).subscribe((res) => {
                        this.values[key] = [res];
                    });
                }
            }
        }
    }

    public startProcess(outcome?: string) {
        if (this.selectedProcessDef && this.selectedProcessDef.id && this.name) {
            this.resetErrorMessage();
            let formValues = this.startForm ? this.startForm.form.values : undefined;
            this.activitiProcess.startProcess(this.selectedProcessDef.id, this.name, outcome, formValues, this.variables).subscribe(
                (res) => {
                    this.name = '';
                    this.start.emit(res);
                },
                (err) => {
                    this.errorMessageId = 'ADF_PROCESS_LIST.START_PROCESS.ERROR.START';
                    this.error.error(err);
                }
            );
        }
    }

    public cancelStartProcess() {
        this.cancel.emit();
    }

    hasStartForm(): boolean {
        return this.selectedProcessDef && this.selectedProcessDef.hasStartForm;
    }

    isProcessDefinitionEmpty() {
        return this.processDefinitions ? (this.processDefinitions.length > 0 || this.errorMessageId) : this.errorMessageId;
    }

    isStartFormMissingOrValid(): boolean {
        if (this.startForm) {
            return this.startForm.form && this.startForm.form.isValid;
        } else {
            return true;
        }
    }

    validateForm(): boolean {
        return this.selectedProcessDef && this.selectedProcessDef.id && this.name && this.isStartFormMissingOrValid();
    }

    private resetSelectedProcessDefinition() {
        this.selectedProcessDef = new ProcessDefinitionRepresentation();
    }

    private resetErrorMessage(): void {
        this.errorMessageId = '';
    }

    hasErrorMessage(): boolean {
        return this.processDefinitions.length === 0 && !this.errorMessageId;
    }

    public onOutcomeClick(outcome: string) {
        this.startProcess(outcome);
    }

    public reset() {
        this.resetSelectedProcessDefinition();
        this.name = '';
        if (this.startForm) {
            this.startForm.data = {};
        }
        this.resetErrorMessage();
    }

    hasProcessName(): boolean {
        return this.name ? true : false;
    }
}
<mat-card class="adf-start-process">
	<mat-card-title>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.TITLE' | translate}}
	</mat-card-title>
	<mat-card-content *ngIf="isProcessDefinitionEmpty()">
		<mat-card-subtitle id="error-message" *ngIf="errorMessageId">
			{{errorMessageId|translate}}
		</mat-card-subtitle>
		<mat-form-field class="adf-process-input-container">
			<input matInput placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME'|translate}}" [(ngModel)]="name" id="processName" required />
		</mat-form-field>

        <div *ngIf="showSelectProcessDropdown">
            <mat-form-field>
                <mat-select [(value)]="selectedProcessDef" placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE'|translate}}" required>
                    <mat-option *ngIf="!hasSingleProcessDefinition()">{{'ADF_PROCESS_LIST.START_PROCESS.FORM.TYPE_PLACEHOLDER' | translate}}</mat-option>
                    <mat-option *ngFor="let processDef of processDefinitions" [value]="processDef">
                        {{ processDef.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>

        <adf-start-form
            #startForm
            *ngIf="hasStartForm()"
                        [data]="values"
            [disableStartProcessButton]="!hasProcessName()"
            [processDefinitionId]="selectedProcessDef.id"
			(outcomeClick)="onOutcomeClick($event)"
		    [showRefreshButton]="false">
		<button form-custom-button mat-button (click)="cancelStartProcess()" id="cancle_process" class=""> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
		</adf-start-form>
	</mat-card-content>
	<mat-card-content *ngIf="hasErrorMessage()">
		<mat-card-subtitle class="error-message" id="no-process-message">
			{{'ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEFINITIONS' | translate}}
		</mat-card-subtitle>
	</mat-card-content>
	<mat-card-actions *ngIf="!hasStartForm()">
		<button mat-button *ngIf="!hasStartForm()" (click)="cancelStartProcess()" id="cancle_process" class=""> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
		<button color="primary" mat-button *ngIf="!hasStartForm()" [disabled]="!validateForm()" (click)="startProcess()" data-automation-id="btn-start" id="button-start" class="btn-start"> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate}} </button>
	</mat-card-actions>
</mat-card>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""