[ACA-3348] Add default process name pipe (#5745)

* [ACA-3348] Add default process name pipe

* [ACA-3348] Add documentation

* [ACA-3348] Change transform function to recieve a process def parameter, Update documentation

* Change parameter type to fix build

* Fix lint errors

* Move unit test to the correct describe

* Fix lint errors

* Move from one core pipe to different for APS1 and Cloud

* Add Pipe to process cloud providers

* Update documentation

* Revert demo-shell default process name

* Fix pipe version in documentation

* e2e - select process definition and then type name

* Fix process services e2e

* Align process filters e2e

* Align start-task-form cloud e2e

* Use processInstance model instead of processDefinition as a parameter for transform function

demo-shell/src/app/components/cloud/community/community-start-process-cloud.component.ts

@@ -34,7 +34,7 @@ export class CommunityStartProcessCloudDemoComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.processName = this.appConfig.get<string>('adf-start-process.name');
+        this.processName = this.appConfig.get<string>('adf-start-process-cloud.name');
     }
 
     onStartProcessSuccess() {

docs/process-services-cloud/pipes/process-name-cloud.pipe.md

@@ -0,0 +1,44 @@
+---
+Title: Process name cloud pipe
+Added: v3.9.0
+Status: Active
+Last reviewed: 2020-06-02
+---
+
+# [Process name cloud pipe](../../../lib/process-services-cloud/src/lib/pipes/process-name-cloud.pipe.ts "Defined in process-name-cloud.pipe.ts")
+
+When an identifier is specified, the input will be transformed replacing the identifiers with the values of the selected process definition provided.
+## Basic Usage
+processNameCloudPipe.transform('Example - %{processDefinition} - %{datetime}', new ProcessDefinitionCloud({ name: 'upload-passport'}));
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| processNameFormat | string | undefined | The process name format including the preferred identifiers to be used |
+| selectedProcessDefinition | ProcessDefinitionCloud | undefined | (optional) The selected process definition |
+
+## Details
+The pipe offers a convenient way to format a process name using a process name format template.
+
+The supported identifiers that can be used in the process name format are the following:
+
+- %{processDefinition}
+- %{datetime}
+
+When the %{processDefinition} identifier is used, the selected process definition provided
+will be added and positioned in the same place as the identifier.
+
+When the %{datetime} identifier is used, the current datetime will be added and positioned in the same place as the identifier.
+
+Important Notes:
+- All the identifiers are case-insensitive.
+- The identifiers can be used in any position (beginning, middle, end, custom).
+- The identifiers can NOT be used more than once each in the same processNameFormat (The second occurrence of each identifier will be ignored
+and handled as a plain string).
+
+#### Result
+
+```ts
+processNameCloudPipe.transform('Example - %{processDefinition} - %{datetime}', new ProcessDefinitionCloud({ name: 'upload-passport'}));
+//Returns 'Example - upload passport - June 02, 2020, 12:00:00 AM'
+```

docs/process-services/pipes/process-name.pipe.md

@@ -0,0 +1,44 @@
+---
+Title: Process name pipe
+Added: v3.9.0
+Status: Active
+Last reviewed: 2020-06-02
+---
+
+# [Process name pipe](../../../lib/process-services/src/lib/pipes/process-name.pipe.ts "Defined in process-name.pipe.ts")
+
+When an identifier is specified, the input will be transformed replacing the identifiers with the values of the selected process definition provided.
+## Basic Usage
+processNamePipe.transform('Example - %{processDefinition} - %{datetime}', new ProcessDefinitionRepresentation({ name: 'upload-passport'}));
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| processNameFormat | string | undefined | The process name format including the preferred identifiers to be used |
+| selectedProcessDefinition | ProcessDefinitionRepresentation | undefined | (optional) The selected process definition |
+
+## Details
+The pipe offers a convenient way to format a process name using a process name format template.
+
+The supported identifiers that can be used in the process name format are the following:
+
+- %{processDefinition}
+- %{datetime}
+
+When the %{processDefinition} identifier is used, the selected process definition provided
+will be added and positioned in the same place as the identifier.
+
+When the %{datetime} identifier is used, the current datetime will be added and positioned in the same place as the identifier.
+
+Important Notes:
+- All the identifiers are case-insensitive.
+- The identifiers can be used in any position (beginning, middle, end, custom).
+- The identifiers can NOT be used more than once each in the same processNameFormat (The second occurrence of each identifier will be ignored
+and handled as a plain string).
+
+#### Result
+
+```ts
+processNamePipe.transform('Example - %{processDefinition} - %{datetime}', new ProcessDefinitionRepresentation({ name: 'upload-passport'}));
+//Returns 'Example - upload passport - June 02, 2020, 12:00:00 AM'
+```

e2e/process-services-cloud/start-task-form-cloud.e2e.ts

@@ -214,8 +214,8 @@ describe('Start Task Form', () => {
             await appListCloudComponent.goToApp(candidateBaseApp);
             await processCloudDemoPage.openNewProcessForm();
             await startProcessPage.clearField(startProcessPage.processNameInput);
-            await startProcessPage.enterProcessName(startEventFormProcess);
             await startProcessPage.selectFromProcessDropdown(browser.params.resources.ACTIVITI_CLOUD_APPS.CANDIDATE_BASE_APP.processes.processwithstarteventform);
+            await startProcessPage.enterProcessName(startEventFormProcess);
 
             await startProcessPage.formFields().checkFormIsDisplayed();
         });

e2e/process-services/process-filters-component.e2e.ts

@@ -84,8 +84,8 @@ describe('Process Filters Test', () => {
         await processFiltersPage.clickCreateProcessButton();
         await processFiltersPage.clickNewProcessDropdown();
 
-        await startProcessPage.enterProcessName(processTitle.completed);
         await startProcessPage.selectFromProcessDropdown(app.process_title);
+        await startProcessPage.enterProcessName(processTitle.completed);
         await startProcessPage.clickFormStartProcessButton();
 
         await processDetailsPage.clickCancelProcessButton();
@@ -97,8 +97,8 @@ describe('Process Filters Test', () => {
         await processFiltersPage.clickCreateProcessButton();
         await processFiltersPage.clickNewProcessDropdown();
 
-        await startProcessPage.enterProcessName(processTitle.running);
         await startProcessPage.selectFromProcessDropdown(app.process_title);
+        await startProcessPage.enterProcessName(processTitle.running);
         await startProcessPage.clickFormStartProcessButton();
 
         await processFiltersPage.checkFilterIsHighlighted(processFilter.running);

e2e/process-services/start-process-component.e2e.ts

@@ -125,11 +125,12 @@ describe('Start Process Component', () => {
                 await processServicesPage.checkApsContainer();
             });
 
-            it('[C260441] Should display start process form and default name when creating a new process', async () => {
+            it('[C260441] Should display start process form and default name when creating a new process after selecting the process definition', async () => {
                 await processServicesPage.goToApp('Task App');
                 await processServiceTabBarPage.clickProcessButton();
                 await processFiltersPage.clickCreateProcessButton();
                 await processFiltersPage.clickNewProcessDropdown();
+                await startProcessPage.selectFromProcessDropdown(browser.params.resources.Files.APP_WITH_PROCESSES.process_wse_name);
                 await expect(await startProcessPage.getDefaultName()).toEqual('My Default Name');
             });
 
@@ -251,9 +252,9 @@ describe('Start Process Component', () => {
                 await processServiceTabBarPage.clickProcessButton();
                 await processFiltersPage.clickCreateProcessButton();
                 await processFiltersPage.clickNewProcessDropdown();
-                await startProcessPage.enterProcessName('Type');
                 await startProcessPage.typeProcessDefinition(browser.params.resources.Files.APP_WITH_PROCESSES.process_wse_name);
                 await startProcessPage.selectProcessOption(browser.params.resources.Files.APP_WITH_PROCESSES.process_wse_name);
+                await startProcessPage.enterProcessName('Type');
                 await startProcessPage.checkStartProcessButtonIsEnabled();
                 await expect(await startProcessPage.getProcessDefinitionValue()).toBe(browser.params.resources.Files.APP_WITH_PROCESSES.process_wse_name);
                 await startProcessPage.clickStartProcessButton();
@@ -290,8 +291,8 @@ describe('Start Process Component', () => {
                 await processServiceTabBarPage.clickProcessButton();
                 await processFiltersPage.clickCreateProcessButton();
                 await processFiltersPage.clickNewProcessDropdown();
-                await startProcessPage.enterProcessName('Comment Process');
                 await startProcessPage.selectFromProcessDropdown(browser.params.resources.Files.APP_WITH_PROCESSES.process_se_name);
+                await startProcessPage.enterProcessName('Comment Process');
                 await startProcessPage.clickFormStartProcessButton();
                 await processFiltersPage.clickRunningFilterButton();
                 await processFiltersPage.selectFromProcessList('Comment Process');
@@ -304,8 +305,8 @@ describe('Start Process Component', () => {
                 await processServiceTabBarPage.clickProcessButton();
                 await processFiltersPage.clickCreateProcessButton();
                 await processFiltersPage.clickNewProcessDropdown();
-                await startProcessPage.enterProcessName('Audit Log');
                 await startProcessPage.selectFromProcessDropdown(browser.params.resources.Files.APP_WITH_PROCESSES.process_se_name);
+                await startProcessPage.enterProcessName('Audit Log');
                 await startProcessPage.clickFormStartProcessButton();
                 await processFiltersPage.clickRunningFilterButton();
                 await processFiltersPage.selectFromProcessList('Audit Log');
@@ -322,8 +323,8 @@ describe('Start Process Component', () => {
                 await processFiltersPage.clickCreateProcessButton();
                 await processFiltersPage.clickNewProcessDropdown();
 
-                await startProcessPage.enterProcessName('Attach File');
                 await startProcessPage.selectFromProcessDropdown(browser.params.resources.Files.APP_WITH_PROCESSES.process_se_name);
+                await startProcessPage.enterProcessName('Attach File');
                 await startProcessPage.clickFormStartProcessButton();
 
                 await processFiltersPage.clickRunningFilterButton();
@@ -341,8 +342,8 @@ describe('Start Process Component', () => {
                 await processFiltersPage.clickCreateProcessButton();
                 await processFiltersPage.clickNewProcessDropdown();
 
-                await startProcessPage.enterProcessName('Show Diagram');
                 await startProcessPage.selectFromProcessDropdown(browser.params.resources.Files.APP_WITH_PROCESSES.process_se_name);
+                await startProcessPage.enterProcessName('Show Diagram');
                 await startProcessPage.clickFormStartProcessButton();
 
                 await processFiltersPage.clickRunningFilterButton();
@@ -356,8 +357,8 @@ describe('Start Process Component', () => {
                 await processServiceTabBarPage.clickProcessButton();
                 await processFiltersPage.clickCreateProcessButton();
                 await processFiltersPage.clickNewProcessDropdown();
-                await startProcessPage.enterProcessName('Active Task');
                 await startProcessPage.selectFromProcessDropdown(browser.params.resources.Files.APP_WITH_PROCESSES.process_se_name);
+                await startProcessPage.enterProcessName('Active Task');
                 await startProcessPage.clickFormStartProcessButton();
                 await processFiltersPage.clickRunningFilterButton();
                 await processFiltersPage.selectFromProcessList('Active Task');
@@ -373,8 +374,8 @@ describe('Start Process Component', () => {
                 await processServiceTabBarPage.clickProcessButton();
                 await processFiltersPage.clickCreateProcessButton();
                 await processFiltersPage.clickNewProcessDropdown();
-                await startProcessPage.enterProcessName('Cancel Process');
                 await startProcessPage.selectFromProcessDropdown(browser.params.resources.Files.APP_WITH_PROCESSES.process_se_name);
+                await startProcessPage.enterProcessName('Cancel Process');
                 await startProcessPage.clickFormStartProcessButton();
                 await processFiltersPage.clickRunningFilterButton();
                 await processFiltersPage.selectFromProcessList('Cancel Process');
@@ -389,8 +390,8 @@ describe('Start Process Component', () => {
                 await processServiceTabBarPage.clickProcessButton();
                 await processFiltersPage.clickCreateProcessButton();
                 await processFiltersPage.clickNewProcessDropdown();
-                await startProcessPage.enterProcessName('Comment Process 2');
                 await startProcessPage.selectFromProcessDropdown(browser.params.resources.Files.APP_WITH_PROCESSES.process_se_name);
+                await startProcessPage.enterProcessName('Comment Process 2');
                 await startProcessPage.clickFormStartProcessButton();
                 await processFiltersPage.clickRunningFilterButton();
                 await processFiltersPage.selectFromProcessList('Comment Process 2');
@@ -406,8 +407,8 @@ describe('Start Process Component', () => {
                 await processServiceTabBarPage.clickProcessButton();
                 await processFiltersPage.clickCreateProcessButton();
                 await processFiltersPage.clickNewProcessDropdown();
-                await startProcessPage.enterProcessName('File');
                 await startProcessPage.selectFromProcessDropdown(browser.params.resources.Files.APP_WITH_PROCESSES.process_se_name);
+                await startProcessPage.enterProcessName('File');
                 await startProcessPage.clickFormStartProcessButton();
                 await processFiltersPage.clickRunningFilterButton();
                 await processFiltersPage.selectFromProcessList('File');

lib/process-services-cloud/src/lib/pipes/process-name-cloud.pipe.spec.ts

@@ -0,0 +1,79 @@
+/*!
+ * @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.
+ */
+
+import { async, TestBed } from '@angular/core/testing';
+import { setupTestBed } from 'core';
+import { CoreTestingModule } from 'core/testing/core.testing.module';
+import { TranslateModule } from '@ngx-translate/core';
+import moment from 'moment-es6';
+import { ProcessNameCloudPipe } from './process-name-cloud.pipe';
+import { LocalizedDatePipe } from '@alfresco/adf-core';
+import { ProcessInstanceCloud } from '../process/start-process/models/process-instance-cloud.model';
+
+describe('ProcessNameCloudPipe', () => {
+
+    let processNamePipe: ProcessNameCloudPipe;
+    const defaultName = 'default-name';
+    const datetimeIdentifier = '%{datetime}';
+    const processDefinitionIdentifier = '%{processDefinition}';
+    const mockCurrentDate = 'Wed Oct 23 2019';
+    const mockLocalizedCurrentDate = 'Oct 23, 2019, 12:00:00 AM';
+    const nameWithProcessDefinitionIdentifier = `${defaultName} - ${processDefinitionIdentifier}`;
+    const nameWithDatetimeIdentifier = `${defaultName} - ${datetimeIdentifier}`;
+    const nameWithAllIdentifiers = `${defaultName} ${processDefinitionIdentifier} - ${datetimeIdentifier}`;
+    const fakeProcessInstanceDetails = new ProcessInstanceCloud({ processDefinitionName: 'my-process-definition' });
+
+    setupTestBed({
+        imports: [
+            TranslateModule.forRoot(),
+            CoreTestingModule
+        ]
+    });
+
+    beforeEach(async(() => {
+        const localizedDatePipe = TestBed.get(LocalizedDatePipe);
+        processNamePipe = new ProcessNameCloudPipe(localizedDatePipe);
+    }));
+
+    it('should not modify the name when there is no identifier', () => {
+        const transformResult = processNamePipe.transform(defaultName);
+        expect(transformResult).toEqual(defaultName);
+    });
+
+    it('should add the selected process definition name to the process name', () => {
+        const transformResult = processNamePipe.transform(nameWithProcessDefinitionIdentifier, fakeProcessInstanceDetails);
+        expect(transformResult).toEqual(`${defaultName} - ${fakeProcessInstanceDetails.processDefinitionName}`);
+    });
+
+    it('should add the current datetime to the process name', () => {
+        spyOn(moment, 'now').and.returnValue(mockCurrentDate);
+        const transformResult = processNamePipe.transform(nameWithDatetimeIdentifier);
+        expect(transformResult).toEqual(`${defaultName} - ${mockLocalizedCurrentDate}`);
+    });
+
+    it('should add the current datetime and the selected process definition name when both identifiers are present', () => {
+        spyOn(moment, 'now').and.returnValue(mockCurrentDate);
+        const transformResult = processNamePipe.transform(nameWithAllIdentifiers, fakeProcessInstanceDetails);
+        expect(transformResult).toEqual(`${defaultName} ${fakeProcessInstanceDetails.processDefinitionName} - ${mockLocalizedCurrentDate}`);
+    });
+
+    it('should not modify the process name when processDefinition identifier is present but no process definition is selected', () => {
+        const transformResult = processNamePipe.transform(nameWithProcessDefinitionIdentifier);
+        expect(transformResult).toEqual(`${defaultName} - `);
+    });
+
+});

lib/process-services-cloud/src/lib/pipes/process-name-cloud.pipe.ts

@@ -0,0 +1,50 @@
+/*!
+ * @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.
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+import moment from 'moment-es6';
+import { LocalizedDatePipe } from '@alfresco/adf-core';
+import { ProcessInstanceCloud } from '../process/start-process/models/process-instance-cloud.model';
+
+@Pipe({ name: 'processNameCloud' })
+export class ProcessNameCloudPipe implements PipeTransform {
+    static DATE_TIME_IDENTIFIER_REG_EXP = new RegExp('%{datetime}', 'i');
+    static PROCESS_DEFINITION_IDENTIFIER_REG_EXP = new RegExp('%{processdefinition}', 'i');
+
+    constructor(private localizedDatePipe: LocalizedDatePipe) {
+    }
+
+    transform(processNameFormat: string, processInstance?: ProcessInstanceCloud): string {
+        let processName = processNameFormat;
+        if (processName.match(ProcessNameCloudPipe.DATE_TIME_IDENTIFIER_REG_EXP)) {
+            const presentDateTime = moment.now();
+            processName = processName.replace(
+                ProcessNameCloudPipe.DATE_TIME_IDENTIFIER_REG_EXP,
+                this.localizedDatePipe.transform(presentDateTime, 'medium')
+            );
+        }
+
+        if (processName.match(ProcessNameCloudPipe.PROCESS_DEFINITION_IDENTIFIER_REG_EXP)) {
+            const selectedProcessDefinitionName = processInstance ? processInstance.processDefinitionName : '';
+            processName = processName.replace(
+                ProcessNameCloudPipe.PROCESS_DEFINITION_IDENTIFIER_REG_EXP,
+                selectedProcessDefinitionName
+            );
+        }
+        return processName;
+    }
+}

lib/process-services-cloud/src/lib/pipes/process-services-cloud-pipe.module.ts

@@ -0,0 +1,30 @@
+/*!
+ * @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.
+ */
+
+import { NgModule } from '@angular/core';
+import { ProcessNameCloudPipe } from './process-name-cloud.pipe';
+
+@NgModule({
+    declarations: [
+        ProcessNameCloudPipe
+    ],
+    exports: [
+        ProcessNameCloudPipe
+    ]
+})
+export class ProcessServicesCloudPipeModule {
+}

lib/process-services-cloud/src/lib/process-services-cloud.module.ts

@@ -30,6 +30,7 @@ import {
 } from './services/public-api';
 import { PeopleCloudModule } from './people/people-cloud.module';
 import { CloudFormRenderingService } from './form/components/cloud-form-rendering.service';
+import { ProcessServicesCloudPipeModule } from './pipes/process-services-cloud-pipe.module';
 
 @NgModule({
     imports: [
@@ -40,7 +41,8 @@ import { CloudFormRenderingService } from './form/components/cloud-form-renderin
         GroupCloudModule,
         PeopleCloudModule,
         FormCloudModule,
-        TaskFormModule
+        TaskFormModule,
+        ProcessServicesCloudPipeModule
     ],
     providers: [
         {
@@ -63,7 +65,8 @@ import { CloudFormRenderingService } from './form/components/cloud-form-renderin
         GroupCloudModule,
         FormCloudModule,
         TaskFormModule,
-        PeopleCloudModule
+        PeopleCloudModule,
+        ProcessServicesCloudPipeModule
     ]
 })
 export class ProcessServicesCloudModule { }

lib/process-services-cloud/src/lib/process/process-cloud.module.ts

@@ -22,6 +22,7 @@ import { StartProcessCloudModule } from './start-process/start-process-cloud.mod
 import { CoreModule } from '@alfresco/adf-core';
 import { ProcessHeaderCloudModule } from './process-header/process-header-cloud.module';
 import { ProcessDirectiveModule } from './directives/process-directive.module';
+import { ProcessNameCloudPipe } from '../pipes/process-name-cloud.pipe';
 
 @NgModule({
     imports: [
@@ -38,6 +39,7 @@ import { ProcessDirectiveModule } from './directives/process-directive.module';
         StartProcessCloudModule,
         ProcessHeaderCloudModule,
         ProcessDirectiveModule
-    ]
+    ],
+    providers: [ProcessNameCloudPipe]
 })
 export class ProcessCloudModule { }

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

@@ -30,6 +30,7 @@ import { debounceTime, takeUntil, switchMap, filter, distinctUntilChanged, tap }
 import { ProcessDefinitionCloud } from '../models/process-definition-cloud.model';
 import { Subject, Observable } from 'rxjs';
 import { TaskVariableCloud } from '../../../form/models/task-variable-cloud.model';
+import { ProcessNameCloudPipe } from '../../../pipes/process-name-cloud.pipe';
 
 @Component({
     selector: 'adf-cloud-start-process',
@@ -107,12 +108,13 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     processDefinitionLoaded = false;
 
     constructor(private startProcessCloudService: StartProcessCloudService,
-                private formBuilder: FormBuilder) {
+                private formBuilder: FormBuilder,
+                private processNameCloudPipe: ProcessNameCloudPipe) {
     }
 
     ngOnInit() {
         this.processForm = this.formBuilder.group({
-            processInstanceName: new FormControl(this.name, [Validators.required, Validators.maxLength(this.getMaxNameLength()), Validators.pattern('^[^\\s]+(\\s+[^\\s]+)*$')]),
+            processInstanceName: new FormControl('', [Validators.required, Validators.maxLength(this.getMaxNameLength()), Validators.pattern('^[^\\s]+(\\s+[^\\s]+)*$')]),
             processDefinition: new FormControl(this.processDefinitionName, [Validators.required, this.processDefinitionNameValidator()])
         });
 
@@ -372,9 +374,16 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
         this.formContentClicked.emit(content);
     }
 
-    processDefinitionSelectionChanged(processDefinition) {
+    processDefinitionSelectionChanged(processDefinition: ProcessDefinitionCloud) {
+        if (processDefinition) {
+            const processInstanceDetails = new ProcessInstanceCloud({ processDefinitionName: processDefinition.name });
+            const defaultProcessName = this.processNameCloudPipe.transform(this.name, processInstanceDetails);
+            this.processInstanceName.setValue(defaultProcessName);
+            this.processInstanceName.markAsDirty();
+            this.processInstanceName.markAsTouched();
             this.processDefinitionSelection.emit(processDefinition);
         }
+    }
 
     ngOnDestroy() {
         this.onDestroy$.next(true);

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

@@ -27,6 +27,7 @@ export class ProcessInstanceCloud {
     parentId: string;
     processDefinitionId: string;
     processDefinitionKey: string;
+    processDefinitionName: string;
 
     constructor(obj?: any) {
         this.appName = obj && obj.appName || null;
@@ -40,5 +41,6 @@ export class ProcessInstanceCloud {
         this.parentId = obj && obj.parentId || null;
         this.processDefinitionId = obj && obj.processDefinitionId || null;
         this.processDefinitionKey = obj && obj.processDefinitionKey || null;
+        this.processDefinitionName = obj && obj.processDefinitionName || null;
     }
 }

lib/process-services/src/lib/pipes/process-name.pipe.spec.ts

@@ -0,0 +1,79 @@
+/*!
+ * @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.
+ */
+
+import { async, TestBed } from '@angular/core/testing';
+import { ProcessNamePipe } from './process-name.pipe';
+import { setupTestBed } from 'core';
+import { CoreTestingModule } from 'core/testing/core.testing.module';
+import { TranslateModule } from '@ngx-translate/core';
+import moment from 'moment-es6';
+import { LocalizedDatePipe } from '@alfresco/adf-core';
+import { ProcessInstance } from '../process-list';
+
+describe('ProcessNamePipe', () => {
+
+    let processNamePipe: ProcessNamePipe;
+    const defaultName = 'default-name';
+    const datetimeIdentifier = '%{datetime}';
+    const processDefinitionIdentifier = '%{processDefinition}';
+    const mockCurrentDate = 'Wed Oct 23 2019';
+    const mockLocalizedCurrentDate = 'Oct 23, 2019, 12:00:00 AM';
+    const nameWithProcessDefinitionIdentifier = `${defaultName} - ${processDefinitionIdentifier}`;
+    const nameWithDatetimeIdentifier = `${defaultName} - ${datetimeIdentifier}`;
+    const nameWithAllIdentifiers = `${defaultName} ${processDefinitionIdentifier} - ${datetimeIdentifier}`;
+    const fakeProcessInstanceDetails = new ProcessInstance({ processDefinitionName: 'fake-process-def-name'});
+
+    setupTestBed({
+        imports: [
+            TranslateModule.forRoot(),
+            CoreTestingModule
+        ]
+    });
+
+    beforeEach(async(() => {
+        const localizedDatePipe = TestBed.get(LocalizedDatePipe);
+        processNamePipe = new ProcessNamePipe(localizedDatePipe);
+    }));
+
+    it('should not modify the name when there is no identifier', () => {
+        const transformResult = processNamePipe.transform(defaultName);
+        expect(transformResult).toEqual(defaultName);
+    });
+
+    it('should add the selected process definition name to the process name', () => {
+        const transformResult = processNamePipe.transform(nameWithProcessDefinitionIdentifier, fakeProcessInstanceDetails);
+        expect(transformResult).toEqual(`${defaultName} - ${fakeProcessInstanceDetails.processDefinitionName}`);
+    });
+
+    it('should add the current datetime to the process name', () => {
+        spyOn(moment, 'now').and.returnValue(mockCurrentDate);
+        const transformResult = processNamePipe.transform(nameWithDatetimeIdentifier);
+        expect(transformResult).toEqual(`${defaultName} - ${mockLocalizedCurrentDate}`);
+    });
+
+    it('should add the current datetime and the selected process definition name when both identifiers are present', () => {
+        spyOn(moment, 'now').and.returnValue(mockCurrentDate);
+        const transformResult = processNamePipe.transform(nameWithAllIdentifiers, fakeProcessInstanceDetails);
+        expect(transformResult).toEqual(`${defaultName} ${fakeProcessInstanceDetails.processDefinitionName} - ${mockLocalizedCurrentDate}`);
+    });
+
+    it('should not modify the process name when processDefinition identifier is present but no process definition is selected', () => {
+        const transformResult = processNamePipe.transform(nameWithProcessDefinitionIdentifier);
+        expect(transformResult).toEqual(`${defaultName} - `);
+    });
+
+});

lib/process-services/src/lib/pipes/process-name.pipe.ts

@@ -0,0 +1,50 @@
+/*!
+ * @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.
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+import moment from 'moment-es6';
+import { LocalizedDatePipe } from '@alfresco/adf-core';
+import { ProcessInstance } from '../process-list';
+
+@Pipe({ name: 'processName' })
+export class ProcessNamePipe implements PipeTransform {
+    static DATE_TIME_IDENTIFIER_REG_EXP = new RegExp('%{datetime}', 'i');
+    static PROCESS_DEFINITION_IDENTIFIER_REG_EXP = new RegExp('%{processdefinition}', 'i');
+
+    constructor(private localizedDatePipe: LocalizedDatePipe) {
+    }
+
+    transform(processNameFormat: string, processInstance?: ProcessInstance): string {
+        let processName = processNameFormat;
+        if (processName.match(ProcessNamePipe.DATE_TIME_IDENTIFIER_REG_EXP)) {
+            const presentDateTime = moment.now();
+            processName = processName.replace(
+                ProcessNamePipe.DATE_TIME_IDENTIFIER_REG_EXP,
+                this.localizedDatePipe.transform(presentDateTime, 'medium')
+            );
+        }
+
+        if (processName.match(ProcessNamePipe.PROCESS_DEFINITION_IDENTIFIER_REG_EXP)) {
+            const selectedProcessDefinitionName = processInstance ? processInstance.processDefinitionName : '';
+            processName = processName.replace(
+                ProcessNamePipe.PROCESS_DEFINITION_IDENTIFIER_REG_EXP,
+                selectedProcessDefinitionName
+            );
+        }
+        return processName;
+    }
+}

lib/process-services/src/lib/pipes/process-services-pipe.module.ts

@@ -0,0 +1,31 @@
+/*!
+ * @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.
+ */
+
+import { NgModule } from '@angular/core';
+
+import { ProcessNamePipe } from './process-name.pipe';
+
+@NgModule({
+    declarations: [
+        ProcessNamePipe
+    ],
+    exports: [
+        ProcessNamePipe
+    ]
+})
+export class ProcessServicesPipeModule {
+}

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

@@ -207,6 +207,12 @@ describe('StartFormComponent', () => {
                     expect(cancelSpy).toHaveBeenCalled();
                 });
             }));
+
+            it('should return true if startFrom defined', async () => {
+                component.name = 'my:process1';
+                await fixture.whenStable();
+                expect(component.hasStartForm()).toBe(true);
+            });
         });
 
         describe('CS content connection', () => {
@@ -438,7 +444,7 @@ describe('StartFormComponent', () => {
         });
 
         it('should call service to start process if required fields provided', async(() => {
-            component.selectedProcessDef = testProcessDef;
+            component.processDefinitionSelectionChanged(testProcessDef);
             component.startProcess();
             fixture.whenStable().then(() => {
                 expect(startProcessSpy).toHaveBeenCalled();
@@ -454,7 +460,7 @@ describe('StartFormComponent', () => {
         }));
 
         it('should call service to start process with the correct parameters', async(() => {
-            component.selectedProcessDef = testProcessDef;
+            component.processDefinitionSelectionChanged(testProcessDef);
             component.startProcess();
             fixture.whenStable().then(() => {
                 expect(startProcessSpy).toHaveBeenCalledWith('my:process1', 'My new process', undefined, undefined, undefined);
@@ -471,7 +477,7 @@ describe('StartFormComponent', () => {
             inputProcessVariable.push(variable);
 
             component.variables = inputProcessVariable;
-            component.selectedProcessDef = testProcessDef;
+            component.processDefinitionSelectionChanged(testProcessDef);
             component.startProcess();
             fixture.whenStable().then(() => {
                 expect(startProcessSpy).toHaveBeenCalledWith('my:process1', 'My new process', undefined, undefined, inputProcessVariable);
@@ -480,7 +486,7 @@ describe('StartFormComponent', () => {
 
         it('should output start event when process started successfully', async(() => {
             const emitSpy = spyOn(component.start, 'emit');
-            component.selectedProcessDef = testProcessDef;
+            component.processDefinitionSelectionChanged(testProcessDef);
             component.startProcess();
             fixture.whenStable().then(() => {
                 expect(emitSpy).toHaveBeenCalledWith(newProcess);
@@ -493,7 +499,7 @@ describe('StartFormComponent', () => {
                 done();
             });
 
-            component.selectedProcessDef = testProcessDef;
+            component.processDefinitionSelectionChanged(testProcessDef);
             component.name = 'my:Process';
             component.startProcess();
             fixture.detectChanges();
@@ -535,7 +541,7 @@ describe('StartFormComponent', () => {
 
         it('should able to start the process when the required fields are filled up', (done) => {
             component.name = 'my:process1';
-            component.selectedProcessDef = testProcessDef;
+            component.processDefinitionSelectionChanged(testProcessDef);
 
             const disposableStart = component.start.subscribe(() => {
                 disposableStart.unsubscribe();
@@ -544,16 +550,6 @@ describe('StartFormComponent', () => {
 
             component.startProcess();
         });
-
-        it('should return true if startFrom defined', async(() => {
-            component.selectedProcessDef = testProcessDef;
-            component.name = 'my:process1';
-            component.selectedProcessDef.hasStartForm = true;
-            component.hasStartForm();
-            fixture.whenStable().then(() => {
-                expect(component.hasStartForm()).toBe(true);
-            });
-        }));
    });
 
     describe('Select applications', () => {

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

@@ -37,6 +37,7 @@ import { MatAutocompleteTrigger } from '@angular/material';
 import { StartFormComponent } from '../../form';
 import { MinimalNode, RelatedContentRepresentation } from '@alfresco/js-api';
 import { AppDefinitionRepresentationModel } from '../../task-list';
+import { ProcessNamePipe } from '../../pipes/process-name.pipe';
 
 @Component({
     selector: 'adf-start-process',
@@ -130,19 +131,16 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
     constructor(private activitiProcess: ProcessService,
                 private activitiContentService: ActivitiContentService,
                 private appsProcessService: AppsProcessService,
-                private appConfig: AppConfigService) {
+                private appConfig: AppConfigService,
+                private processNamePipe: ProcessNamePipe) {
         }
 
     ngOnInit() {
-        this.processNameInput = new FormControl(this.name, [Validators.required, Validators.maxLength(this.maxProcessNameLength), Validators.pattern('^[^\\s]+(\\s+[^\\s]+)*$')]);
+        this.processNameInput = new FormControl('', [Validators.required, Validators.maxLength(this.maxProcessNameLength), Validators.pattern('^[^\\s]+(\\s+[^\\s]+)*$')]);
         this.processDefinitionInput = new FormControl();
 
         this.load();
 
-        this.processNameInput.valueChanges
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(name => this.name = name);
-
         this.filteredProcessesDefinitions$ = this.processDefinitionInput.valueChanges
             .pipe(
                 map((value) => this._filter(value)),
@@ -244,9 +242,8 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
         ).subscribe(
             (filteredProcessDefinitions) => {
                 this.processDefinitions = filteredProcessDefinitions.processDefinitionRepresentations;
-                this.selectedProcessDef = filteredProcessDefinitions.currentProcessDef;
+                this.processDefinitionSelectionChanged(filteredProcessDefinitions.currentProcessDef);
                 this.processDefinitionInput.setValue(this.selectedProcessDef ? this.selectedProcessDef.name : '');
-                this.processDefinitionSelection.emit(this.selectedProcessDef);
                 this.isProcessDefinitionsLoading = false;
             },
             (error) => {
@@ -262,9 +259,8 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
             });
 
             if (filteredProcessDef) {
-                this.selectedProcessDef = filteredProcessDef;
+                this.processDefinitionSelectionChanged(filteredProcessDef);
                 this.processDefinitionInput.setValue(this.selectedProcessDef ? this.selectedProcessDef.name : '');
-                this.processDefinitionSelection.emit(this.selectedProcessDef);
             }
         }
     }
@@ -373,9 +369,9 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
     }
 
     startProcess(outcome?: string) {
-        if (this.selectedProcessDef && this.selectedProcessDef.id && this.name) {
+        if (this.selectedProcessDef && this.selectedProcessDef.id && this.nameController.value) {
             const formValues = this.startForm ? this.startForm.form.values : undefined;
-            this.activitiProcess.startProcess(this.selectedProcessDef.id, this.name, outcome, formValues, this.variables).subscribe(
+            this.activitiProcess.startProcess(this.selectedProcessDef.id, this.nameController.value, outcome, formValues, this.variables).subscribe(
                 (res) => {
                     this.name = '';
                     this.start.emit(res);
@@ -470,9 +466,18 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
         }
     }
 
-    processDefinitionSelectionChanged(processDefinition) {
+    processDefinitionSelectionChanged(processDefinition: ProcessDefinitionRepresentation) {
+        if (processDefinition) {
+            const processInstanceDetails = new ProcessInstance({ processDefinitionName: processDefinition.name });
+            const processName = this.processNamePipe.transform(this.name, processInstanceDetails);
+            this.processNameInput.setValue(processName);
+            this.processNameInput.markAsDirty();
+            this.processNameInput.markAsTouched();
             this.selectedProcessDef = processDefinition;
             this.processDefinitionSelection.emit(this.selectedProcessDef);
+        } else {
+            this.nameController.reset();
+        }
     }
 
     isLoading(): boolean {

lib/process-services/src/lib/process-list/process-list.module.ts

@@ -25,7 +25,6 @@ import { ProcessCommentsModule } from '../process-comments/process-comments.modu
 import { TaskListModule } from '../task-list/task-list.module';
 import { PeopleModule } from '../people/people.module';
 import { ContentWidgetModule } from '../content-widget/content-widget.module';
-
 import { ProcessAuditDirective } from './components/process-audit.directive';
 import { ProcessFiltersComponent } from './components/process-filters.component';
 import { ProcessInstanceDetailsComponent } from './components/process-instance-details.component';
@@ -34,6 +33,7 @@ import { ProcessInstanceTasksComponent } from './components/process-instance-tas
 import { ProcessInstanceListComponent } from './components/process-list.component';
 import { StartProcessInstanceComponent } from './components/start-process.component';
 import { FormModule } from '../form/form.module';
+import { ProcessNamePipe } from '../pipes/process-name.pipe';
 
 @NgModule({
     imports: [
@@ -66,6 +66,9 @@ import { FormModule } from '../form/form.module';
         ProcessInstanceHeaderComponent,
         ProcessInstanceTasksComponent,
         StartProcessInstanceComponent
+    ],
+    providers: [
+        ProcessNamePipe
     ]
 })
 export class ProcessListModule {

lib/process-services/src/lib/process.module.ts

@@ -30,6 +30,7 @@ import { AttachmentModule } from './attachment/attachment.module';
 import { PeopleModule } from './people/people.module';
 import { FormModule } from './form/form.module';
 import { ProcessFormRenderingService } from './form/process-form-rendering.service';
+import { ProcessServicesPipeModule } from './pipes/process-services-pipe.module';
 
 @NgModule({
     imports: [
@@ -44,7 +45,8 @@ import { ProcessFormRenderingService } from './form/process-form-rendering.servi
         AppsListModule,
         AttachmentModule,
         PeopleModule,
-        FormModule
+        FormModule,
+        ProcessServicesPipeModule
     ],
     providers: [
         {
@@ -66,7 +68,8 @@ import { ProcessFormRenderingService } from './form/process-form-rendering.servi
         AppsListModule,
         AttachmentModule,
         PeopleModule,
-        FormModule
+        FormModule,
+        ProcessServicesPipeModule
     ]
 })
 export class ProcessModule {

lib/testing/src/lib/process-services/pages/start-process.page.ts

@@ -157,8 +157,8 @@ export class StartProcessPage {
     }
 
     async startProcess(name: string, processName: string) {
-        await this.enterProcessName(name);
         await this.selectFromProcessDropdown(processName);
+        await this.enterProcessName(name);
         await this.clickStartProcessButton();
     }