Fix start process form (#4847)

* Update data-table-component.page.ts

* new pr

* fix error - sortOrder.toLowerCase is not a function

* new pr

* new process definition added

* taking the development branch changes

e2e/process-services-cloud/editProcessFilter.config.ts

@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class EditProcessFilterConfiguration {
+
+    getConfiguration() {
+        return {
+            'filterProperties':
+                [
+                    'appName',
+                    'status',
+                    'sort',
+                    'order',
+                    'processName',
+                    'lastModified',
+                    'processInstanceId',
+                    'initiator',
+                    'processDefinitionId',
+                    'processDefinitionKey',
+                    'startDate',
+                    'businessKey'
+                ],
+            'sortProperties':
+                [
+                    'id',
+                    'name',
+                    'status',
+                    'initiator',
+                    'processDefinitionId',
+                    'processDefinitionKey',
+                    'lastModified',
+                    'startDate',
+                    'businessKey'
+                ],
+            'actions':
+                [
+                    'save',
+                    'saveAs',
+                    'delete'
+                ]
+        };
+    }
+}

e2e/process-services-cloud/process-custom-filters.e2e.ts

@@ -17,7 +17,7 @@
 
 import {
     TasksService, QueryService, ProcessDefinitionsService, ProcessInstancesService,
-    LoginSSOPage, ApiService, SettingsPage, IdentityService, GroupIdentityService
+    LoginSSOPage, ApiService, SettingsPage, IdentityService, GroupIdentityService, StringUtil
 } from '@alfresco/adf-testing';
 import { NavigationBarPage } from '../pages/adf/navigationBarPage';
 import { ProcessCloudDemoPage } from '../pages/adf/demo-shell/process-services/processCloudDemoPage';
@@ -25,6 +25,8 @@ import { TasksCloudDemoPage } from '../pages/adf/demo-shell/process-services/tas
 import { AppListCloudPage, LocalStorageUtil, BrowserActions } from '@alfresco/adf-testing';
 import resources = require('../util/resources');
 import { browser } from 'protractor';
+import { ProcessListCloudConfiguration } from './processListCloud.config';
+import { EditProcessFilterConfiguration } from './editProcessFilter.config';
 
 xdescribe('Process list cloud', () => {
 
@@ -39,6 +41,10 @@ xdescribe('Process list cloud', () => {
             browser.params.config.oauth2.clientId,
             browser.params.config.bpmHost, browser.params.config.oauth2.host, browser.params.config.providers
         );
+        const processListCloudConfiguration = new ProcessListCloudConfiguration();
+        const editProcessFilterConfiguration = new EditProcessFilterConfiguration();
+        const processListCloudConfigFile = processListCloudConfiguration.getConfiguration();
+        const editProcessFilterConfigFile = editProcessFilterConfiguration.getConfiguration();
 
         let tasksService: TasksService;
         let identityService: IdentityService;
@@ -47,7 +53,7 @@ xdescribe('Process list cloud', () => {
         let processInstancesService: ProcessInstancesService;
         let queryService: QueryService;
 
-        let completedProcess, runningProcessInstance, switchProcessInstance, noOfApps, testUser, groupInfo;
+        let completedProcess, runningProcessInstance, switchProcessInstance, noOfApps, testUser, groupInfo, anotherProcessInstance;
         const candidateBaseApp = resources.ACTIVITI7_APPS.CANDIDATE_BASE_APP.name;
 
         beforeAll(async (done) => {
@@ -63,14 +69,30 @@ xdescribe('Process list cloud', () => {
 
             processDefinitionService = new ProcessDefinitionsService(apiService);
             const processDefinition = await processDefinitionService.getProcessDefinitionByName('candidateGroupProcess', candidateBaseApp);
+            const anotherProcessDefinition = await processDefinitionService.getProcessDefinitionByName('anotherCandidateGroupProcess', candidateBaseApp);
 
             processInstancesService = new ProcessInstancesService(apiService);
             await processInstancesService.createProcessInstance(processDefinition.entry.key, candidateBaseApp);
 
-            runningProcessInstance = await processInstancesService.createProcessInstance(processDefinition.entry.key, candidateBaseApp);
-            switchProcessInstance = await processInstancesService.createProcessInstance(processDefinition.entry.key, candidateBaseApp);
+            runningProcessInstance = await processInstancesService.createProcessInstance(processDefinition.entry.key, candidateBaseApp, {
+                'name': StringUtil.generateRandomString(),
+                'businessKey': StringUtil.generateRandomString()
+            });
 
-            completedProcess = await processInstancesService.createProcessInstance(processDefinition.entry.key, candidateBaseApp);
+            anotherProcessInstance = await processInstancesService.createProcessInstance(anotherProcessDefinition.entry.key, candidateBaseApp, {
+                'name': StringUtil.generateRandomString(),
+                'businessKey': StringUtil.generateRandomString()
+            });
+
+            switchProcessInstance = await processInstancesService.createProcessInstance(processDefinition.entry.key, candidateBaseApp, {
+                'name': StringUtil.generateRandomString(),
+                'businessKey': StringUtil.generateRandomString()
+            });
+
+            completedProcess = await processInstancesService.createProcessInstance(processDefinition.entry.key, candidateBaseApp, {
+                'name': StringUtil.generateRandomString(),
+                'businessKey': StringUtil.generateRandomString()
+            });
             queryService = new QueryService(apiService);
 
             const task = await queryService.getProcessInstanceTasks(completedProcess.entry.id, candidateBaseApp);
@@ -83,34 +105,15 @@ xdescribe('Process list cloud', () => {
                 browser.params.config.oauth2.host,
                 browser.params.config.identityHost);
             loginSSOPage.loginSSOIdentityService(testUser.email, testUser.password);
-            await LocalStorageUtil.setConfigField('adf-edit-process-filter', JSON.stringify({
-                'filterProperties': [
-                    'appName',
-                    'status',
-                    'processInstanceId',
-                    'order',
-                    'sort',
-                    'initiator',
-                    'order'
-                ],
-                'sortProperties': [
-                    'id',
-                    'name',
-                    'status',
-                    'startDate'
-                ],
-                'actions': [
-                    'save',
-                    'saveAs',
-                    'delete'
-                ]
-            }));
+            await LocalStorageUtil.setConfigField('adf-edit-process-filter', JSON.stringify(editProcessFilterConfigFile));
+            await LocalStorageUtil.setConfigField('adf-cloud-process-list', JSON.stringify(processListCloudConfigFile));
             done();
-        }, 5 * 60 * 1000);
+        });
 
         afterAll(async (done) => {
             await apiService.login(browser.params.identityAdmin.email, browser.params.identityAdmin.password);
             await identityService.deleteIdentityUser(testUser.idIdentityService);
+            await processInstancesService.deleteProcessInstance(anotherProcessInstance.id, candidateBaseApp);
             done();
         });
 
@@ -144,6 +147,69 @@ xdescribe('Process list cloud', () => {
 
         });
 
+        it('[C305054] Should display processes ordered by status when Status is selected from sort dropdown', async () => {
+            processCloudDemoPage.editProcessFilterCloudComponent().clickCustomiseFilterHeader().setStatusFilterDropDown('ALL')
+                .setSortFilterDropDown('Status').setOrderFilterDropDown('ASC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('ASC', 'Status')).toBe(true);
+
+            processCloudDemoPage.editProcessFilterCloudComponent().setOrderFilterDropDown('DESC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('DESC', 'Status')).toBe(true);
+        });
+
+        it('[C305054] Should display processes ordered by initiator when Initiator is selected from sort dropdown', async () => {
+            processCloudDemoPage.editProcessFilterCloudComponent().clickCustomiseFilterHeader().setStatusFilterDropDown('ALL')
+                .setSortFilterDropDown('Initiator').setOrderFilterDropDown('ASC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('ASC', 'Initiator')).toBe(true);
+
+            processCloudDemoPage.editProcessFilterCloudComponent().setOrderFilterDropDown('DESC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('DESC', 'Initiator')).toBe(true);
+        });
+
+        it('[C305054] Should display processes ordered by processdefinitionid date when ProcessDefinitionId is selected from sort dropdown', async () => {
+            processCloudDemoPage.editProcessFilterCloudComponent().clickCustomiseFilterHeader().setStatusFilterDropDown('ALL')
+                .setSortFilterDropDown('ProcessDefinitionId').setOrderFilterDropDown('ASC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('ASC', 'Process Definition Id')).toBe(true);
+
+            processCloudDemoPage.editProcessFilterCloudComponent().setOrderFilterDropDown('DESC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('DESC', 'Process Definition Id')).toBe(true);
+        });
+
+        it('[C305054] Should display processes ordered by processdefinitionkey date when ProcessDefinitionKey is selected from sort dropdown', async () => {
+            processCloudDemoPage.editProcessFilterCloudComponent().clickCustomiseFilterHeader().setStatusFilterDropDown('ALL')
+                .setSortFilterDropDown('ProcessDefinitionKey').setOrderFilterDropDown('ASC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('ASC', 'Process Definition Key')).toBe(true);
+
+            processCloudDemoPage.editProcessFilterCloudComponent().setOrderFilterDropDown('DESC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('DESC', 'Process Definition Key')).toBe(true);
+        });
+
+        it('[C305054] Should display processes ordered by last modified date when Last Modified is selected from sort dropdown', async () => {
+            processCloudDemoPage.editProcessFilterCloudComponent().clickCustomiseFilterHeader().setStatusFilterDropDown('ALL')
+                .setSortFilterDropDown('LastModified').setOrderFilterDropDown('ASC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('ASC', 'Last Modified')).toBe(true);
+
+            processCloudDemoPage.editProcessFilterCloudComponent().setOrderFilterDropDown('DESC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('DESC', 'Last Modified')).toBe(true);
+        });
+
+        it('[C305054] Should display processes ordered by business key date when BusinessKey is selected from sort dropdown', async () => {
+            processCloudDemoPage.editProcessFilterCloudComponent().clickCustomiseFilterHeader().setStatusFilterDropDown('ALL')
+                .setSortFilterDropDown('BusinessKey').setOrderFilterDropDown('ASC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('ASC', 'Business Key')).toBe(true);
+
+            processCloudDemoPage.editProcessFilterCloudComponent().setOrderFilterDropDown('DESC');
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().checkListIsSorted('DESC', 'Business Key')).toBe(true);
+        });
+
+        it('[C305054] Should display the actions filters Save, SaveAs and Delete', async () => {
+            processCloudDemoPage.allProcessesFilter().clickProcessFilter();
+            processCloudDemoPage.allProcessesFilter().checkProcessFilterIsDisplayed();
+            expect(processCloudDemoPage.getActiveFilterName()).toBe('All Processes');
+            processCloudDemoPage.editProcessFilterCloudComponent().clickCustomiseFilterHeader();
+            processCloudDemoPage.editProcessFilterCloudComponent().checkSaveButtonIsDisplayed().checkSaveAsButtonIsDisplayed()
+                .checkDeleteButtonIsDisplayed();
+        });
+
         it('[C297697] The value of the filter should be preserved when saving it', async () => {
             processCloudDemoPage.editProcessFilterCloudComponent().clickCustomiseFilterHeader()
                 .setProcessInstanceId(completedProcess.entry.id);
@@ -194,6 +260,34 @@ xdescribe('Process list cloud', () => {
             BrowserActions.closeMenuAndDialogs();
         });
 
+        describe('Process List - Check Action Filters', () => {
+
+            beforeEach(async (done) => {
+                await LocalStorageUtil.setConfigField('adf-edit-process-filter', JSON.stringify({
+                    'actions': [
+                        'save',
+                        'saveAs'
+                    ]
+                }));
+                navigationBarPage.navigateToProcessServicesCloudPage();
+                appListCloudComponent.checkApsContainer();
+                appListCloudComponent.goToApp(candidateBaseApp);
+                tasksCloudDemoPage.taskListCloudComponent().checkTaskListIsLoaded();
+                processCloudDemoPage.clickOnProcessFilters();
+                done();
+            });
+
+            it('[C305054] Should display the actions filters Save and SaveAs, Delete button is not displayed', async () => {
+                processCloudDemoPage.allProcessesFilter().clickProcessFilter();
+                processCloudDemoPage.allProcessesFilter().checkProcessFilterIsDisplayed();
+                expect(processCloudDemoPage.getActiveFilterName()).toBe('All Processes');
+                processCloudDemoPage.editProcessFilterCloudComponent().clickCustomiseFilterHeader();
+                processCloudDemoPage.editProcessFilterCloudComponent().checkSaveButtonIsDisplayed().checkSaveAsButtonIsDisplayed()
+                    .checkDeleteButtonIsNotDisplayed();
+            });
+
+        });
+
     });
 
 });

e2e/process-services-cloud/processList-cloud-component.e2e.ts

@@ -100,7 +100,7 @@ describe('Process list cloud', () => {
 
         it('[C291997] Should be able to change the default columns', async () => {
 
-            expect(processCloudDemoPage.processListCloudComponent().getDataTable().getNumberOfColumns()).toBe(12);
+            expect(processCloudDemoPage.processListCloudComponent().getDataTable().getNumberOfColumns()).toBe(10);
             processCloudDemoPage.processListCloudComponent().getDataTable().checkColumnIsDisplayed('id');
             processCloudDemoPage.processListCloudComponent().getDataTable().checkColumnIsDisplayed('name');
             processCloudDemoPage.processListCloudComponent().getDataTable().checkColumnIsDisplayed('status');
@@ -109,8 +109,6 @@ describe('Process list cloud', () => {
             processCloudDemoPage.processListCloudComponent().getDataTable().checkColumnIsDisplayed('businessKey');
             processCloudDemoPage.processListCloudComponent().getDataTable().checkColumnIsDisplayed('initiator');
             processCloudDemoPage.processListCloudComponent().getDataTable().checkColumnIsDisplayed('lastModified');
-            processCloudDemoPage.processListCloudComponent().getDataTable().checkColumnIsDisplayed('processName');
-            processCloudDemoPage.processListCloudComponent().getDataTable().checkColumnIsDisplayed('processId');
             processCloudDemoPage.processListCloudComponent().getDataTable().checkColumnIsDisplayed('processDefinitionId');
             processCloudDemoPage.processListCloudComponent().getDataTable().checkColumnIsDisplayed('processDefinitionKey');
 

e2e/process-services-cloud/processListCloud.config.ts

@@ -70,28 +70,16 @@ export class ProcessListCloudConfiguration {
                         'title': 'ADF_CLOUD_PROCESS_LIST.PROPERTIES.LAST_MODIFIED',
                         'sortable': true
                     },
-                    {
-                        'key': 'entry.processName',
-                        'type': 'text',
-                        'title': 'ADF_CLOUD_PROCESS_LIST.PROPERTIES.PROCESS_NAME',
-                        'sortable': true
-                    },
-                    {
-                        'key': 'entry.processId',
-                        'type': 'text',
-                        'title': 'ADF_CLOUD_PROCESS_LIST.PROPERTIES.PROCESS_ID',
-                        'sortable': true
-                    },
                     {
                         'key': 'entry.processDefinitionId',
                         'type': 'text',
-                        'title': 'ADF_CLOUD_PROCESS_LIST.PROPERTIES.PROCESS_DEFINITION_ID',
+                        'title': 'ADF_CLOUD_PROCESS_LIST.PROPERTIES.PROCESS_DEF_ID',
                         'sortable': true
                     },
                     {
                         'key': 'entry.processDefinitionKey',
                         'type': 'text',
-                        'title': 'ADF_CLOUD_PROCESS_LIST.PROPERTIES.PROCESS_DEFINITION_KEY',
+                        'title': 'ADF_CLOUD_PROCESS_LIST.PROPERTIES.PROCESS_DEF_KEY',
                         'sortable': true
                     }
                 ]

lib/cli/bin/doc/licenseList.js

@@ -51,7 +51,7 @@ checker.init({
     } else {
         for (var packageName in packages) {
             var pack = packages[packageName];
-            pack['licenseExp'] = pack['licenses']
+            pack['licenseExp'] = pack['licenses'].toString()
                 .replace(/\*/, '')
                 .replace(/[a-zA-Z0-9\-\.]+/g, match => {
                     var lowerMatch = match.toLowerCase();

lib/cli/package-lock.json

@@ -227,6 +227,11 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "ejs": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz",
+      "integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ=="
+    },
     "encoding": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",

lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts

@@ -27,7 +27,7 @@ import { ProcessServiceCloudTestingModule } from '../../testing/process-service-
 import { FormCloudService } from '../services/form-cloud.service';
 import { FormCloudComponent } from './form-cloud.component';
 import { FormCloud } from '../models/form-cloud.model';
-import { cloudFormMock } from '../mocks/cloud-form.mock';
+import { cloudFormMock, fakeCloudForm } from '../mocks/cloud-form.mock';
 import { FormCloudRepresentation } from '../models/form-cloud-representation.model';
 
 describe('FormCloudComponent', () => {
@@ -422,15 +422,10 @@ describe('FormCloudComponent', () => {
     });
 
     it('should fetch and parse form definition by id', (done) => {
-        spyOn(formCloudService, 'getForm').and.callFake((currentAppName, currentFormId) => {
-            return new Observable((observer) => {
-                observer.next({ id: currentFormId });
-                observer.complete();
-            });
-        });
+        spyOn(formCloudService, 'getForm').and.returnValue(of(fakeCloudForm));
 
         const appName = 'test-app';
-        const formId = '456';
+        const formId = 'form-de8895be-d0d7-4434-beef-559b15305d72';
         formComponent.formLoaded.subscribe(() => {
             expect(formComponent.form).toBeDefined();
             expect(formComponent.form.id).toBe(formId);

lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts

@@ -20,7 +20,7 @@ import {
     Output, SimpleChanges, OnDestroy
 } from '@angular/core';
 import { Observable, of, forkJoin, Subject } from 'rxjs';
-import { switchMap, takeUntil } from 'rxjs/operators';
+import { switchMap, takeUntil, map } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 import {
     FormBaseComponent,
@@ -206,7 +206,13 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
     getFormById(appName: string, formId: string) {
         this.formCloudService
             .getForm(appName, formId)
-            .pipe(takeUntil(this.onDestroy$))
+            .pipe(
+                map((form: any) => {
+                    const flattenForm = {...form.formRepresentation, ...form.formRepresentation.formDefinition};
+                    delete flattenForm.formDefinition;
+                    return flattenForm;
+                }),
+                takeUntil(this.onDestroy$))
             .subscribe(
                 (form) => {
                     const parsedForm = this.parseForm(form);

lib/process-services-cloud/src/lib/form/mocks/cloud-form.mock.ts

@@ -675,3 +675,67 @@ export const cloudFormMock = {
         }
     ]
 };
+
+export let fakeCloudForm = {
+    'formRepresentation': {
+        'id': 'form-de8895be-d0d7-4434-beef-559b15305d72',
+        'name': 'StartEventForm',
+        'description': '',
+        'version': 0,
+        'formDefinition': {
+            'tabs': [],
+            'fields': [
+                {
+                    'type': 'container',
+                    'id': '5a6b24c1-db2b-45e9-9aff-142395433d23',
+                    'name': 'Label',
+                    'tab': null,
+                    'fields': {
+                        '1': [
+                            {
+                                'type': 'text',
+                                'id': 'firstName',
+                                'name': 'firstName',
+                                'colspan': 1,
+                                'params': {
+                                    'existingColspan': 1,
+                                    'maxColspan': 2
+                                },
+                                'visibilityCondition': null,
+                                'placeholder': null,
+                                'value': null,
+                                'required': false,
+                                'minLength': 0,
+                                'maxLength': 0,
+                                'regexPattern': null
+                            }
+                        ],
+                        '2': [
+                            {
+                                'type': 'text',
+                                'id': 'lastName',
+                                'name': 'lastName',
+                                'colspan': 1,
+                                'params': {
+                                    'existingColspan': 1,
+                                    'maxColspan': 2
+                                },
+                                'visibilityCondition': null,
+                                'placeholder': null,
+                                'value': null,
+                                'required': false,
+                                'minLength': 0,
+                                'maxLength': 0,
+                                'regexPattern': null
+                            }
+                        ]
+                    },
+                    'numberOfColumns': 2
+                }
+            ],
+            'outcomes': [],
+            'metadata': {},
+            'variables': []
+        }
+    }
+};

lib/process-services-cloud/src/lib/form/services/form-cloud.service.ts

@@ -211,11 +211,11 @@ export class FormCloudService extends BaseCloudService {
     /**
      * Gets a form definition.
      * @param appName Name of the app
-     * @param taskId ID of the target task
+     * @param formKey key of the target task
      * @returns Form definition
      */
-    getForm(appName: string, taskId: string): Observable<any> {
-        const apiUrl = this.buildGetFormUrl(appName, taskId);
+    getForm(appName: string, formKey: string): Observable<any> {
+        const apiUrl = this.buildGetFormUrl(appName, formKey);
         const bodyParam = {}, pathParams = {}, queryParams = {}, headerParams = {},
             formParams = {};
 
@@ -282,8 +282,8 @@ export class FormCloudService extends BaseCloudService {
         return `${this.getBasePath(appName)}/query/v1/tasks/${taskId}`;
     }
 
-    private buildGetFormUrl(appName: string, formId: string): string {
-        return `${this.getBasePath(appName)}/form/v1/forms/${formId}`;
+    private buildGetFormUrl(appName: string, formKey: string): string {
+        return `${this.getBasePath(appName)}/form/v1/forms/${formKey}`;
     }
 
     private buildSaveFormUrl(appName: string, formId: string): string {

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html

@@ -48,9 +48,10 @@
         </form>
 
         <ng-container *ngIf="hasForm() else taskFormCloudButtons">
-            <adf-cloud-form *ngIf="hasForm()" [appName]="appName" [data]="values" [formId]="processDefinitionCurrent.formKey"
+            <adf-cloud-form [appName]="appName" [data]="values" [formId]="processDefinitionCurrent.formKey"
                 [showSaveButton]="false" [showCompleteButton]="false" [showRefreshButton]="false" [showValidationIcon]="false"
-                [showTitle]="false" #formCloud>
+                [showTitle]="false"
+                (formLoaded)="onFormLoaded($event)">
                 <adf-cloud-form-custom-outcomes>
                     <ng-template [ngTemplateOutlet]="taskFormCloudButtons">
                     </ng-template>
@@ -61,13 +62,15 @@
     </mat-card-content>
 
     <ng-template #taskFormCloudButtons>
-        <button mat-button (click)="cancelStartProcess()" id="cancel_process">
-            {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.CANCEL' | translate | uppercase}}
-        </button>
-        <button color="primary" mat-button [disabled]="!processForm.valid || isLoading" (click)="startProcess()"
-            data-automation-id="btn-start" id="button-start" class="btn-start">
-            {{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
-        </button>
+        <div fxLayout="row" fxLayoutAlign="end end">
+            <button mat-button (click)="cancelStartProcess()" id="cancel_process">
+                {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.CANCEL' | translate | uppercase}}
+            </button>
+            <button color="primary" mat-button [disabled]="!isProcessFormValid()" (click)="startProcess()"
+                data-automation-id="btn-start" id="button-start" class="btn-start">
+                {{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
+            </button>
+        </div>
     </ng-template>
 
     <ng-template #emptyProcessDefinitionsList>

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts

@@ -25,7 +25,8 @@ import { FormCloudService } from '../../../form/services/form-cloud.service';
 import { StartProcessCloudComponent } from './start-process-cloud.component';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { ProcessCloudModule } from '../../process-cloud.module';
-import { fakeProcessDefinitions, fakeStartForm, fakeProcessInstance, fakeProcessPayload, fakeNoNameProcessDefinitions } from '../mock/start-process.component.mock';
+import { fakeProcessDefinitions, fakeStartForm, fakeStartFormNotValid,
+    fakeProcessInstance, fakeProcessPayload, fakeNoNameProcessDefinitions } from '../mock/start-process.component.mock';
 
 describe('StartProcessCloudComponent', () => {
 
@@ -64,7 +65,7 @@ describe('StartProcessCloudComponent', () => {
 
     describe('start a process without start form', () => {
 
-        it('should enable start button when name and process filled out', async(() => {
+        it('should be able to start a process with a valid process name and process definition', async(() => {
             component.name = 'My new process';
             component.processDefinitionName = 'processwithoutform2';
             fixture.detectChanges();
@@ -116,7 +117,7 @@ describe('StartProcessCloudComponent', () => {
             component.name = 'My new process with form';
         });
 
-        it('should show a form if the process definition has one', async(() => {
+        it('should be able to start a process with a valid form', async(() => {
             component.processDefinitionName = 'processwithform';
             fixture.detectChanges();
             getDefinitionsSpy = spyOn(formCloudService, 'getForm').and.returnValue(of(fakeStartForm));
@@ -131,11 +132,32 @@ describe('StartProcessCloudComponent', () => {
                 const lastNameEl = fixture.nativeElement.querySelector('#lastName');
                 expect(lastNameEl).toBeDefined();
                 const startBtn = fixture.nativeElement.querySelector('#button-start');
+                expect(component.formCloud.isValid).toBe(true);
                 expect(startBtn.disabled).toBe(false);
             });
         }));
 
-        it('should show a prefilled form if the values are passed as input', async(() => {
+        it('should NOT be able to start a process with a form NOT valid', async(() => {
+            component.processDefinitionName = 'processwithform';
+            fixture.detectChanges();
+            getDefinitionsSpy = spyOn(formCloudService, 'getForm').and.returnValue(of(fakeStartFormNotValid));
+
+            const change = new SimpleChange(null, 'MyApp', true);
+            component.ngOnChanges({ 'appName': change });
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                const firstNameEl = fixture.nativeElement.querySelector('#firstName');
+                expect(firstNameEl).toBeDefined();
+                const lastNameEl = fixture.nativeElement.querySelector('#lastName');
+                expect(lastNameEl).toBeDefined();
+                const startBtn = fixture.nativeElement.querySelector('#button-start');
+                expect(component.formCloud.isValid).toBe(false);
+                expect(startBtn.disabled).toBe(true);
+            });
+        }));
+
+        it('should be able to start a process with a prefilled valid form', async(() => {
             component.processDefinitionName = 'processwithform';
             component.values = [{'name': 'firstName', 'value': 'FakeName'}, {'name': 'lastName', 'value': 'FakeLastName'}];
             fixture.detectChanges();
@@ -153,9 +175,33 @@ describe('StartProcessCloudComponent', () => {
                 expect(lastNameEl).toBeDefined();
                 expect(lastNameEl.value).toEqual('FakeLastName');
                 const startBtn = fixture.nativeElement.querySelector('#button-start');
+                expect(component.formCloud.isValid).toBe(true);
                 expect(startBtn.disabled).toBe(false);
             });
         }));
+
+        it('should NOT be able to start a process with a prefilled NOT valid form', async(() => {
+            component.processDefinitionName = 'processwithform';
+            component.values = [{'name': 'firstName', 'value': 'FakeName'}, {'name': 'lastName', 'value': 'FakeLastName'}];
+            fixture.detectChanges();
+            getDefinitionsSpy = spyOn(formCloudService, 'getForm').and.returnValue(of(fakeStartFormNotValid));
+
+            const change = new SimpleChange(null, 'MyApp', true);
+            component.ngOnChanges({ 'appName': change });
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                const firstNameEl = fixture.nativeElement.querySelector('#firstName');
+                expect(firstNameEl).toBeDefined();
+                expect(firstNameEl.value).toEqual('FakeName');
+                const lastNameEl = fixture.nativeElement.querySelector('#lastName');
+                expect(lastNameEl).toBeDefined();
+                expect(lastNameEl.value).toEqual('FakeLastName');
+                const startBtn = fixture.nativeElement.querySelector('#button-start');
+                expect(component.formCloud.isValid).toBe(false);
+                expect(startBtn.disabled).toBe(true);
+            });
+        }));
     });
 
     describe('process definitions list', () => {

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts

@@ -28,8 +28,8 @@ import { ProcessPayloadCloud } from '../models/process-payload-cloud.model';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { ProcessDefinitionCloud } from '../models/process-definition-cloud.model';
 import { Subject } from 'rxjs';
-import { FormCloudComponent } from '../../../form/components/form-cloud.component';
 import { TaskVariableCloud } from '../../../form/models/task-variable-cloud.model';
+import { FormCloud } from '../../../form/models/form-cloud.model';
 
 @Component({
     selector: 'adf-cloud-start-process',
@@ -44,9 +44,6 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     @ViewChild(MatAutocompleteTrigger)
     inputAutocomplete: MatAutocompleteTrigger;
 
-    @ViewChild(FormCloudComponent)
-    formCloud: FormCloudComponent;
-
     /** (required) Name of the app. */
     @Input()
     appName: string;
@@ -94,6 +91,8 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     processPayloadCloud = new ProcessPayloadCloud();
     filteredProcesses: ProcessDefinitionCloud[] = [];
     isLoading = false;
+    isFormCloudLoaded = false;
+    formCloud: FormCloud;
     protected onDestroy$ = new Subject<boolean>();
     constructor(private startProcessCloudService: StartProcessCloudService,
                 private formBuilder: FormBuilder) {
@@ -129,6 +128,11 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
         return this.processDefinitionCurrent && !!this.processDefinitionCurrent.formKey;
     }
 
+    onFormLoaded(form: FormCloud) {
+        this.isFormCloudLoaded = true;
+        this.formCloud = form;
+    }
+
     private getMaxNameLength(): number {
         return this.maxNameLength > StartProcessCloudComponent.MAX_NAME_LENGTH ?
             StartProcessCloudComponent.MAX_NAME_LENGTH : this.maxNameLength;
@@ -137,6 +141,8 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     setProcessDefinitionOnForm(processDefinition: string) {
         this.filteredProcesses = this.getProcessDefinitionList(processDefinition);
         const selectedProcess = this.getProcessIfExists(processDefinition);
+        this.processDefinitionCurrent = selectedProcess;
+        this.isFormCloudLoaded = false;
         this.processPayloadCloud.processDefinitionKey = selectedProcess.key;
     }
 
@@ -164,6 +170,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
         const selectedProcess = this.getProcessDefinitionByName(this.processDefinitionName);
         if (selectedProcess) {
             this.processDefinitionCurrent = selectedProcess;
+            this.isFormCloudLoaded = false;
             this.processDefinition.setValue(selectedProcess.name);
             this.processPayloadCloud.processDefinitionKey = selectedProcess.key;
         }
@@ -189,6 +196,14 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
         return !!name;
     }
 
+    isProcessFormValid(): boolean {
+        if (this.hasForm() && this.isFormCloudLoaded) {
+            return this.formCloud.isValid || this.isLoading;
+        } else {
+            return this.processForm.valid || this.isLoading;
+        }
+    }
+
     private getProcessDefinition(option: ProcessDefinitionCloud, processDefinition: string): boolean {
         return (this.isValidName(option.name) && option.name.toLowerCase().includes(processDefinition.toLowerCase())) ||
                  (option.key && option.key.toLowerCase().includes(processDefinition.toLowerCase()));
@@ -207,7 +222,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
         }
 
         if (this.hasForm()) {
-            this.processPayloadCloud.variables = Object.assign(this.processPayloadCloud.variables, this.formCloud.form.values);
+            this.processPayloadCloud.variables = Object.assign(this.processPayloadCloud.variables, this.formCloud.values);
         }
 
         this.startProcessCloudService.startProcess(this.appName, this.processPayloadCloud).subscribe(

lib/process-services-cloud/src/lib/process/start-process/mock/start-process.component.mock.ts

@@ -81,61 +81,129 @@ export let fakeProcessPayload = new ProcessPayloadCloud({
 });
 
 export let fakeStartForm = {
-    'id': 'form-a5d50817-5183-4850-802d-17af54b2632f',
-    'name': 'simpleform',
-    'description': '',
-    'version': 0,
-    'tabs': [],
-    'fields': [
-        {
-            'type': 'container',
-            'id': '5a6b24c1-db2b-45e9-9aff-142395433d23',
-            'name': 'Label',
-            'tab': null,
-            'fields': {
-                '1': [
-                    {
-                        'type': 'text',
-                        'id': 'firstName',
-                        'name': 'firstName',
-                        'colspan': 1,
-                        'params': {
-                            'existingColspan': 1,
-                            'maxColspan': 2
-                        },
-                        'visibilityCondition': null,
-                        'placeholder': null,
-                        'value': null,
-                        'required': false,
-                        'minLength': 0,
-                        'maxLength': 0,
-                        'regexPattern': null
-                    }
-                ],
-                '2': [
-                    {
-                        'type': 'text',
-                        'id': 'lastName',
-                        'name': 'lastName',
-                        'colspan': 1,
-                        'params': {
-                            'existingColspan': 1,
-                            'maxColspan': 2
-                        },
-                        'visibilityCondition': null,
-                        'placeholder': null,
-                        'value': null,
-                        'required': false,
-                        'minLength': 0,
-                        'maxLength': 0,
-                        'regexPattern': null
-                    }
-                ]
-            },
-            'numberOfColumns': 2
+    'formRepresentation': {
+        'id': 'form-de8895be-d0d7-4434-beef-559b15305d72',
+        'name': 'StartEventForm',
+        'description': '',
+        'version': 0,
+        'formDefinition': {
+            'tabs': [],
+            'fields': [
+                {
+                    'type': 'container',
+                    'id': '5a6b24c1-db2b-45e9-9aff-142395433d23',
+                    'name': 'Label',
+                    'tab': null,
+                    'fields': {
+                        '1': [
+                            {
+                                'type': 'text',
+                                'id': 'firstName',
+                                'name': 'firstName',
+                                'colspan': 1,
+                                'params': {
+                                    'existingColspan': 1,
+                                    'maxColspan': 2
+                                },
+                                'visibilityCondition': null,
+                                'placeholder': null,
+                                'value': null,
+                                'required': false,
+                                'minLength': 0,
+                                'maxLength': 0,
+                                'regexPattern': null
+                            }
+                        ],
+                        '2': [
+                            {
+                                'type': 'text',
+                                'id': 'lastName',
+                                'name': 'lastName',
+                                'colspan': 1,
+                                'params': {
+                                    'existingColspan': 1,
+                                    'maxColspan': 2
+                                },
+                                'visibilityCondition': null,
+                                'placeholder': null,
+                                'value': null,
+                                'required': false,
+                                'minLength': 0,
+                                'maxLength': 0,
+                                'regexPattern': null
+                            }
+                        ]
+                    },
+                    'numberOfColumns': 2
+                }
+            ],
+            'outcomes': [],
+            'metadata': {},
+            'variables': []
         }
-    ],
-    'outcomes': [],
-    'metadata': {},
-    'variables': []
+    }
+};
+
+export let fakeStartFormNotValid = {
+    'formRepresentation': {
+        'id': 'form-a5d50817-5183-4850-802d-17af54b2632f',
+        'name': 'simpleform',
+        'description': '',
+        'version': 0,
+        'formDefinition': {
+            'tabs': [],
+            'fields': [
+                {
+                    'type': 'container',
+                    'id': '5a6b24c1-db2b-45e9-9aff-142395433d23',
+                    'name': 'Label',
+                    'tab': null,
+                    'fields': {
+                        '1': [
+                            {
+                                'type': 'text',
+                                'id': 'firstName',
+                                'name': 'firstName',
+                                'colspan': 1,
+                                'params': {
+                                    'existingColspan': 1,
+                                    'maxColspan': 2
+                                },
+                                'visibilityCondition': null,
+                                'placeholder': null,
+                                'value': null,
+                                'required': true,
+                                'minLength': 15,
+                                'maxLength': 0,
+                                'regexPattern': null
+                            }
+                        ],
+                        '2': [
+                            {
+                                'type': 'text',
+                                'id': 'lastName',
+                                'name': 'lastName',
+                                'colspan': 1,
+                                'params': {
+                                    'existingColspan': 1,
+                                    'maxColspan': 2
+                                },
+                                'visibilityCondition': null,
+                                'placeholder': null,
+                                'value': null,
+                                'required': false,
+                                'minLength': 0,
+                                'maxLength': 0,
+                                'regexPattern': null
+                            }
+                        ]
+                    },
+                    'numberOfColumns': 2
+                }
+            ],
+            'outcomes': [],
+            'metadata': {},
+            'variables': []
+        }
+    }
 };

lib/process-services-cloud/src/lib/process/start-process/models/process-payload-cloud.model.ts

@@ -26,6 +26,6 @@ export class ProcessPayloadCloud {
         this.processDefinitionKey = obj && obj.processDefinitionKey ? obj.processDefinitionKey : null;
         this.name = obj && obj.name ? obj.name : null;
         this.businessKey = obj && obj.businessKey ? obj.businessKey : null;
-        this.variables = obj && obj.variables ? obj.variables : null;
+        this.variables = obj && obj.variables ? obj.variables : {};
     }
 }

lib/testing/src/lib/process-services-cloud/pages/edit-process-filter-cloud-component.page.ts

@@ -155,6 +155,11 @@ export class EditProcessFilterCloudComponentPage {
         return this;
     }
 
+    checkDeleteButtonIsNotDisplayed() {
+        BrowserVisibility.waitUntilElementIsNotVisible(this.deleteButton);
+        return this;
+    }
+
     checkSaveButtonIsEnabled() {
         BrowserVisibility.waitUntilElementIsVisible(this.saveButton);
         return this.saveButton.isEnabled();