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

* [AAE-1022] Fix components to work on Community environments * Remove appName input
2025-07-24 17:32:15 +00:00 · 2019-12-18 17:33:50 +00:00
parent 0897d372a6
commit dead0087f4
37 changed files with 70 additions and 87 deletions
--- a/demo-shell/src/app/app.module.ts
+++ b/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,
-    UserPreferenceCloudService,
-    PROCESS_FILTERS_SERVICE_TOKEN,
-    TASK_FILTERS_SERVICE_TOKEN
+    ProcessServicesCloudModule
 } 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,
--- a/demo-shell/src/app/components/cloud/community/community-cloud.component.ts
+++ b/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,
--- a/demo-shell/src/app/components/cloud/community/community-filters.component.html
+++ b/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)">
--- a/demo-shell/src/app/components/cloud/community/community-filters.component.ts
+++ b/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>;

--- a/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html
+++ b/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>
--- a/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.ts
+++ b/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() {
--- a/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html
+++ b/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"
--- a/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.ts
+++ b/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;
--- a/demo-shell/src/app/components/cloud/community/community-start-process-cloud.component.html
+++ b/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()">
--- a/demo-shell/src/app/components/cloud/community/community-start-task-cloud.component.html
+++ b/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()">
--- a/demo-shell/src/app/components/cloud/community/community-task-cloud.component.html
+++ b/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"
--- a/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.html
+++ b/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>
--- a/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.ts
+++ b/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() {
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts
+++ b/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()
--- a/lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.ts
+++ b/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()
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts
+++ b/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()
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts
+++ b/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'];
--- a/lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts
+++ b/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;
--- a/lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.ts
+++ b/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);
        }
    }
--- a/lib/process-services-cloud/src/lib/process/process-header/services/process-header-cloud.service.ts
+++ b/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(
--- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts
+++ b/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 = [];
--- a/lib/process-services-cloud/src/lib/process/process-list/services/process-list-cloud.service.ts
+++ b/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);
--- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts
+++ b/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();
        }
    }
--- a/lib/process-services-cloud/src/lib/process/start-process/services/start-process-cloud.service.ts
+++ b/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(
--- a/lib/process-services-cloud/src/lib/task/directives/claim-task.directive.ts
+++ b/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')
--- a/lib/process-services-cloud/src/lib/task/directives/complete-task.directive.ts
+++ b/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')
--- a/lib/process-services-cloud/src/lib/task/directives/unclaim-task.directive.ts
+++ b/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')
--- a/lib/process-services-cloud/src/lib/task/services/task-cloud.service.ts
+++ b/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 {
--- a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.html
+++ b/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>
--- a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.ts
+++ b/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()
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.ts
+++ b/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()
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts
+++ b/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'];
--- a/lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts
+++ b/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;
--- a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts
+++ b/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;
        }
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
+++ b/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 {
--- a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts
+++ b/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 = [];
--- a/lib/process-services-cloud/src/lib/task/task-list/services/task-list-cloud.service.ts
+++ b/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);