[ADF-4793] The filters don't work on community-edition [ Use local storage for community version ] (#4973)

* * Use local storage for community version. * * Created a communityModule. * * Updated unit tests the recent changes * * Updated documents. * * Modified process/task filters doc.
2025-07-24 17:32:15 +00:00 · 2019-08-07 04:07:32 +05:30
parent 964e89f6ef
commit 0bca6607a9
33 changed files with 759 additions and 114 deletions
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -79,18 +79,15 @@ import { CloudBreadcrumbsComponent } from './components/cloud/cloud-breadcrumb-c
 import { CloudFiltersDemoComponent } from './components/cloud/cloud-filters-demo.component';
 import { TemplateDemoComponent } from './components/template-list/template-demo.component';
 import { PeopleGroupCloudDemoComponent } from './components/cloud/people-groups-cloud-demo.component';
-import { CloudSettingsComponent } from './components/cloud/cloud-settings.component';
 import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
 import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
-import { CommunityCloudComponent } from './components/cloud/community/community-cloud.component';
-import { CommunityTasksCloudDemoComponent } from './components/cloud/community/community-task-cloud.component';
-import { CommunityCloudFiltersDemoComponent } from './components/cloud/community/community-filters.component';
-import { CommunityStartProcessCloudDemoComponent } from './components/cloud/community/community-start-process-cloud.component';
-import { CommunityStartTaskCloudDemoComponent } from './components/cloud/community/community-start-task-cloud.component';
-import { CommunityProcessDetailsCloudDemoComponent } from './components/cloud/community/community-process-details-cloud.component';
-import { CommunityProcessesCloudDemoComponent } from './components/cloud/community/community-processes-cloud.component';
-import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/community/community-task-details-cloud.component';
 import { environment } from '../environments/environment';
+import { AppCloudSharedModule } from './components/cloud/shared/cloud.shared.module';
+import {
+    UserPreferenceCloudService,
+    PROCESS_FILTERS_SERVICE_TOKEN,
+    TASK_FILTERS_SERVICE_TOKEN
+} from '@alfresco/adf-process-services-cloud';

 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
@@ -146,6 +143,7 @@ registerLocaleData(localeSv);
        ExtensionsModule.forRoot(),
        ThemePickerModule,
        ChartsModule,
