Start Form component

Displays the Start Form for a process.

Start Form screenshot

Basic Usage

<adf-start-form
    [processDefinitionId]="currentProcessDef.id"
    (outcomeClick)="onOutcomeClick($event)">
</adf-start-form>

Class members

Properties

Name Type Default value Description
data FormValues Custom form values map to be used with the rendered form.
disableCompleteButton boolean false If true then the Complete outcome button is shown but it will be disabled.
disableStartProcessButton boolean false If true then the Start Process outcome button is shown but it will be disabled.
fieldValidators FormFieldValidator[] [] Contains a list of form field validator instances.
form FormModel Underlying form model instance.
formId string The id of the form definition to load and display with custom values.
formName string Name of the form definition to load and display with custom values.
nameNode string Name to assign to the new node where the metadata are stored.
nodeId string Content Services node ID for the form metadata.
path string Path of the folder where the metadata will be stored.
processDefinitionId string Definition ID of the process to start.
processId string Process ID of the process to start.
readOnly boolean false Toggle readonly state of the form. Forces all form widgets to render as readonly if enabled.
readOnlyForm boolean false Is the form read-only (ie, can't be edited)?
saveMetadata boolean false Toggle saving of form metadata.
showCompleteButton boolean true Toggle rendering of the Complete outcome button.
showDebugButton boolean false Toggle debug options.
showOutcomeButtons boolean true Should form outcome buttons be shown?
showRefreshButton boolean true Should the refresh button be shown?
showSaveButton boolean true Toggle rendering of the Save outcome button.
showTitle boolean true Toggle rendering of the form title.
showValidationIcon boolean true Toggle rendering of the validation icon next to the form title.
taskId string Task id to fetch corresponding form and values.

Events

Name Type Description
executeOutcome EventEmitter<FormOutcomeEvent> Emitted when any outcome is executed. Default behaviour can be prevented via event.preventDefault().
formCompleted EventEmitter<FormModel> Emitted when the form is submitted with the Complete outcome.
formContentClicked EventEmitter<ContentLinkModel> Emitted when a field of the form is clicked.
formDataRefreshed EventEmitter<FormModel> Emitted when form values are refreshed due to a data property change.
formLoaded EventEmitter<FormModel> Emitted when the form is loaded or reloaded.
formSaved EventEmitter<FormModel> Emitted when the form is submitted with the Save or custom outcomes.
onError EventEmitter<any> Emitted when any error occurs.
outcomeClick EventEmitter<any> Emitted when the user clicks one of the outcome buttons that completes the form.

Details

The Start Process component uses the Start Form component to display the start form for the process.

The outcomeClick event is passed a string containing the ID of the outcome button that the user clicked. You can pass this value to the startProcess method (defined in the Process service) when activating the process, if necessary.

See also

Description

Displays the start form for a named process definition, which can be used to retrieve values to start a new process.

After the form has been completed the form values are available from the attribute component.form.values and component.form.isValid (boolean) can be used to check the if the form is valid or not. Both of these properties are updated as the user types into the form.

Extends: FormComponent

Implements: OnChanges OnInit OnDestroy

Example

Inputs

NameTypeDefault valueDescription
processDefinitionId string

Definition ID of the process to start.

processId string

Process ID of the process to start.

readOnlyForm boolean false

Is the form read-only (ie, can't be edited)?

showOutcomeButtons boolean true

Should form outcome buttons be shown?

showRefreshButton boolean true

Should the refresh button be shown?

Outputs

NameTypeDefault valueDescription
formContentClicked EventEmitter<ContentLinkModel>

Emitted when a field of the form is clicked.

outcomeClick EventEmitter<any>

Emitted when the user clicks one of the outcome buttons that completes the form.

Properties

NameTypeDefault valueDescription
outcomesContainer ElementRef
subscriptions Private []

Methods

completeTaskForm(outcome?: string)
getStartFormDefinition(processId: string)
isOutcomeButtonVisible(outcome: FormOutcomeModel, isFormReadOnly: boolean)
loadStartForm(processId: string)
ngOnChanges(changes: SimpleChanges)
ngOnDestroy()
ngOnInit()
onRefreshClicked()
saveTaskForm()

Constructor

constructor(formService: FormService, visibilityService: WidgetVisibilityService)
Parameters :
Name Type Optional Description
formService FormService
visibilityService WidgetVisibilityService

Methods

completeTaskForm
completeTaskForm(outcome?: string)
Parameters :
Name Type Optional Description
outcome string true
Returns : void
getStartFormDefinition
getStartFormDefinition(processId: string)
Parameters :
Name Type Optional Description
processId string
Returns : void
isOutcomeButtonVisible
isOutcomeButtonVisible(outcome: FormOutcomeModel, isFormReadOnly: boolean)
Parameters :
Name Type Optional Description
outcome FormOutcomeModel
isFormReadOnly boolean
Returns : boolean
loadStartForm
loadStartForm(processId: string)
Parameters :
Name Type Optional Description
processId string
Returns : void
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional Description
changes SimpleChanges
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onRefreshClicked
onRefreshClicked()
Returns : void
saveTaskForm
saveTaskForm()
Returns : void
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation, OnDestroy } from '@angular/core';
import { FormService } from './../services/form.service';
import { WidgetVisibilityService } from './../services/widget-visibility.service';
import { FormComponent } from './form.component';
import { ContentLinkModel } from './widgets/core/content-link.model';
import { FormOutcomeModel } from './widgets/core/index';
import { Subscription } from 'rxjs';

/**
 * Displays the start form for a named process definition, which can be used to retrieve values to start a new process.
 *
 * After the form has been completed the form values are available from the attribute component.form.values and
 * component.form.isValid (boolean) can be used to check the if the form is valid or not. Both of these properties are
 * updated as the user types into the form.
 *
 * @Input
 * {processDefinitionId} string: The process definition ID
 * {showOutcomeButtons} boolean: Whether form outcome buttons should be shown, this is now always active to show form outcomes
 *  @Output
 *  {formLoaded} EventEmitter - This event is fired when the form is loaded, it pass all the value in the form.
 *  {formSaved} EventEmitter - This event is fired when the form is saved, it pass all the value in the form.
 *  {formCompleted} EventEmitter - This event is fired when the form is completed, it pass all the value in the form.
 *
 */
@Component({
    selector: 'adf-start-form',
    templateUrl: './start-form.component.html',
    styleUrls: ['./form.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class StartFormComponent extends FormComponent implements OnChanges, OnInit, OnDestroy {

    private subscriptions: Subscription[] = [];

    /** Definition ID of the process to start. */
    @Input()
    processDefinitionId: string;

    /** Process ID of the process to start. */
    @Input()
    processId: string;

    /** Should form outcome buttons be shown? */
    @Input()
    showOutcomeButtons: boolean = true;

    /** Should the refresh button be shown? */
    @Input()
    showRefreshButton: boolean = true;

    /** Is the form read-only (ie, can't be edited)? */
    @Input()
    readOnlyForm: boolean = false;

    /** Emitted when the user clicks one of the outcome buttons that completes the form. */
    @Output()
    outcomeClick: EventEmitter<any> = new EventEmitter<any>();

    /** Emitted when a field of the form is clicked. */
    @Output()
    formContentClicked: EventEmitter<ContentLinkModel> = new EventEmitter<ContentLinkModel>();

    @ViewChild('outcomesContainer', {})
    outcomesContainer: ElementRef = null;

    constructor(formService: FormService,
                visibilityService: WidgetVisibilityService) {
        super(formService, visibilityService, null, null);
        this.showTitle = false;
    }

    ngOnInit() {
        this.subscriptions.push(
            this.formService.formContentClicked.subscribe(content => {
                this.formContentClicked.emit(content);
            })
        );
    }

    ngOnDestroy() {
        this.subscriptions.forEach(subscription => subscription.unsubscribe());
        this.subscriptions = [];
    }

    ngOnChanges(changes: SimpleChanges) {
        let processDefinitionId = changes['processDefinitionId'];
        if (processDefinitionId && processDefinitionId.currentValue) {
            this.visibilityService.cleanProcessVariable();
            this.getStartFormDefinition(processDefinitionId.currentValue);
            return;
        }

        let processId = changes['processId'];
        if (processId && processId.currentValue) {
            this.visibilityService.cleanProcessVariable();
            this.loadStartForm(processId.currentValue);
            return;
        }
    }

    loadStartForm(processId: string) {
        this.formService.getProcessIntance(processId)
            .subscribe((instance: any) => {
                this.formService
                    .getStartFormInstance(processId)
                    .subscribe(
                        form => {
                            this.formName = form.name;
                            if (instance.variables) {
                                form.processVariables = instance.variables;
                            }
                            this.form = this.parseForm(form);
                            this.visibilityService.refreshVisibility(this.form);
                            this.form.validateForm();
                            this.form.readOnly = this.readOnlyForm;
                            this.onFormLoaded(this.form);
                        },
                        error => this.handleError(error)
                    );
            });
    }

    getStartFormDefinition(processId: string) {
        this.formService
            .getStartFormDefinition(processId)
            .subscribe(
                form => {
                    this.formName = form.processDefinitionName;
                    this.form = this.parseForm(form);
                    this.visibilityService.refreshVisibility(this.form);
                    this.form.validateForm();
                    this.form.readOnly = this.readOnlyForm;
                    this.onFormLoaded(this.form);
                },
                error => this.handleError(error)
            );
    }

    /** @override */
    isOutcomeButtonVisible(outcome: FormOutcomeModel, isFormReadOnly: boolean): boolean {
        if (outcome && outcome.isSystem && ( outcome.name === FormOutcomeModel.SAVE_ACTION ||
            outcome.name === FormOutcomeModel.COMPLETE_ACTION )) {
            return false;
        } else if (outcome && outcome.name === FormOutcomeModel.START_PROCESS_ACTION) {
            return true;
        }
        return super.isOutcomeButtonVisible(outcome, isFormReadOnly);
    }

    /** @override */
    saveTaskForm() {
        // do nothing
    }

    /** @override */
    onRefreshClicked() {
        if (this.processDefinitionId) {
            this.visibilityService.cleanProcessVariable();
            this.getStartFormDefinition(this.processDefinitionId);
        } else if (this.processId) {
            this.visibilityService.cleanProcessVariable();
            this.loadStartForm(this.processId);
        }
    }

    completeTaskForm(outcome?: string) {
        this.outcomeClick.emit(outcome);
    }
}
<div class="adf-start-form-container" *ngIf="hasForm()">
    <mat-card>
        <mat-card-header>
            <mat-card-title>
                <h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
            </mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <div *ngIf="form.hasTabs()">
                <tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
            </div>

            <div *ngIf="!form.hasTabs() && form.hasFields()">
                <div *ngFor="let field of form.fields">
                    <form-field [field]="field.field"></form-field>
                </div>
            </div>
        </mat-card-content>
        <mat-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()" #outcomesContainer>
             <ng-content select="[form-custom-button]"></ng-content>
            <button *ngFor="let outcome of form.outcomes"
                    mat-button
                    [attr.data-automation-id]="'adf-form-' + outcome.name  | lowercase"
                    [disabled]="!isOutcomeButtonEnabled(outcome)"
                    [class.mdl-button--colored]="!outcome.isSystem"
                    [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
                    (click)="onOutcomeClicked(outcome)">
                {{outcome.name}}
            </button>
        </mat-card-content>
        <mat-card-actions *ngIf="showRefreshButton">
            <button mat-button
                    (click)="onRefreshClicked()">
                <mat-icon>refresh</mat-icon>
            </button>
        </mat-card-actions>
    </mat-card>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""