[AAE-1022] Fix components to work on Community environments (#5296)

* [AAE-1022] Fix components to work on Community environments

* Remove appName input

demo-shell/src/app/app.module.ts

@@ -84,10 +84,7 @@ import { environment } from '../environments/environment';
 import { AppCloudSharedModule } from './components/cloud/shared/cloud.shared.module';
 import { DemoErrorComponent } from './components/error/demo-error.component';
 import {
-    ProcessServicesCloudModule,
+    ProcessServicesCloudModule
-    UserPreferenceCloudService,
-    PROCESS_FILTERS_SERVICE_TOKEN,
-    TASK_FILTERS_SERVICE_TOKEN
 } from '@alfresco/adf-process-services-cloud';
 
 import { registerLocaleData } from '@angular/common';
@@ -199,8 +196,6 @@ registerLocaleData(localeSv);
             provide: HTTP_INTERCEPTORS, useClass:
             AuthBearerInterceptor, multi: true
         },
-        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService },
-        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService },
         { provide: AppConfigService, useClass: DebugAppConfigService }, // not use this service in production
         {
             provide: TRANSLATION_PROVIDER,

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

@@ -33,8 +33,6 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
 })
 export class CommunityCloudComponent  {
 
-    appName: string = '';
-
     constructor(
         private router: Router,
         private route: ActivatedRoute,

demo-shell/src/app/components/cloud/community/community-filters.component.html

@@ -7,7 +7,6 @@
       </mat-expansion-panel-header>
       <adf-cloud-task-filters
           *ngIf="expandTaskFilter"
-          [appName]="appName"
           [showIcons]="true"
           [filterParam]="currentTaskFilter$ | async"
           (filterClick)="onTaskFilterSelected($event)">
@@ -22,7 +21,6 @@
       </mat-expansion-panel-header>
       <adf-cloud-process-filters
           *ngIf="expandProcessFilter"
-          [appName]="appName"
           [showIcons]="true"
           [filterParam]="currentProcessFilter$ | async"
           (filterClick)="onProcessFilterSelected($event)">

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, Input, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Router, ActivatedRoute } from '@angular/router';
 import { CloudLayoutService } from '../services/cloud-layout.service';
@@ -26,9 +26,6 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
 })
 export class CommunityCloudFiltersDemoComponent implements OnInit {
 
-    @Input()
-    appName: string = 'community';
-
     currentTaskFilter$: Observable<any>;
     currentProcessFilter$: Observable<any>;
 

demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html

@@ -3,14 +3,13 @@
     <mat-icon>arrow_back</mat-icon> Go Back
 </button>
 
-<h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
+<h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }}</h4>
 
 <div class="app-process-cloud-container">
 
     <adf-cloud-task-list
         fxFlex
         class="app-cloud-layout-overflow"
-        [appName]="''"
         [processInstanceId]="processInstanceId"
         (rowClick)="onRowClick($event)"
         #taskCloud>
@@ -18,7 +17,6 @@
 
     <adf-cloud-process-header
         class="app-process-cloud-header"
-        [appName]="''"
         [processInstanceId]="processInstanceId">
     </adf-cloud-process-header>
 </div>

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