+        AppCloudSharedModule,
        MonacoEditorModule.forRoot()
    ],
    declarations: [
@@ -189,24 +187,17 @@ registerLocaleData(localeSv);
        CloudFiltersDemoComponent,
        TemplateDemoComponent,
        PeopleGroupCloudDemoComponent,
-        CloudSettingsComponent,
        ConfirmDialogExampleComponent,
        FormCloudDemoComponent,
-        ConfirmDialogExampleComponent,
-        CommunityCloudComponent,
-        CommunityTasksCloudDemoComponent,
-        CommunityCloudFiltersDemoComponent,
-        CommunityProcessesCloudDemoComponent,
-        CommunityStartProcessCloudDemoComponent,
-        CommunityStartTaskCloudDemoComponent,
-        CommunityProcessDetailsCloudDemoComponent,
-        CommunityTaskDetailsCloudDemoComponent
+        ConfirmDialogExampleComponent
    ],
    providers: [
        {
            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/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -57,14 +57,6 @@ import { ProcessDetailsCloudDemoComponent } from './components/cloud/process-det
 import { TemplateDemoComponent } from './components/template-list/template-demo.component';
 import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
 import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
-import { CommunityTasksCloudDemoComponent } from './components/cloud/community/community-task-cloud.component';
-import { CommunityCloudComponent } from './components/cloud/community/community-cloud.component';
-import { CommunityStartProcessCloudDemoComponent } from './components/cloud/community/community-start-process-cloud.component';
-import { CommunityStartTaskCloudDemoComponent } from './components/cloud/community/community-start-task-cloud.component';
-import { CommunityProcessDetailsCloudDemoComponent } from './components/cloud/community/community-process-details-cloud.component';
-import { CommunityProcessesCloudDemoComponent } from './components/cloud/community/community-processes-cloud.component';
-import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/community/community-task-details-cloud.component';
-
 export const appRoutes: Routes = [
    { path: 'login', loadChildren: 'app/components/login/login.module#AppLoginModule' },
    { path: 'logout', component: LogoutComponent },
@@ -186,33 +178,7 @@ export const appRoutes: Routes = [
                    },
                    {
                        path: 'community',
-                        component: CommunityCloudComponent,
-                        children: [
-                            {
-                                path: 'tasks',
-                                component: CommunityTasksCloudDemoComponent
-                            },
-                            {
-                                path: 'processes',
-                                component: CommunityProcessesCloudDemoComponent
-                            },
-                            {
-                                path: 'start-task',
-                                component: CommunityStartTaskCloudDemoComponent
-                            },
-                            {
-                                path: 'start-process',
-                                component: CommunityStartProcessCloudDemoComponent
-                            },
-                            {
-                                path: 'task-details/:taskId',
-                                component: CommunityTaskDetailsCloudDemoComponent
-                            },
-                            {
-                                path: 'process-details/:processInstanceId',
-                                component: CommunityProcessDetailsCloudDemoComponent
-                            }
-                        ]
+                        loadChildren: 'app/components/cloud/community/community.module#AppCommunityModule'
                    },
                    {
                        path: ':appName',
--- a/demo-shell/src/app/components/cloud/community/community.module.ts
+++ b/demo-shell/src/app/components/cloud/community/community.module.ts
@@ -0,0 +1,97 @@
+/*!
+ * @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 { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import {
+    ProcessServicesCloudModule,
+    LocalPreferenceCloudService,
+    PROCESS_FILTERS_SERVICE_TOKEN,
+    TASK_FILTERS_SERVICE_TOKEN
+} from '@alfresco/adf-process-services-cloud';
+
+import { CommunityCloudComponent } from './community-cloud.component';
+import { CommunityTasksCloudDemoComponent } from './community-task-cloud.component';
+import { CommunityCloudFiltersDemoComponent } from './community-filters.component';
+import { CommunityProcessesCloudDemoComponent } from './community-processes-cloud.component';
+import { CommunityStartProcessCloudDemoComponent } from './community-start-process-cloud.component';
+import { CommunityStartTaskCloudDemoComponent } from './community-start-task-cloud.component';
+import { CommunityProcessDetailsCloudDemoComponent } from './community-process-details-cloud.component';
+import { CommunityTaskDetailsCloudDemoComponent } from './community-task-details-cloud.component';
+import { AppCloudSharedModule } from '../shared/cloud.shared.module';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: CommunityCloudComponent,
+        children: [
+            {
+                path: 'tasks',
+                component: CommunityTasksCloudDemoComponent
+            },
+            {
+                path: 'processes',
+                component: CommunityProcessesCloudDemoComponent
+            },
+            {
+                path: 'start-task',
+                component: CommunityStartTaskCloudDemoComponent
+            },
+            {
+                path: 'start-process',
+                component: CommunityStartProcessCloudDemoComponent
+            },
+            {
+                path: 'task-details/:taskId',
+                component: CommunityTaskDetailsCloudDemoComponent
+            },
+            {
+                path: 'process-details/:processInstanceId',
+                component: CommunityProcessDetailsCloudDemoComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        ProcessServicesCloudModule,
+        RouterModule.forChild(routes),
+        AppCloudSharedModule,
+        FlexLayoutModule
+    ],
+    declarations: [
+        CommunityCloudComponent,
+        CommunityTasksCloudDemoComponent,
+        CommunityCloudFiltersDemoComponent,
+        CommunityProcessesCloudDemoComponent,
+        CommunityStartProcessCloudDemoComponent,
+        CommunityStartTaskCloudDemoComponent,
+        CommunityProcessDetailsCloudDemoComponent,
+        CommunityTaskDetailsCloudDemoComponent
+    ],
+    providers: [
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService },
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+    ]
+})
+export class AppCommunityModule {}
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
+++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
+++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts
+++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts
@@ -16,7 +16,7 @@
 */

 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CloudLayoutService } from './services/cloud-layout.service';
+import { CloudLayoutService } from '../services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

--- a/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
+++ b/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
@@ -0,0 +1,37 @@
+/*!
+ * @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 { CommonModule } from '@angular/common';
+import { CloudSettingsComponent } from './cloud-settings.component';
+import { MatDialogModule, MatInputModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+import { CoreModule } from '@alfresco/adf-core';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        MatDialogModule,
+        MatInputModule,
+        MatSelectModule,
+        MatSlideToggleModule
+    ],
+    declarations: [ CloudSettingsComponent ],
+    exports: [ CommonModule, CloudSettingsComponent]
+})
+
+export class AppCloudSharedModule {}
--- a/docs/process-services-cloud/components/edit-process-filter-cloud.component.md
+++ b/docs/process-services-cloud/components/edit-process-filter-cloud.component.md
@@ -212,3 +212,7 @@ Users can save a filter if they make any changes to it in an application using t
 ## See also

 -   [Edit task filter cloud component](edit-task-filter-cloud.component.md)
+-   [Process Filter Cloud Service](../services/process-filter-cloud.service.md)
+-   [Local preference Cloud Service](../services/local-preference-cloud.service.md)
+-   [User preference Cloud Service](../services/user-preference-cloud.service.md)
+
--- a/docs/process-services-cloud/components/edit-task-filter-cloud.component.md
+++ b/docs/process-services-cloud/components/edit-task-filter-cloud.component.md
@@ -212,3 +212,7 @@ Users can save a filter if they make any changes to it in an application using t
 ## See also

 -   [Edit process filter cloud component](edit-process-filter-cloud.component.md)
+-   [Task filters Cloud Service](../services/task-filter-cloud.service.md)
+-   [Local preference Cloud Service](../services/local-preference-cloud.service.md)
+-   [User preference Cloud Service](../services/user-preference-cloud.service.md)
+
--- a/docs/process-services-cloud/components/process-filters-cloud.component.md
+++ b/docs/process-services-cloud/components/process-filters-cloud.component.md
@@ -35,3 +35,9 @@ Lists all available process filters and allows to select a filter.
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when any error occurs while loading the filters |
 | filterClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessFilterCloudModel`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`>` | Emitted when a filter is selected/clicked |
 | success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when filters are loaded successfully |
+
+## See also
+
+-   [Process Filter Cloud Service](./services/process-filter-cloud.service.md)
+-   [Local preference Cloud Service](./services/local-preference-cloud.service.md)
+-   [User preference Cloud Service](./services/user-preference-cloud.service.md)
--- a/docs/process-services-cloud/components/task-filters-cloud.component.md
+++ b/docs/process-services-cloud/components/task-filters-cloud.component.md
@@ -54,3 +54,9 @@ as the value of `filterParam` as shown in the table below:
 | name | string | The name of the task filter, lowercase is checked |
 | key | string | The key of the task filter |
 | index | string | The zero-based position of the filter in the array. |
+
+## See also
+
+-   [Task filter Cloud Service](../services/task-filter-cloud.service.md)
+-   [Local preference Cloud Service](../services/local-preference-cloud.service.md)
+-   [User preference Cloud Service](../services/user-preference-cloud.service.md)
--- a/docs/process-services-cloud/services/local-preference-cloud.service.md
+++ b/docs/process-services-cloud/services/local-preference-cloud.service.md
@@ -0,0 +1,51 @@
+---
+Title: Local Preference Cloud Service
+Added: v3.4.0
+Status: Experimental
+Last reviewed: 2019-08-06
+---
+
+# [Local Preference Cloud Service](../../../lib/process-services-cloud/src/lib/services/local-preference-cloud.service.ts "Defined in local-preference-cloud.service.ts")
+
+Manages Local Storage preferences. 
+
+## Class members
+
+### Methods
+
+-   **createPreference**(appName: `string`, key: `string`, newPreference: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Creates local preference.
+    -   _appName:_ `string`  - Name of the target app 
+    -   _key:_ `string`  - Key of the target preference
+    -   _newPreference:_ `any`  - 
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of created local preferences
+-   **deletePreference**(key: `string`, preferences: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Deletes local preference by given preference key.
+    -   _key:_ `string`  - Key of the target preference
+    -   _preferences:_ `any`  - Details of updated preferences
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of preferences without deleted preference
+-   **getPreferenceByKey**(appName: `string`, key: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Gets local preference.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of local preference
+-   **getPreferences**(appName: `string`, key: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Gets local preferences
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - (Optional) (Optional) (Optional) (Optional) 
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - List of local preferences
+-   **prepareLocalPreferenceResponse**(key: `string`): `any`<br/>
+
+    -   _key:_ `string`  - 
+    -   **Returns** `any` - 
+
+-   **updatePreference**(appName: `string`, key: `string`, updatedPreference: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Updates local preference.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   _updatedPreference:_ `any`  - Details of updated preference
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of updated local preferences
+
+## See also
+
+-   [User preference Cloud Service](user-preference-cloud.service.md)
--- a/docs/process-services-cloud/services/process-filter-cloud.service.md
+++ b/docs/process-services-cloud/services/process-filter-cloud.service.md
@@ -35,13 +35,47 @@ Manage Process Filters, which are pre-configured Process Instance queries.
    -   _updatedFilter:_ [`ProcessFilterCloudModel`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)  - 
    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`ProcessFilterCloudModel`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`[]>` - Observable of process instance filters with updated filter

-## Details
+## Inject Preference service

-The methods of this service generally return an instance of
-[`ProcessFilterCloudModel`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts) or an array of instances.
+Token: [`PROCESS_FILTERS_SERVICE_TOKEN`](../../../lib/process-services-cloud/src/lib/services/cloud-token.service.ts)
+A DI token that maps to the dependency to be injected.

-You can use the returned filters to get matching process instances for the process app, 
-such as 'Running', 'Completed', 'All', etc.
+[Process Filter Cloud Service](../../../lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts "Defined in process-filter-cloud.service.ts")
+is by default injected with the [Local Preference Cloud Service](../../process-services-cloud/services/local-preference-cloud.service.md)
+
+```ts
+import { NgModule } from '@angular/core';
+import { LocalPreferenceCloudService, PROCESS_FILTERS_SERVICE_TOKEN } from '@alfresco/adf-process-services-cloud';
+
+@NgModule({
+    imports: [
+        ...Import Required Modules
+    ],
+    providers: [
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+    ]
+})
+export class ExampleModule {}
+
+```
+
+If you would like to inject the [User Preference Cloud Service](../../process-services-cloud/services/user-preference-cloud.service.md), you can inject the service like below shown 
+
+```ts
+import { NgModule } from '@angular/core';
+import { UserPreferenceCloudService, PROCESS_FILTERS_SERVICE_TOKEN } from '@alfresco/adf-process-services-cloud';
+
+@NgModule({
+    imports: [
+        ...Import Required Modules
+    ],
+    providers: [
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService }
+    ]
+})
+export class ExampleModule {}
+
+```

 ## See also

--- a/docs/process-services-cloud/services/task-filter-cloud.service.md
+++ b/docs/process-services-cloud/services/task-filter-cloud.service.md
@@ -53,6 +53,48 @@ this.taskFilterService.getTaskListFilters(appName).subscribe( (filters: TaskFilt

 These filters can now be used to get matching task instances for the process app.

+## Inject Preference service
+
+Token: [`TASK_FILTERS_SERVICE_TOKEN`](../../../lib/process-services-cloud/src/lib/services/cloud-token.service.ts)
+A DI token that maps to the dependency to be injected.
+
+[Task Filter Cloud Service](../../../lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts "Defined in task-filter-cloud.service.ts")
+is by default injected with the [Local Preference Cloud Service](../../process-services-cloud/services/local-preference-cloud.service.md)
+
+```ts
+import { NgModule } from '@angular/core';
+import { LocalPreferenceCloudService, TASK_FILTERS_SERVICE_TOKEN } from '@alfresco/adf-process-services-cloud';
+
+@NgModule({
+    imports: [
+        ...Import Required Modules
+    ],
+    providers: [
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+    ]
+})
+export class ExampleModule {}
+
+```
+
+If you would like to inject the [UserPreferenceCloudService](../../process-services-cloud/services/user-preference-cloud.service.md),  you can inject the service like below shown 
+
+```ts
+import { NgModule } from '@angular/core';
+import { UserPreferenceCloudService, TASK_FILTERS_SERVICE_TOKEN } from '@alfresco/adf-process-services-cloud';
+
+@NgModule({
+    imports: [
+        ...Import Required Modules
+    ],
+    providers: [
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService }
+    ]
+})
+export class ExampleModule {}
+
+```
+
 ## See also

 -   [Task filter service](../../process-services/services/task-filter.service.md)
--- a/docs/process-services-cloud/services/user-preference-cloud.service.md
+++ b/docs/process-services-cloud/services/user-preference-cloud.service.md
@@ -0,0 +1,50 @@
+---
+Title: User Preference Cloud Service
+Added: v3.4.0
+Status: Experimental
+Last reviewed: 2019-08-06
+---
+
+# [User Preference Cloud Service](../../../lib/process-services-cloud/src/lib/services/user-preference-cloud.service.ts "Defined in user-preference-cloud.service.ts")
+
+Manages user preferences. 
+
+## Class members
+
+### Methods
+
+-   **createPreference**(appName: `string`, key: `string`, newPreference: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Creates user preference.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   _newPreference:_ `any`  - 
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of created user preferences
+-   **deletePreference**(appName: `string`, key: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Deletes user preference by given preference key.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of delete operation status
+-   **getBasePath**(appName: `string`): `string`<br/>
+
+    -   _appName:_ `string`  - 
+    -   **Returns** `string` - 
+
+-   **getPreferenceByKey**(appName: `string`, key: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Gets user preference.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of user preference
+-   **getPreferences**(appName: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Gets user preferences
+    -   _appName:_ `string`  - Name of the target app
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - List of user preferences
+-   **updatePreference**(appName: `string`, key: `string`, updatedPreference: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Updates user preference.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   _updatedPreference:_ `any`  - Details of updated preference
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of updated user preferences
+
+## See also
+
+-   [Local preference Cloud Service](local-preference-cloud.service.md)
--- a/lib/process-services-cloud/src/lib/process-services-cloud.module.ts
+++ b/lib/process-services-cloud/src/lib/process-services-cloud.module.ts
@@ -24,7 +24,12 @@ import { GroupCloudModule } from './group/group-cloud.module';
 import { FormCloudModule } from './form/form-cloud.module';
 import { TaskFormModule } from './task/task-form/task-form.module';
 import { BaseCloudService } from './services/base-cloud.service';
-import { UserPreferenceCloudService } from './services/user-preference.cloud.service';
+import { UserPreferenceCloudService } from './services/user-preference-cloud.service';
+import {
+    LocalPreferenceCloudService,
+    PROCESS_FILTERS_SERVICE_TOKEN,
+    TASK_FILTERS_SERVICE_TOKEN
+} from './services/public-api';

@NgModule({
    imports: [
@@ -46,7 +51,10 @@ import { UserPreferenceCloudService } from './services/user-preference.cloud.ser
            }
        },
        BaseCloudService,
-        UserPreferenceCloudService
+        UserPreferenceCloudService,
+        LocalPreferenceCloudService,
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService },
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
    ],
    exports: [
        AppListCloudModule,
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
@@ -32,7 +32,8 @@ import { AppsProcessCloudService } from '../../../app/services/apps-process-clou
 import { fakeApplicationInstance } from './../../../app/mock/app-model.mock';
 import moment from 'moment-es6';
 import { AbstractControl } from '@angular/forms';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
+import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';

 describe('EditProcessFilterCloudComponent', () => {
    let component: EditProcessFilterCloudComponent;
@@ -56,7 +57,10 @@ describe('EditProcessFilterCloudComponent', () => {

    setupTestBed({
        imports: [ProcessServiceCloudTestingModule, ProcessFiltersCloudModule],
-        providers: [MatDialog, UserPreferenceCloudService]
+        providers: [
+            MatDialog,
+            { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+        ]
    });

    beforeEach(() => {
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts
@@ -26,7 +26,9 @@ import { By } from '@angular/platform-browser';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { ProcessFiltersCloudModule } from '../process-filters-cloud.module';
 import { FilterParamsModel } from '../../../task/task-filters/models/filter-cloud.model';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
+import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
+import { UserPreferenceCloudService } from '../../../services/user-preference-cloud.service';

 describe('ProcessFiltersCloudComponent', () => {

@@ -76,7 +78,10 @@ describe('ProcessFiltersCloudComponent', () => {

    setupTestBed({
        imports: [ProcessServiceCloudTestingModule, ProcessFiltersCloudModule],
-        providers: [ProcessFilterCloudService, UserPreferenceCloudService]
+        providers: [
+            ProcessFilterCloudService,
+            { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+        ]
    });

    beforeEach(() => {
@@ -86,6 +91,14 @@ describe('ProcessFiltersCloudComponent', () => {
        processFilterService = TestBed.get(ProcessFilterCloudService);
    });

+    it('should create ProcessFiltersCloudComponent instance', () => {
+        expect(component instanceof ProcessFiltersCloudComponent).toBeDefined();
+    });
+
+    it('should be able to use LocalPreferenceCloudService', () => {
+        expect(processFilterService.preferenceService instanceof LocalPreferenceCloudService).toBeTruthy();
+    });
+
    it('should attach specific icon for each filter if hasIcon is true', async(() => {
        spyOn(processFilterService, 'getProcessFilters').and.returnValue(fakeGlobalFilterObservable);
        const change = new SimpleChange(undefined, 'my-app-1', true);
@@ -353,3 +366,32 @@ describe('ProcessFiltersCloudComponent', () => {
        expect(component.getCurrentFilter()).toBe(filter);
    });
 });
+
+describe('Set UserPreferenceService', () => {
+
+    let processFilterService: ProcessFilterCloudService;
+    let component: ProcessFiltersCloudComponent;
+    let fixture: ComponentFixture<ProcessFiltersCloudComponent>;
+
+    setupTestBed({
+        imports: [ProcessServiceCloudTestingModule, ProcessFiltersCloudModule],
+        providers: [
+            ProcessFilterCloudService,
+            { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService }
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ProcessFiltersCloudComponent);
+        component = fixture.componentInstance;
+        processFilterService = TestBed.get(ProcessFilterCloudService);
+    });
+
+    it('should create ProcessFiltersCloudComponent instance', () => {
+        expect(component instanceof ProcessFiltersCloudComponent).toBeDefined();
+    });
+
+    it('should able to inject UserPreferenceCloudService when you override with user preferece service', () => {
+        expect(processFilterService.preferenceService instanceof UserPreferenceCloudService).toBeTruthy();
+    });
+});
--- a/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.spec.ts
+++ b/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.spec.ts
@@ -19,7 +19,6 @@ import { async, TestBed } from '@angular/core/testing';
 import { setupTestBed, CoreModule, IdentityUserService } from '@alfresco/adf-core';
 import { of } from 'rxjs';
 import { ProcessFilterCloudService } from './process-filter-cloud.service';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
 import {
    fakeProcessCloudFilterEntries,
    fakeProcessCloudFilters,
@@ -27,10 +26,14 @@ import {
    fakeProcessCloudFilterWithDifferentEntries,
    fakeProcessFilter
 } from '../mock/process-filters.cloud.mock';
+import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';
+import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
+import { UserPreferenceCloudService } from '../../../services/user-preference-cloud.service';

 describe('ProcessFilterCloudService', () => {
    let service: ProcessFilterCloudService;
-    let userPreferenceCloudService: UserPreferenceCloudService;
+    let preferenceCloudService: PreferenceCloudServiceInterface;
    let identityUserService: IdentityUserService;
    let getPreferencesSpy: jasmine.Spy;
    let getPreferenceByKeySpy: jasmine.Spy;
@@ -44,17 +47,22 @@ describe('Process Filter Cloud Service', () => {
        imports: [
            CoreModule.forRoot()
        ],
-        providers: [ProcessFilterCloudService, UserPreferenceCloudService, IdentityUserService]
+        providers: [
+            ProcessFilterCloudService,
+            IdentityUserService,
+            LocalPreferenceCloudService,
+            { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+        ]
    });

    beforeEach(async(() => {
        service = TestBed.get(ProcessFilterCloudService);
-        userPreferenceCloudService = TestBed.get(UserPreferenceCloudService);
+        preferenceCloudService = service.preferenceService;
        identityUserService = TestBed.get(IdentityUserService);
-        createPreferenceSpy = spyOn(userPreferenceCloudService, 'createPreference').and.returnValue(of(fakeProcessCloudFilters));
-        updatePreferenceSpy = spyOn(userPreferenceCloudService, 'updatePreference').and.returnValue(of(fakeProcessCloudFilters));
-        getPreferenceByKeySpy = spyOn(userPreferenceCloudService, 'getPreferenceByKey').and.returnValue(of(fakeProcessCloudFilters));
-        getPreferencesSpy = spyOn(userPreferenceCloudService, 'getPreferences').and.returnValue(of(fakeProcessCloudFilterEntries));
+        createPreferenceSpy = spyOn(preferenceCloudService, 'createPreference').and.returnValue(of(fakeProcessCloudFilters));
+        updatePreferenceSpy = spyOn(preferenceCloudService, 'updatePreference').and.returnValue(of(fakeProcessCloudFilters));
+        getPreferenceByKeySpy = spyOn(preferenceCloudService, 'getPreferenceByKey').and.returnValue(of(fakeProcessCloudFilters));
+        getPreferencesSpy = spyOn(preferenceCloudService, 'getPreferences').and.returnValue(of(fakeProcessCloudFilterEntries));
        getCurrentUserInfoSpy = spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(identityUserMock);
    }));

@@ -62,6 +70,10 @@ describe('Process Filter Cloud Service', () => {
        expect(service).toBeDefined();
    });

+    it('should be able to use LocalPreferenceCloudService', () => {
+        expect(preferenceCloudService instanceof LocalPreferenceCloudService).toBeTruthy();
+    });
+
    it('should create processfilter key by using appName and the username', (done) => {
        service.getProcessFilters('mock-appName').subscribe((res: any) => {
            expect(res).toBeDefined();
@@ -208,3 +220,38 @@ describe('Process Filter Cloud Service', () => {
        expect(updatePreferenceSpy).toHaveBeenCalled();
    });
 });
+
+describe('Inject [UserPreferenceCloudService] into the ProcessFilterCloudService', () => {
+    let service: ProcessFilterCloudService;
+    let preferenceCloudService: PreferenceCloudServiceInterface;
+    let identityUserService: IdentityUserService;
+
+    const identityUserMock = { username: 'mock-username', firstName: 'fake-identity-first-name', lastName: 'fake-identity-last-name', email: 'fakeIdentity@email.com' };
+
+    setupTestBed({
+        imports: [
+            CoreModule.forRoot()
+        ],
+        providers: [
+            ProcessFilterCloudService,
+            IdentityUserService,
+            UserPreferenceCloudService,
+            { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService }
+        ]
+    });
+
+    beforeEach(async(() => {
+        service = TestBed.get(ProcessFilterCloudService);
+        preferenceCloudService = service.preferenceService;
+        identityUserService = TestBed.get(IdentityUserService);
+        spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(identityUserMock);
+    }));
+
+    it('should create ProcessFilterCloudService instance', () => {
+        expect(service).toBeDefined();
+    });
+
+    it('should be able to inject UserPreferenceCloudService when you override with user preferece service', () => {
+        expect(preferenceCloudService instanceof UserPreferenceCloudService).toBeTruthy();
+    });
+});
--- a/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts
+++ b/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts
@@ -16,12 +16,12 @@
 */

 import { IdentityUserService, IdentityUserModel } from '@alfresco/adf-core';
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 import { Observable, of, BehaviorSubject, throwError } from 'rxjs';
 import { ProcessFilterCloudModel } from '../models/process-filter-cloud.model';
-import { UserPreferenceCloudService } from '../../../services/public-api';
 import { switchMap, map, catchError } from 'rxjs/operators';
-
+import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';
@Injectable()
 export class ProcessFilterCloudService {

@@ -29,7 +29,7 @@ export class ProcessFilterCloudService {
    filters$: Observable<ProcessFilterCloudModel[]>;

    constructor(
-        private preferenceService: UserPreferenceCloudService,
+        @Inject(PROCESS_FILTERS_SERVICE_TOKEN) public preferenceService: PreferenceCloudServiceInterface,
        private identityUserService: IdentityUserService) {
        this.filtersSubject = new BehaviorSubject([]);
        this.filters$ = this.filtersSubject.asObservable();
@@ -42,7 +42,7 @@ export class ProcessFilterCloudService {
     */
    private createDefaultFilters(appName: string) {
        const key: string = this.prepareKey(appName);
-        this.preferenceService.getPreferences(appName).pipe(
+        this.preferenceService.getPreferences(appName, key).pipe(
            switchMap((response: any) => {
                const preferences = (response && response.list && response.list.entries) ? response.list.entries : [];
                if (!this.hasPreferences(preferences)) {
--- a/lib/process-services-cloud/src/lib/services/cloud-token.service.ts
+++ b/lib/process-services-cloud/src/lib/services/cloud-token.service.ts
@@ -0,0 +1,23 @@
+/*!
+ * @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 { InjectionToken } from '@angular/core';
+import { PreferenceCloudServiceInterface } from './preference-cloud.interface';
+
+export const PROCESS_FILTERS_SERVICE_TOKEN = new InjectionToken<PreferenceCloudServiceInterface>('proccess-filters-cloud');
+
+export const TASK_FILTERS_SERVICE_TOKEN = new InjectionToken<PreferenceCloudServiceInterface>('task-filters-cloud');
--- a/lib/process-services-cloud/src/lib/services/local-preference-cloud.service.ts
+++ b/lib/process-services-cloud/src/lib/services/local-preference-cloud.service.ts
@@ -0,0 +1,105 @@
+/*!
+ * @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 { Injectable } from '@angular/core';
+import { PreferenceCloudServiceInterface } from './preference-cloud.interface';
+import { StorageService } from '@alfresco/adf-core';
+import { Observable, of } from 'rxjs';
+
+@Injectable()
+export class LocalPreferenceCloudService implements PreferenceCloudServiceInterface {
+
+  constructor(private storage: StorageService) { }
+
+    /**
+     * Gets local preferences
+     * @param appName Name of the target app
+     * @returns List of local preferences
+     */
+    getPreferences(appName: string, key: string): Observable<any> {
+        if (key || key === '') {
+            return of(this.prepareLocalPreferenceResponse(key));
+        }
+    }
+
+    /**
+     * Gets local preference.
+     * @param appName Name of the target app
+     * @param key Key of the target preference
+     * @returns Observable of local preference
+     */
+    getPreferenceByKey(appName: string, key: string): Observable<any> {
+        return of(JSON.parse(this.storage.getItem(key)) || []);
+    }
+
+    /**
+     * Creates local preference.
+     * @param appName Name of the target app
+     * @param key Key of the target preference
+     * @newPreference Details of new local preference
+     * @returns Observable of created local preferences
+     */
+    createPreference(appName: string, key: string, newPreference: any): Observable<any> {
+        const storedFilters = JSON.parse(this.storage.getItem(key) || '[]');
+        storedFilters.push(...newPreference);
+        this.storage.setItem(key, JSON.stringify(storedFilters));
+        return of(storedFilters);
+    }
+
+    /**
+     * Updates local preference.
+     * @param appName Name of the target app
+     * @param key Key of the target preference
+     * @param updatedPreference Details of updated preference
+     * @returns Observable of updated local preferences
+     */
+    updatePreference(appName: string, key: string, updatedPreference: any): Observable<any> {
+        if (key) {
+            this.storage.setItem(key, JSON.stringify(updatedPreference));
+            return of(updatedPreference);
+        }
+    }
+
+    /**
+     * Deletes local preference by given preference key.
+     * @param appName Name of the target app
+     * @param key Key of the target preference
+     * @param preferences Details of updated preferences
+     * @returns Observable of preferences without deleted preference
+     */
+    deletePreference(key: string, preferences: any): Observable<any> {
+        if (key) {
+            this.storage.setItem(key, JSON.stringify(preferences));
+            return of(preferences);
+        }
+    }
+
+    prepareLocalPreferenceResponse(key: string): any {
+        return {
+            'list': {
+                'entries': [
+                    {
+                        'entry': {
+                            'key': key,
+                            'value': this.storage.getItem(key) || '[]'
+                        }
+                    }
+                ]
+            }
+        };
+    }
+}
--- a/lib/process-services-cloud/src/lib/services/preference-cloud.interface.ts
+++ b/lib/process-services-cloud/src/lib/services/preference-cloud.interface.ts
@@ -0,0 +1,28 @@
+/*!
+ * @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 { Observable } from 'rxjs';
+
+export interface PreferenceCloudServiceInterface {
+
+    getPreferences(appName: string, key?: string): Observable<any>;
+    getPreferenceByKey(appName: string, key: string): Observable<any>;
+    createPreference(appName: string, key: string, newPreference: any): Observable<any>;
+    updatePreference(appName: string, key: string, updatedPreference: any): Observable<any>;
+    deletePreference(appName: string, key: any): Observable<any>;
+
+}
--- a/lib/process-services-cloud/src/lib/services/public-api.ts
+++ b/lib/process-services-cloud/src/lib/services/public-api.ts
@@ -15,4 +15,7 @@
 * limitations under the License.
 */

-export * from './user-preference.cloud.service';
+export * from './user-preference-cloud.service';
+export * from './local-preference-cloud.service';
+export * from './cloud-token.service';
+export * from './preference-cloud.interface';
--- a/lib/process-services-cloud/src/lib/services/user-preference-cloud.service.spec.ts
+++ b/lib/process-services-cloud/src/lib/services/user-preference-cloud.service.spec.ts
@@ -17,7 +17,7 @@

 import { TestBed, async } from '@angular/core/testing';

-import { UserPreferenceCloudService } from './user-preference.cloud.service';
+import { UserPreferenceCloudService } from './user-preference-cloud.service';
 import { setupTestBed, CoreModule, AlfrescoApiServiceMock, AppConfigService, LogService, AlfrescoApiService } from '@alfresco/adf-core';
 import { mockPreferences, getMockPreference, createMockPreference, updateMockPreference } from '../mock/user-preference.mock';

--- a/lib/process-services-cloud/src/lib/services/user-preference-cloud.service.ts
+++ b/lib/process-services-cloud/src/lib/services/user-preference-cloud.service.ts
@@ -16,13 +16,14 @@
 */

 import { Injectable } from '@angular/core';
-import { BaseCloudService } from './base-cloud.service';
+import { PreferenceCloudServiceInterface } from './preference-cloud.interface';
 import { AlfrescoApiService, AppConfigService, LogService } from '@alfresco/adf-core';
 import { from, throwError, Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
+import { BaseCloudService } from './base-cloud.service';

@Injectable()
-export class UserPreferenceCloudService extends BaseCloudService {
+export class UserPreferenceCloudService extends BaseCloudService implements PreferenceCloudServiceInterface {

  contentTypes = ['application/json'];
  accepts = ['application/json'];
@@ -58,7 +59,7 @@ export class UserPreferenceCloudService extends BaseCloudService {
   * Gets user preference.
   * @param appName Name of the target app
   * @param key Key of the target preference
-   * @returns Observable of user preferences
+   * @returns Observable of user preference
   */
  getPreferenceByKey(appName: string, key: string): Observable<any> {
    if (appName || appName === '') {
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.scss
@@ -36,7 +36,7 @@
    }

    .adf {
-        &-cloud-edit-process-filter-loading-margin {
+        &-cloud-edit-task-filter-loading-margin {
            margin-left: calc((100% - 100px) / 2);
            margin-right: calc((100% - 100px) / 2);
        }
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.spec.ts
@@ -22,14 +22,14 @@ import { By } from '@angular/platform-browser';
 import { setupTestBed } from '@alfresco/adf-core';
 import { MatDialog } from '@angular/material';
 import { of } from 'rxjs';
-
+import { TASK_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
 import { fakeApplicationInstance } from '../../../app/mock/app-model.mock';
 import { TaskFiltersCloudModule } from '../task-filters-cloud.module';
 import { EditTaskFilterCloudComponent } from './edit-task-filter-cloud.component';
 import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
 import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
 import { fakeFilter, fakeAllTaskFilter } from '../mock/task-filters-cloud.mock';
 import { AbstractControl } from '@angular/forms';
@@ -46,7 +46,10 @@ describe('EditTaskFilterCloudComponent', () => {

    setupTestBed({
        imports: [ProcessServiceCloudTestingModule, TaskFiltersCloudModule],
-        providers: [MatDialog, UserPreferenceCloudService]
+        providers: [
+            MatDialog,
+            { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+        ]
    });

    beforeEach(() => {
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
@@ -19,6 +19,8 @@ import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { setupTestBed } from '@alfresco/adf-core';
 import { from, Observable } from 'rxjs';
+import { TASK_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
 import { FilterParamsModel } from '../models/filter-cloud.model';
 import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
 import { TaskFiltersCloudComponent } from './task-filters-cloud.component';
@@ -26,7 +28,7 @@ import { By } from '@angular/platform-browser';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { TaskFiltersCloudModule } from '../task-filters-cloud.module';
 import { fakeGlobalFilter } from '../mock/task-filters-cloud.mock';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
+import { UserPreferenceCloudService } from '../../../services/user-preference-cloud.service';

 describe('TaskFiltersCloudComponent', () => {

@@ -53,7 +55,10 @@ describe('TaskFiltersCloudComponent', () => {

    setupTestBed({
        imports: [ProcessServiceCloudTestingModule, TaskFiltersCloudModule],
-        providers: [TaskFilterCloudService, UserPreferenceCloudService]
+        providers: [
+            TaskFilterCloudService,
+            { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+        ]
    });

    beforeEach(() => {
@@ -63,6 +68,14 @@ describe('TaskFiltersCloudComponent', () => {
        taskFilterService = TestBed.get(TaskFilterCloudService);
    });

+    it('should create TaskFiltersCloudComponent instance', () => {
+        expect(component instanceof TaskFiltersCloudComponent).toBeDefined();
+    });
+
+    it('should be able to use LocalPreferenceCloudService', () => {
+        expect(taskFilterService.preferenceService instanceof LocalPreferenceCloudService).toBeTruthy();
+    });
+
    it('should attach specific icon for each filter if hasIcon is true', async(() => {
        spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
        const change = new SimpleChange(undefined, 'my-app-1', true);
@@ -329,3 +342,33 @@ describe('TaskFiltersCloudComponent', () => {
        expect(component.getCurrentFilter()).toBe(fakeGlobalFilter[0]);
    });
 });
+
+describe('Set UserPreferenceService', () => {
+
+    let component: TaskFiltersCloudComponent;
+    let taskFilterService: TaskFilterCloudService;
+    let fixture: ComponentFixture<TaskFiltersCloudComponent>;
+
+    setupTestBed({
+        imports: [ProcessServiceCloudTestingModule, TaskFiltersCloudModule],
+        providers: [
+            TaskFilterCloudService,
+            { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService }
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TaskFiltersCloudComponent);
+        component = fixture.componentInstance;
+
+        taskFilterService = TestBed.get(TaskFilterCloudService);
+    });
+
+    it('should create TaskFiltersCloudComponent instance', () => {
+        expect(component instanceof TaskFiltersCloudComponent).toBeDefined();
+    });
+
+    it('should be able to inject UserPreferenceCloudService when you override with user preferece service', () => {
+        expect(taskFilterService.preferenceService instanceof UserPreferenceCloudService).toBeTruthy();
+    });
+});
--- a/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.spec.ts
@@ -17,8 +17,9 @@
 import { async, TestBed } from '@angular/core/testing';
 import { setupTestBed, CoreModule, IdentityUserService } from '@alfresco/adf-core';
 import { of } from 'rxjs';
+import { TASK_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
 import { TaskFilterCloudService } from './task-filter-cloud.service';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
 import {
    fakeTaskCloudPreferenceList,
    fakeTaskCloudFilters,
@@ -26,10 +27,12 @@ import {
    fakePreferenceWithNoTaskFilterPreference,
    fakeTaskFilter
 } from '../mock/task-filters-cloud.mock';
+import { UserPreferenceCloudService } from '../../../services/user-preference-cloud.service';
+import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';

 describe('TaskFilterCloudService', () => {
    let service: TaskFilterCloudService;
-    let userPreferenceCloudService: UserPreferenceCloudService;
+    let preferenceCloudService: PreferenceCloudServiceInterface;
    let identityUserService: IdentityUserService;
    let getPreferencesSpy: jasmine.Spy;
    let getPreferenceByKeySpy: jasmine.Spy;
@@ -43,17 +46,22 @@ describe('Task Filter Cloud Service', () => {
        imports: [
            CoreModule.forRoot()
        ],
-        providers: [TaskFilterCloudService, UserPreferenceCloudService, IdentityUserService]
+        providers: [
+            TaskFilterCloudService,
+            LocalPreferenceCloudService,
+            { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService },
+            IdentityUserService
+        ]
    });

    beforeEach(async(() => {
        service = TestBed.get(TaskFilterCloudService);
-        userPreferenceCloudService = TestBed.get(UserPreferenceCloudService);
+        preferenceCloudService = service.preferenceService;
        identityUserService = TestBed.get(IdentityUserService);
-        createPreferenceSpy = spyOn(userPreferenceCloudService, 'createPreference').and.returnValue(of(fakeTaskCloudFilters));
-        updatePreferenceSpy = spyOn(userPreferenceCloudService, 'updatePreference').and.returnValue(of(fakeTaskCloudFilters));
-        getPreferencesSpy = spyOn(userPreferenceCloudService, 'getPreferences').and.returnValue(of(fakeTaskCloudPreferenceList));
-        getPreferenceByKeySpy = spyOn(userPreferenceCloudService, 'getPreferenceByKey').and.returnValue(of(fakeTaskCloudFilters));
+        createPreferenceSpy = spyOn(preferenceCloudService, 'createPreference').and.returnValue(of(fakeTaskCloudFilters));
+        updatePreferenceSpy = spyOn(preferenceCloudService, 'updatePreference').and.returnValue(of(fakeTaskCloudFilters));
+        getPreferencesSpy = spyOn(preferenceCloudService, 'getPreferences').and.returnValue(of(fakeTaskCloudPreferenceList));
+        getPreferenceByKeySpy = spyOn(preferenceCloudService, 'getPreferenceByKey').and.returnValue(of(fakeTaskCloudFilters));
        getCurrentUserInfoSpy = spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(identityUserMock);
    }));

@@ -61,6 +69,10 @@ describe('Task Filter Cloud Service', () => {
        expect(service).toBeDefined();
    });

+    it('should be able to use LocalPreferenceCloudService', () => {
+        expect(preferenceCloudService instanceof LocalPreferenceCloudService).toBeTruthy();
+    });
+
    it('should create task filter key by using appName and the username', (done) => {
        service.getTaskListFilters('fakeAppName').subscribe((res: any) => {
            expect(res).toBeDefined();
@@ -208,3 +220,38 @@ describe('Task Filter Cloud Service', () => {
        expect(updatePreferenceSpy).toHaveBeenCalled();
    });
 });
+
+describe('Inject [UserPreferenceCloudService] into the TaskFilterCloudService', () => {
+    let service: TaskFilterCloudService;
+    let preferenceCloudService: PreferenceCloudServiceInterface;
+    let identityUserService: IdentityUserService;
+
+    const identityUserMock = { username: 'fakeusername', firstName: 'fake-identity-first-name', lastName: 'fake-identity-last-name', email: 'fakeIdentity@email.com' };
+
+    setupTestBed({
+        imports: [
+            CoreModule.forRoot()
+        ],
+        providers: [
+            TaskFilterCloudService,
+            LocalPreferenceCloudService,
+            { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService },
+            IdentityUserService
+        ]
+    });
+
+    beforeEach(async(() => {
+        service = TestBed.get(TaskFilterCloudService);
+        preferenceCloudService = service.preferenceService;
+        identityUserService = TestBed.get(IdentityUserService);
+        spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(identityUserMock);
+    }));
+
+    it('should create TaskFilterCloudService instance', () => {
+        expect(service).toBeDefined();
+    });
+
+    it('should be able to inject UserPreferenceCloudService when you override with user preferece service', () => {
+        expect(preferenceCloudService instanceof UserPreferenceCloudService).toBeTruthy();
+    });
+});
--- a/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts
@@ -16,20 +16,23 @@
 */

 import { IdentityUserService, IdentityUserModel } from '@alfresco/adf-core';
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 import { Observable, of, BehaviorSubject, throwError } from 'rxjs';
 import { TaskFilterCloudModel } from '../models/filter-cloud.model';
-import { UserPreferenceCloudService } from '../../../services/public-api';
 import { switchMap, map, catchError } from 'rxjs/operators';
+import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';
+import { TASK_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';

@Injectable()
 export class TaskFilterCloudService {
-
    private filtersSubject: BehaviorSubject<TaskFilterCloudModel[]>;
    filters$: Observable<TaskFilterCloudModel[]>;

-    constructor( private identityUserService: IdentityUserService,
-                 private preferenceService: UserPreferenceCloudService) {
+    constructor(
+        private identityUserService: IdentityUserService,
+        @Inject(TASK_FILTERS_SERVICE_TOKEN)
+        public preferenceService: PreferenceCloudServiceInterface
+    ) {
        this.filtersSubject = new BehaviorSubject([]);
        this.filters$ = this.filtersSubject.asObservable();
    }
@@ -41,7 +44,7 @@ export class TaskFilterCloudService {
     */
    private createDefaultFilters(appName: string) {
        const key: string = this.prepareKey(appName);
-        this.preferenceService.getPreferences(appName).pipe(
+        this.preferenceService.getPreferences(appName, key).pipe(
            switchMap((response: any) => {
                const preferences = (response && response.list && response.list.entries) ? response.list.entries : [];
                if (!this.hasPreferences(preferences)) {
@@ -116,7 +119,7 @@ export class TaskFilterCloudService {
     * @param id ID of the task
     * @returns Details of the task filter
     */
-    getTaskFilterById(appName: string, id: string): any {
+    getTaskFilterById(appName: string, id: string): Observable<TaskFilterCloudModel> {
        const key: string = this.prepareKey(appName);
        return this.getTaskFiltersByKey(appName, key).pipe(
            switchMap((filters: TaskFilterCloudModel[]) => {
@@ -140,7 +143,7 @@ export class TaskFilterCloudService {
     * @param filter The new filter to add
     * @returns Observable of task instance filters with newly added filter
     */
-    addFilter(newFilter: TaskFilterCloudModel) {
+    addFilter(newFilter: TaskFilterCloudModel): Observable<TaskFilterCloudModel[]> {
        const key: string = this.prepareKey(newFilter.appName);
        return this.getTaskFiltersByKey(newFilter.appName, key).pipe(
            switchMap((filters: TaskFilterCloudModel[]) => {
@@ -177,7 +180,7 @@ export class TaskFilterCloudService {
                } else {
                    const itemIndex = filters.findIndex((filter: TaskFilterCloudModel) => filter.id === updatedFilter.id);
                    filters[itemIndex] = updatedFilter;
-                    return this.updateProcessFilters(updatedFilter.appName, key, filters);
+                    return this.updateTaskFilters(updatedFilter.appName, key, filters);
                }
            }),
            map((updatedFilters: TaskFilterCloudModel[]) => {
@@ -199,7 +202,7 @@ export class TaskFilterCloudService {
            switchMap((filters: any) => {
                if (filters && filters.length > 0) {
                    filters = filters.filter((filter: TaskFilterCloudModel) => filter.id !== deletedFilter.id);
-                    return this.updateProcessFilters(deletedFilter.appName, key, filters);
+                    return this.updateTaskFilters(deletedFilter.appName, key, filters);
                }
            }),
            map((filters: TaskFilterCloudModel[]) => {
@@ -217,7 +220,7 @@ export class TaskFilterCloudService {
     * @param filters Details of update filter
     * @returns Observable of updated task filters
     */
-    private updateProcessFilters(appName: string, key: string, filters: TaskFilterCloudModel[]): Observable<TaskFilterCloudModel[]> {
+    private updateTaskFilters(appName: string, key: string, filters: TaskFilterCloudModel[]): Observable<TaskFilterCloudModel[]> {
        return this.preferenceService.updatePreference(appName, key, filters);
    }