alfresco-ng2-components/demo-shell/src/app/components/process-list-demo/process-list-demo.component.html

<div class="app-process-list-inputs">

    <form [formGroup]="processListForm">
        <mat-form-field>
            <mat-label>App Id</mat-label>
            <input data-automation-id="app-id"
                   matInput
                   [formControl]="processAppId">
            <mat-error *ngIf="processAppId.hasError('required')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.APP_ID_REQUIRED_ERROR' | translate }}
            </mat-error>
            <mat-error *ngIf="processAppId.hasError('pattern')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
            </mat-error>
            <mat-error *ngIf="processAppId.hasError('min')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
            </mat-error>
        </mat-form-field>

        <mat-form-field>
            <mat-label>ProcessInstanceId</mat-label>
            <input data-automation-id="process-instance-id"
                   matInput
                   class="form-control"
                   [formControl]="processInstanceId">
            <mat-hint>SimpleProcess:1:2</mat-hint>
        </mat-form-field>

        <mat-form-field>
            <mat-label>ProcessDefinitionId</mat-label>
            <input data-automation-id="process-definition-id"
                   matInput
                   [formControl]="processDefinitionId">
            <mat-hint>SimpleProcess:1:2</mat-hint>
        </mat-form-field>

        <mat-form-field>
            <mat-label>State</mat-label>
            <mat-select
                [formControl]="processState" data-automation-id="state">
                <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Sort</mat-label>
            <mat-select
                [formControl]="processSort" data-automation-id="sort">
                <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
            </mat-select>
        </mat-form-field>


        <mat-form-field>
            <mat-label>Items per page</mat-label>
            <input
                matInput
                [formControl]="processSize">
            <mat-error *ngIf="processSize.hasError('min')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
            </mat-error>
            <mat-error *ngIf="processSize.hasError('pattern')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
            </mat-error>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Page</mat-label>
            <input
                matInput
                [formControl]="processPage">
            <mat-error *ngIf="processPage.hasError('min')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
            </mat-error>
            <mat-error *ngIf="processPage.hasError('pattern')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
            </mat-error>
        </mat-form-field>

        <div class="app-reset-button">
            <button mat-raised-button (click)="resetProcessForm()">Reset</button>
        </div>
    </form>
</div>

<div>
    <adf-process-instance-list
        #processList
        [appId]="appId"
        [processDefinitionId]="processDefId"
        [processInstanceId]="processInsId"
        [state]="state"
        [sort]="sort"
        [page]="page"
        [size]="size"
        [presetColumn]="presetColumn">
        <data-columns>
            <data-column key="ended" title="ADF_PROCESS_LIST.PROPERTIES.STATUS">
                <ng-template let-entry="$implicit">
                    <div title="{{getStatus(entry.row.obj.ended)}}">{{getStatus(entry.row.obj.ended)}}</div>
                </ng-template>
            </data-column>
            <data-column key="started" title="Started"></data-column>
            <data-column key="processDefinitionId" title="Process Definition Id"></data-column>
        </data-columns>
    </adf-process-instance-list>

    <adf-pagination
        [target]="processList">
    </adf-pagination>
</div>