@@ -25,16 +25,11 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class CommunityProcessDetailsCloudDemoComponent {
 
     processInstanceId: string;
-    appName: string;
 
     constructor(private route: ActivatedRoute, private router: Router) {
         this.route.params.subscribe((params) => {
             this.processInstanceId = params.processInstanceId;
         });
-
-        this.route.parent.params.subscribe((params) => {
-            this.appName = params.appName;
-        });
     }
 
     onGoBack() {

demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html

@@ -1,7 +1,6 @@
 <div fxLayout="column" fxFill fxLayoutGap="2px">
     <adf-cloud-edit-process-filter
         [id]="filterId"
-        [appName]="'community'"
         [filterProperties]="processFilterProperties.filterProperties"
         [sortProperties]="processFilterProperties.sortProperties"
         [actions]="processFilterProperties.actions"
@@ -11,7 +10,6 @@
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-process-list #processCloud
             fxFlex
-            [appName]="''"
             class="app-cloud-layout-overflow"
             [initiator]="editedFilter.initiator"
             [processDefinitionId]="editedFilter.processDefinitionId"

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

@@ -44,9 +44,7 @@ export class CommunityProcessesCloudDemoComponent implements OnInit, OnDestroy {
     @ViewChild('processFiltersCloud')
     processFiltersCloud: ProcessFiltersCloudComponent;
 
-    appName: string = '';
     isFilterLoaded: boolean;
-
     filterId: string = '';
     sortArray: any = [];
     selectedRow: any;
@@ -79,10 +77,6 @@ export class CommunityProcessesCloudDemoComponent implements OnInit, OnDestroy {
     ngOnInit() {
         this.isFilterLoaded = false;
 
-        this.route.parent.params.subscribe((params) => {
-            this.appName = params.appName;
-        });
-
         this.route.queryParams.subscribe((params) => {
             if (Object.keys(params).length > 0) {
                 this.isFilterLoaded = true;

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

@@ -1,6 +1,5 @@
 <adf-cloud-start-process
     [name]="processName"
-    [appName]="''"
     (error)="openSnackMessage($event)"
     (success)="onStartProcessSuccess()"
     (cancel)="onCancelStartProcess()">

demo-shell/src/app/components/cloud/community/community-start-task-cloud.component.html

@@ -1,5 +1,4 @@
 <adf-cloud-start-task
-    [appName]="''"
     (error)="openSnackMessage($event)"
     (success)="onStartTaskSuccess()"
     (cancel)="onCancelStartTask()">

demo-shell/src/app/components/cloud/community/community-task-cloud.component.html

@@ -1,7 +1,6 @@
 <div fxLayout="column" fxFill fxLayoutGap="2px">
     <adf-cloud-edit-task-filter
         [id]="filterId"
-        [appName]="'community'"
         [filterProperties]="taskFilterProperties.filterProperties"
         [sortProperties]="taskFilterProperties.sortProperties"
         [actions]="taskFilterProperties.actions"
@@ -11,7 +10,6 @@
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-task-list #taskCloud
             fxFlex
-            [appName]="''"
             class="app-cloud-layout-overflow"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processInstanceId]="editedFilter.processInstanceId"

demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.html

@@ -1,10 +1,9 @@
-<h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}</h4>
+<h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }}</h4>
 
 <div fxLayout="column" fxFill fxLayoutGap="2px">
     <div fxLayout="row" fxFill>
         <div fxLayout="column" fxFlex="80%">
             <adf-cloud-task-form
-                [appName]="''"
                 [taskId]="taskId"
                 (cancelClick)="goBack()"
                 (taskClaimed)="onClaimTask()"
@@ -14,7 +13,6 @@
             </adf-cloud-task-form>
         </div>
         <adf-cloud-task-header fxFlex
-            [appName]="''"
             [taskId]="taskId">
         </adf-cloud-task-header>
     </div>

demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.ts

@@ -26,7 +26,6 @@ import { NotificationService } from '@alfresco/adf-core';
 export class CommunityTaskDetailsCloudDemoComponent {
 
     taskId: string;
-    appName: string;
 
     constructor(
         private route: ActivatedRoute,
@@ -36,13 +35,10 @@ export class CommunityTaskDetailsCloudDemoComponent {
         this.route.params.subscribe((params) => {
             this.taskId = params.taskId;
         });
-        this.route.parent.params.subscribe((params) => {
-            this.appName = params.appName;
-        });
     }
 
     isTaskValid(): boolean {
-        return this.appName !== undefined && this.taskId !== undefined;
+        return this.taskId !== undefined;
     }
 
     goBack() {

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

@@ -51,9 +51,9 @@ import { TaskDetailsCloudModel } from '../../task/start-task/models/task-details
 })
 export class FormCloudComponent extends FormBaseComponent implements OnChanges, OnDestroy {
 
-    /** App id to fetch corresponding form and values. */
+    /** App name to fetch corresponding form and values. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** The application version to use when fetching data */
     @Input()

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

@@ -31,7 +31,7 @@ export class FormDefinitionSelectorCloudComponent implements OnInit {
 
     /** Name of the application. If specified, this shows the users who have access to the app. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** Emitted when a form is selected. */
     @Output()

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts

@@ -51,7 +51,7 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
 
     /** The name of the application. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** Id of the process instance filter. */
     @Input()

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, OnInit } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { ProcessFilterCloudService } from '../services/process-filter-cloud.service';
 import { ProcessFilterCloudModel } from '../models/process-filter-cloud.model';
@@ -28,11 +28,11 @@ import { takeUntil } from 'rxjs/operators';
     templateUrl: './process-filters-cloud.component.html',
     styleUrls: ['process-filters-cloud.component.scss']
 })
-export class ProcessFiltersCloudComponent implements OnChanges, OnDestroy {
+export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestroy {
 
     /** (required) The application name */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** (optional) The filter to be selected by default */
     @Input()
@@ -66,6 +66,12 @@ export class ProcessFiltersCloudComponent implements OnChanges, OnDestroy {
         private processFilterCloudService: ProcessFilterCloudService,
         private translationService: TranslationService ) { }
 
+    ngOnInit() {
+        if (this.appName === '') {
+            this.getFilters(this.appName);
+        }
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         const appName = changes['appName'];
         const filter = changes['filterParam'];

lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts

@@ -41,7 +41,7 @@ export class ProcessFilterCloudModel {
             this.key = obj.key || null;
             this.icon = obj.icon || null;
             this.index = obj.index || null;
-            this.appName = obj.appName || null;
+            this.appName = obj.appName || obj.appName === '' ? obj.appName : null;
             this.processInstanceId = obj.processInstanceId || null;
             this.processName = obj.processName || null;
             this.initiator = obj.initiator || null;

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

@@ -30,7 +30,7 @@ export class ProcessHeaderCloudComponent implements OnChanges {
 
     /** (Required) The name of the application. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** (Required) The id of the process instance. */
     @Input()
@@ -50,7 +50,7 @@ export class ProcessHeaderCloudComponent implements OnChanges {
     }
 
     ngOnChanges() {
-        if (this.appName && this.processInstanceId) {
+        if ((this.appName || this.appName === '') && this.processInstanceId) {
             this.loadProcessInstanceDetails(this.appName, this.processInstanceId);
         }
     }

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

@@ -41,7 +41,7 @@ export class ProcessHeaderCloudService extends BaseCloudService {
      * @returns Process instance details
      */
     getProcessInstanceById(appName: string, processInstanceId: string): Observable<ProcessInstanceCloud> {
-        if (appName && processInstanceId) {
+        if ((appName || appName === '') && processInstanceId) {
             const url = `${this.getBasePath(appName)}/query/v1/process-instances/${processInstanceId}`;
 
             return this.get(url).pipe(

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

@@ -44,7 +44,7 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
 
     /** The name of the application. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** Name of the initiator of the process. */
     @Input()
@@ -185,7 +185,7 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
 
     reload() {
         this.requestNode = this.createRequestNode();
-        if (this.requestNode.appName) {
+        if (this.requestNode.appName || this.requestNode.appName === '') {
             this.load(this.requestNode);
         } else {
             this.rows = [];

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

@@ -37,7 +37,7 @@ export class ProcessListCloudService extends BaseCloudService {
      * @returns Process information
      */
     getProcessByRequest(requestNode: ProcessQueryCloudRequestModel): Observable<any> {
-        if (requestNode.appName) {
+        if (requestNode.appName || requestNode.appName === '') {
             const queryUrl = `${this.getBasePath(requestNode.appName)}/query/v1/process-instances`;
             const queryParams = this.buildQueryParams(requestNode);
             const sortingParams = this.buildSortingParam(requestNode.sorting);

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

@@ -46,7 +46,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
 
     /** (required) Name of the app. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** Maximum length of the process name. */
     @Input()
@@ -120,6 +120,9 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     ngOnChanges(changes: SimpleChanges) {
         if (changes['appName'] && changes['appName'].currentValue !== changes['appName'].previousValue) {
             this.appName = changes['appName'].currentValue;
+        }
+
+        if (this.appName || this.appName === '') {
             this.loadProcessDefinitions();
         }
     }

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

@@ -42,7 +42,7 @@ export class StartProcessCloudService extends BaseCloudService {
      * @returns Array of process definitions
      */
     getProcessDefinitions(appName: string): Observable<ProcessDefinitionCloud[]> {
-        if (appName) {
+        if (appName || appName === '') {
             const url = `${this.getBasePath(appName)}/rb/v1/process-definitions`;
 
             return this.get(url).pipe(

lib/process-services-cloud/src/lib/task/directives/claim-task.directive.ts

@@ -30,7 +30,7 @@ export class ClaimTaskDirective implements OnInit {
 
     /** (Required) The name of the application. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** Emitted when the task is completed. */
     @Output()
@@ -68,7 +68,7 @@ export class ClaimTaskDirective implements OnInit {
     }
 
     isAppValid(): boolean {
-        return (this.appName && this.appName.length > 0);
+        return !!this.appName || this.appName === '';
     }
 
     @HostListener('click')

lib/process-services-cloud/src/lib/task/directives/complete-task.directive.ts

@@ -29,7 +29,7 @@ export class CompleteTaskDirective implements OnInit {
 
     /** (Required) The name of the application. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** Emitted when the task is completed. */
     @Output()
@@ -65,7 +65,7 @@ export class CompleteTaskDirective implements OnInit {
     }
 
     isAppValid(): boolean {
-        return (this.appName && this.appName.length > 0);
+        return !!this.appName || this.appName === '';
     }
 
     @HostListener('click')

lib/process-services-cloud/src/lib/task/directives/unclaim-task.directive.ts

@@ -29,7 +29,7 @@ export class UnClaimTaskDirective implements OnInit {
 
     /** (Required) The name of the application. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** Emitted when the task is completed. */
     @Output()
@@ -66,7 +66,7 @@ export class UnClaimTaskDirective implements OnInit {
     }
 
     isAppValid(): boolean {
-        return (this.appName && this.appName.length > 0);
+        return !!this.appName || this.appName === '';
     }
 
     @HostListener('click')

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

@@ -47,7 +47,7 @@ export class TaskCloudService extends BaseCloudService {
      * @returns Details of the task that was completed
      */
     completeTask(appName: string, taskId: string): Observable<TaskDetailsCloudModel> {
-        if (appName && taskId) {
+        if ((appName || appName === '') && taskId) {
             const url = `${this.getBasePath(appName)}/rb/v1/tasks/${taskId}/complete`;
             const payload = { 'payloadType': 'CompleteTaskPayload' };
 
@@ -103,7 +103,7 @@ export class TaskCloudService extends BaseCloudService {
      * @returns Details of the claimed task
      */
     claimTask(appName: string, taskId: string, assignee: string): Observable<TaskDetailsCloudModel> {
-        if (appName && taskId) {
+        if ((appName || appName === '') && taskId) {
             const queryUrl = `${this.getBasePath(appName)}/rb/v1/tasks/${taskId}/claim?assignee=${assignee}`;
 
             return this.post(queryUrl).pipe(
@@ -125,7 +125,7 @@ export class TaskCloudService extends BaseCloudService {
      * @returns Details of the task that was unclaimed
      */
     unclaimTask(appName: string, taskId: string): Observable<TaskDetailsCloudModel> {
-        if (appName && taskId) {
+        if ((appName || appName === '') && taskId) {
             const queryUrl = `${this.getBasePath(appName)}/rb/v1/tasks/${taskId}/release`;
 
             return this.post(queryUrl).pipe(
@@ -147,7 +147,7 @@ export class TaskCloudService extends BaseCloudService {
      * @returns Task details
      */
     getTaskById(appName: string, taskId: string): Observable<TaskDetailsCloudModel> {
-        if (appName && taskId) {
+        if ((appName || appName === '') && taskId) {
             const queryUrl = `${this.getBasePath(appName)}/query/v1/tasks/${taskId}`;
 
             return this.get(queryUrl).pipe(
@@ -182,7 +182,7 @@ export class TaskCloudService extends BaseCloudService {
      * @returns Updated task details
      */
     updateTask(appName: string, taskId: string, payload: any): Observable<TaskDetailsCloudModel> {
-        if (appName && taskId) {
+        if ((appName || appName === '') && taskId) {
             payload.payloadType = 'UpdateTaskPayload';
             const queryUrl = `${this.getBasePath(appName)}/rb/v1/tasks/${taskId}`;
 
@@ -202,7 +202,7 @@ export class TaskCloudService extends BaseCloudService {
      * @returns Candidate users
      */
     getCandidateUsers(appName: string, taskId: string): Observable<string[]> {
-        if (appName && taskId) {
+        if ((appName || appName === '') && taskId) {
             const queryUrl = `${this.getBasePath(appName)}/query/v1/tasks/${taskId}/candidate-users`;
             return this.get<string[]>(queryUrl);
         } else {
@@ -218,7 +218,7 @@ export class TaskCloudService extends BaseCloudService {
      * @returns Candidate groups
      */
     getCandidateGroups(appName: string, taskId: string): Observable<string[]> {
-        if (appName && taskId) {
+        if ((appName || appName === '') && taskId) {
             const queryUrl = `${this.getBasePath(appName)}/query/v1/tasks/${taskId}/candidate-groups`;
             return this.get<string[]>(queryUrl);
         } else {

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

@@ -79,7 +79,8 @@
                                  (selectGroup)="onCandidateGroupSelect($event)"
                                  (removeGroup)="onCandidateGroupRemove($event)">
                 </adf-cloud-group>
-                <adf-cloud-form-definition-selector fxFlex
+                <adf-cloud-form-definition-selector *ngIf="appName"
+                                                    fxFlex
                                                     [appName]="appName"
                                                     (selectForm)="onFormSelect($event)">
                 </adf-cloud-form-definition-selector>

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

@@ -52,7 +52,7 @@ export class StartTaskCloudComponent implements OnInit, OnDestroy {
 
     /** (required) Name of the app. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** Maximum length of the task name. */
     @Input()

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.ts

@@ -52,7 +52,7 @@ export class EditTaskFilterCloudComponent implements OnInit, OnChanges, OnDestro
 
     /** (required) Name of the app. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** (required) ID of the task filter. */
     @Input()

lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, OnInit } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
 import { TaskFilterCloudModel, FilterParamsModel } from '../models/filter-cloud.model';
@@ -27,10 +27,10 @@ import { takeUntil } from 'rxjs/operators';
     templateUrl: './task-filters-cloud.component.html',
     styleUrls: ['task-filters-cloud.component.scss']
 })
-export class TaskFiltersCloudComponent implements OnChanges, OnDestroy {
+export class TaskFiltersCloudComponent implements OnInit, OnChanges, OnDestroy {
     /** Display filters available to the current user for the application with the specified name. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /**
      * Parameters to use for the task filter cloud. If there is no match then the default filter
@@ -66,6 +66,10 @@ export class TaskFiltersCloudComponent implements OnChanges, OnDestroy {
     constructor(private taskFilterCloudService: TaskFilterCloudService, private translationService: TranslationService) {
     }
 
+    ngOnInit() {
+        this.getFilters(this.appName);
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         const appName = changes['appName'];
         const filter = changes['filterParam'];

lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts

@@ -46,7 +46,7 @@ export class TaskFilterCloudModel  {
             this.key = obj.key || null;
             this.icon = obj.icon || null;
             this.index = obj.index || null;
-            this.appName = obj.appName || null;
+            this.appName = obj.appName || obj.appName === '' ? obj.appName : null;
             this.status = obj.status || null;
             this.sort = obj.sort || null;
             this.assignee = obj.assignee || null;

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

@@ -17,7 +17,7 @@
 
 import {
     Component, EventEmitter, Input, OnChanges,
-    Output, SimpleChanges
+    Output, SimpleChanges, OnInit
 } from '@angular/core';
 import { TaskDetailsCloudModel } from '../../start-task/models/task-details-cloud.model';
 import { TaskCloudService } from '../../services/task-cloud.service';
@@ -31,11 +31,11 @@ import { DateCloudWidgetComponent } from '../../../form/components/widgets/date/
     templateUrl: './task-form-cloud.component.html',
     styleUrls: ['./task-form-cloud.component.scss']
 })
-export class TaskFormCloudComponent implements OnChanges {
+export class TaskFormCloudComponent implements OnInit, OnChanges {
 
     /** App id to fetch corresponding form and values. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** Task id to fetch corresponding form and values. */
     @Input()
@@ -108,9 +108,15 @@ export class TaskFormCloudComponent implements OnChanges {
         this.formRenderingService.setComponentTypeResolver('date', () => DateCloudWidgetComponent, true);
     }
 
+    ngOnInit() {
+        if (this.appName === '' && this.taskId) {
+            this.loadTask();
+        }
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         const appName = changes['appName'];
-        if (appName && (appName.currentValue || appName.currentValue === '') && this.taskId) {
+        if (appName && (appName.currentValue !== appName.previousValue) && this.taskId) {
             this.loadTask();
             return;
         }

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts

@@ -45,7 +45,7 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
 
     /** (Required) The name of the application. */
     @Input()
-    appName: string;
+    appName: string = '';
 
     /** (Required) The id of the task. */
     @Input()
@@ -103,7 +103,7 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
 
     ngOnChanges() {
         this.taskDetails = {};
-        if (this.appName && this.taskId) {
+        if ((this.appName || this.appName === '') && this.taskId) {
             this.loadTaskDetailsById(this.appName, this.taskId);
         } else {
             this.error.emit('App Name and Task Id are mandatory');
@@ -301,7 +301,7 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
     }
 
     isTaskValid(): boolean {
-        return (this.appName) && !!this.taskId;
+        return (this.appName || this.appName === '') && !!this.taskId;
     }
 
     isTaskAssigned(): boolean {

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts

@@ -233,7 +233,7 @@ export class TaskListCloudComponent extends DataTableSchema implements OnChanges
 
     reload() {
         this.requestNode = this.createRequestNode();
-        if (this.requestNode.appName) {
+        if (this.requestNode.appName || this.requestNode.appName === '') {
             this.load(this.requestNode);
         } else {
             this.rows = [];

lib/process-services-cloud/src/lib/task/task-list/services/task-list-cloud.service.ts

@@ -38,7 +38,7 @@ export class TaskListCloudService extends BaseCloudService {
      * @returns Task information
      */
     getTaskByRequest(requestNode: TaskQueryCloudRequestModel): Observable<any> {
-        if (requestNode.appName) {
+        if (requestNode.appName || requestNode.appName === '') {
             const queryUrl = `${this.getBasePath(requestNode.appName)}/query/v1/tasks`;
             const queryParams = this.buildQueryParams(requestNode);
             const sortingParams = this.buildSortingParam(requestNode.sorting);