[ADF-3039] Task List - Enanchement (#3404)

* * Created DataColumnSchemaAssembler component to get column schema from html and app.config.json
* Removed column related  method  from tasklist.

* * Removed data property from the tasklist component
* Using rows input property instead of data input property of the datatable

* *  Renamed  DataColumnSchemaAssembler to DataTableSchema
* Refactored DataTableSchema component

* * Changed schem property into an  input schemaColumns property  in dataTable component

* * Added selectFirstRow input property to select a first row of datatable
* Removed unnecessary method from tasklist component

* * Added test case for the recent changes
* Added mock object for the tasklist spec

* * Added testcases for recent changes in the datatable component

* * Updated datatable and tasklist document for the recent changes

* * Refactored process-service and task list component
* Updated datatable document.

* [ADF-3039] Task List - Enanchement
* Changed schemaColumn name to columns
* Updated datatable documentation.
*  data input Annotated  with @deprecated in the tasklist component

* * Added an sorting input to the datatable.
* Updated datatable and tasklist documentation
* Added method to get current sorting order.

* * After rebasing

* * Revert  sorting changes

* * After rebase

* * fixed conflicts

* * Fixed failing testcase after rebased.

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -54,7 +54,6 @@ import {
 } from '@alfresco/adf-process-services';
 import { LogService } from '@alfresco/adf-core';
 import { AlfrescoApiService, UserPreferencesService } from '@alfresco/adf-core';
-import { ObjectDataRow } from '@alfresco/adf-core';
 import { Subscription } from 'rxjs/Subscription';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 import { DemoFieldValidator } from './demo-field-validator';
@@ -164,7 +163,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
                 private location: Location,
                 private preferenceService: UserPreferencesService) {
 
-
         this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
         this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName');
 
@@ -446,11 +444,11 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         this.activeTab = this.tabs.tasks;
 
         const taskId = event.value.id;
-        const processTaskDataRow = new ObjectDataRow({
+        const processTaskDataRow: any = {
             id: taskId,
             name: event.value.name || 'No name',
             created: event.value.created
-        });
+        };
         this.activitifilter.selectFilter(null);
         if (this.taskList) {
             this.taskList.setCustomDataSource([processTaskDataRow]);

docs/core/datatable.component.md

@@ -80,7 +80,72 @@ export class DataTableDemo {
 }
 ```
 
-You can also use HTML-based schema declaration like shown below:
+### Setting the rows and column schema
+
+You can set rows and columns to the ObjectDataTableAdapter like shown below:
+
+```ts
+import { ObjectDataTableAdapter }  from '@alfresco/adf-core';
+
+@Component({...})
+export class DataTableDemo {
+    data: ObjectDataTableAdapter;
+
+    constructor() {
+        this.data = new ObjectDataTableAdapter(
+            // data
+            [
+                {id: 1, name: 'Name 1'},
+                {id: 2, name: 'Name 2'}
+            ],
+            // columns
+            [
+                {
+                    type: 'text',
+                    key: 'id',
+                    title: 'Id',
+                    sortable: true
+                },
+                {
+                    type: 'text',
+                    key: 'name',
+                    title: 'Name',
+                    cssClass: 'full-width',
+                    sortable: true
+                }
+            ]
+        );
+    }
+}
+```
+
+```html
+<adf-datatable 
+    [data]="data">
+</adf-datatable>
+```
+
+You can also set rows and HTML-based schema declaration like shown below:
+
+```ts
+import { ObjectDataTableAdapter }  from '@alfresco/adf-core';
+
+@Component({...})
+export class DataTableDemo {
+    data: ObjectDataTableAdapter;
+
+    constructor() {
+        this.data = new ObjectDataTableAdapter(
+            // data
+            [
+                {id: 1, name: 'Name 1'},
+                {id: 2, name: 'Name 2'}
+            ],
+            []
+        );
+    }
+}
+```
 
 ```html
 <adf-datatable [data]="data">
@@ -94,37 +159,96 @@ You can also use HTML-based schema declaration like shown below:
 </adf-datatable>
 ```
 
+You can also set rows to the ObjectDataTableAdapter and set columns as an input like shown below :
+
 ```ts
 import { ObjectDataTableAdapter }  from '@alfresco/adf-core';
 
 @Component({...})
 export class DataTableDemo {
     data: ObjectDataTableAdapter;
+    schema: any;
 
     constructor() {
         this.data = new ObjectDataTableAdapter(
             // data
+            [
+                {id: 1, name: 'Name 1'},
+                {id: 2, name: 'Name 2'}
+            ],
+            []
+        );
+        // columns
+        this.schema =
             [
                 { 
-                    id: 1, 
+                    type: 'text', 
-                    name: 'Name 1', 
+                    key: 'id', 
-                    createdBy : { name: 'user'}, 
+                    title: 'Id', 
-                    createdOn: 123, 
+                    sortable: true 
-                    icon: 'http://example.com/img.png'
                 },
                 {
-                    id: 2, 
+                    type: 'text', 
-                    name: 'Name 2', 
+                    key: 'name', 
-                    createdBy : { name: 'user 2'}, 
+                    title: 'Name', 
-                    createdOn: 123, 
+                    sortable: true
-                    icon: 'http://example.com/img.png'
                 }
-            ]
+            ];
-        );
     }
 }
 ```
 
+```html
+<adf-datatable
+    [data]="data"
+    [columns]="schema">
+</adf-datatable>
+```
+
+You can also set rows and columns through inputs as shown below :
+
+```ts
+import { ObjectDataTableAdapter }  from '@alfresco/adf-core';
+
+@Component({...})
+export class DataTableDemo {
+    rows: any;
+    schema: any;
+
+    constructor() {
+        // data
+        this.rows =
+            [
+                {id: 1, name: 'Name 1'},
+                {id: 2, name: 'Name 2'}
+            ];
+        // columns
+        this.schema =
+            [
+                { 
+                    type: 'text', 
+                    key: 'id', 
+                    title: 'Id', 
+                    sortable: true 
+                },
+                {
+                    type: 'text', 
+                    key: 'name', 
+                    title: 'Name', 
+                    sortable: true
+                }
+            ];
+    }
+}
+```
+
+```html
+<adf-datatable
+    [rows]="rows"
+    [columns]="schema">
+</adf-datatable>
+```
+
 ## Class members
 
 ### Properties
@@ -134,6 +258,7 @@ export class DataTableDemo {
 | actions | `boolean` | false | Toggles the data actions column. |
 | actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
 | allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](upload.directive.md) for further details). |
+| columns | `any[]` | `[]` | The columns that the datatable will show.  |
 | contextMenu | `boolean` | false | Toggles custom context menu for the component. |
 | data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) |  | Data source for the table |
 | display | `string` |  [`DisplayMode`](../../lib/core/datatable/components/datatable/datatable.component.ts).List | Selects the display mode of the table. Can be "list" or "gallery". |
@@ -145,8 +270,8 @@ export class DataTableDemo {
 | rowStyleClass | `string` | "" | The CSS class to apply to every row. |
 | rows | `any[]` |  \[] | The rows that the datatable will show. |
 | selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
+| selectFirstRow | `boolean` | `true` | Toggles the first row selection. |
 | showHeader | `boolean` | true | Toggles the header. |
-| sorting | `any[]` | `[]` | Define the sorting order of the datatable. Possible values are : [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`] |
 
 ### Events
 

docs/process-services/task-list.component.md

@@ -44,7 +44,7 @@ Renders a list containing all the tasks matched by the parameters specified.
 | -- | -- | -- | -- |
 | appId | `number` |  | The id of the app. |
 | assignment | `string` |  | The assignment of the process. Possible values are: "assignee" (the current user is the assignee), candidate (the current user is a task candidate", "group_x" (the task is assigned to a group where the current user is a member, no value(the current user is involved). |
-| data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) |  | Data source object that represents the number and the type of the columns that you want to show. |
+| data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) |  | Data source object that represents the number and the type of the columns that you want to show.  **Deprecated:** in 2.4.0 |
 | landingTaskId | `string` |  | Define which task id should be selected after reloading. If the task id doesn't exist or nothing is passed then the first task will be selected. |
 | multiselect | `boolean` | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
 | name | `string` |  | Name of the tasklist. |
@@ -54,7 +54,7 @@ Renders a list containing all the tasks matched by the parameters specified.
 | processInstanceId | `string` |  | The Instance Id of the process. |
 | selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
 | size | `number` |  [`PaginationComponent`](../core/pagination.component.md).DEFAULT_PAGINATION.maxItems | The number of tasks to fetch. Default value: 25. |
-| sort | `string` |  | Define the sort order of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
+| sort | `string` |  | Define the sort order of the tasks. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
 | state | `string` |  | Current state of the process. Possible values are: `completed`, `active`. |
 
 ### Events
@@ -73,41 +73,7 @@ renders details of any chosen instance.
 
 ### Setting the column schema
 
-You can pass a [DataTableAdapter instance](../core/datatable-adapter.interface.md)
+You can use an HTML-based schema declaration to set a column schema for the tasklist as shown below :
-to set a column schema for the tasklist as shown below :
-
-```ts
-let data = new ObjectDataTableAdapter(
-    // Row data
-    [
-        { id: 1, name: 'Name 1' },
-        { id: 2, name: 'Name 2' }
-    ],
-    // Column schema
-    [
-        { 
-            type: 'text', 
-            key: 'id', 
-            title: 'Id', 
-            sortable: true 
-        },
-        {
-            type: 'text', 
-            key: 'name', 
-            title: 'Name', 
-            sortable: true
-        }
-    ]
-);
-```
-
-```html
-<adf-tasklist
-    [data]="'data'">
-</adf-tasklist>
-```
-
-Alternatively, you can use an HTML-based schema declaration:
 
 ```html
 <adf-tasklist ...>

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -287,6 +287,43 @@ describe('DataTable', () => {
         expect(dataTable.resetSelection).toHaveBeenCalled();
     });
 
+    it('should select first row when selectFirstRow set to true', () => {
+        dataTable.selectFirstRow = true;
+        dataTable.rows = [{ name: 'TEST1' }, { name: 'FAKE2' }, { name: 'TEST2' }, { name: 'FAKE2' }];
+        dataTable.data = new ObjectDataTableAdapter([],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+        fixture.detectChanges();
+        const rows = dataTable.data.getRows();
+        expect(rows[0].isSelected).toBeTruthy();
+        expect(rows[1].isSelected).toBeFalsy();
+        expect(rows[2].isSelected).toBeFalsy();
+    });
+
+    it('should not select first row when selectFirstRow set to false', () => {
+        dataTable.selectFirstRow = false;
+        const dataRows =
+            [
+                { name: 'TEST1' },
+                { name: 'FAKE2' },
+                { name: 'TEST2' },
+                { name: 'FAKE2' }
+            ];
+        dataTable.data = new ObjectDataTableAdapter(dataRows,
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
+        dataTable.ngOnChanges({
+            rows: new SimpleChange(null, dataRows, false)
+        });
+        fixture.detectChanges();
+
+        const rows = dataTable.data.getRows();
+        expect(rows[0].isSelected).toBeFalsy();
+        expect(rows[1].isSelected).toBeFalsy();
+        expect(rows[2].isSelected).toBeFalsy();
+    });
+
     it('should select only one row with [single] selection mode', (done) => {
         dataTable.selectionMode = 'single';
         dataTable.data = new ObjectDataTableAdapter(

lib/core/datatable/components/datatable/datatable.component.ts

@@ -71,6 +71,14 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     @Input()
     sorting: any[] = [];
 
+    /** The columns that the datatable will show. */
+    @Input()
+    columns: any[] = [];
+
+    /* Toggles default selection of the first row */
+    @Input()
+    selectFirstRow: boolean = true;
+
     /** Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode,
      * you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.
      */
@@ -158,8 +166,6 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     private clickObserver: Observer<DataRowEvent>;
     private click$: Observable<DataRowEvent>;
 
-    private schema: DataColumn[] = [];
-
     private differ: any;
     private rowMenuCache: object = {};
 
@@ -293,7 +299,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     }
 
     private initTable() {
-        this.data = new ObjectDataTableAdapter(this.rows, this.schema);
+        this.data = new ObjectDataTableAdapter(this.rows, this.columns);
         this.setupData(this.data);
         this.rowMenuCache = {};
     }
@@ -323,16 +329,32 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
                 this.resetSelection();
             }
             this.data.setRows(this.convertToRowsData(rows));
+            this.selectFirst();
+        }
+    }
+
+    private selectFirst() {
+        if (this.selectFirstRow) {
+            if (this.data && this.data.getRows().length > 0) {
+                let row = this.data.getRows()[0];
+                row.isSelected = true;
+                this.data.selectedRow = row;
+            }
         }
     }
 
     private setTableSchema() {
-        if (this.columnList && this.columnList.columns) {
+        let schema = [];
-            this.schema = this.columnList.columns.map(c => <DataColumn> c);
+        if (!this.columns || this.columns.length === 0) {
+            schema = this.getSchemaFromHtml();
+        } else {
+            schema = this.columns.concat(this.getSchemaFromHtml());
         }
 
-        if (this.data && this.schema && this.schema.length > 0) {
+        this.columns = schema;
-            this.data.setColumns(this.schema);
+
+        if (this.data && this.columns && this.columns.length > 0) {
+            this.data.setColumns(this.columns);
         }
     }
 
@@ -342,6 +364,14 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
         }
     }
 
+    public getSchemaFromHtml(): any {
+        let schema = [];
+        if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
+            schema = this.columnList.columns.map(c => <DataColumn> c);
+        }
+        return schema;
+    }
+
     onRowClick(row: DataRow, e: MouseEvent) {
         if (e) {
             e.preventDefault();

lib/core/datatable/data/data-table.schema.ts

@@ -0,0 +1,80 @@
+/*!
+ * @license
+ * Copyright 2016 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 { ContentChild, Input } from '@angular/core';
+import { AppConfigService } from '../../app-config/app-config.service';
+import { DataColumnListComponent } from '../../data-column/data-column-list.component';
+import { DataColumn } from './data-column.model';
+import { ObjectDataColumn } from './object-datacolumn.model';
+
+export abstract class DataTableSchema {
+
+    @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
+
+    /** Custom preset column schema in JSON format. */
+    @Input()
+    presetColumn: string;
+
+    columns: any;
+
+    private layoutPresets = {};
+
+    constructor(private appConfigService: AppConfigService,
+                protected presetKey: string,
+                protected presetsModel: any) { }
+
+    public createDatatableSchema(): void {
+        this.loadLayoutPresets();
+        if (!this.columns || this.columns.length === 0) {
+            this.columns = this.mergeJsonAndHtmlSchema();
+        }
+    }
+
+    public loadLayoutPresets(): void {
+        const externalSettings = this.appConfigService.get(this.presetKey, null);
+        if (externalSettings) {
+            this.layoutPresets = Object.assign({}, this.presetsModel, externalSettings);
+        } else {
+            this.layoutPresets = this.presetsModel;
+        }
+    }
+
+    public mergeJsonAndHtmlSchema(): any {
+        let customSchemaColumns = [];
+        customSchemaColumns = this.getSchemaFromConfig(this.presetColumn).concat(this.getSchemaFromHtml(this.columnList));
+        if (customSchemaColumns.length === 0) {
+            customSchemaColumns = this.getDefaultLayoutPreset();
+        }
+        return customSchemaColumns;
+    }
+
+    public getSchemaFromHtml(columnList: DataColumnListComponent): any {
+        let schema = [];
+        if (columnList && columnList.columns && columnList.columns.length > 0) {
+            schema = columnList.columns.map(c => <DataColumn> c);
+        }
+        return schema;
+    }
+
+   public getSchemaFromConfig(presetColoumn: string): DataColumn[] {
+        return presetColoumn ? (this.layoutPresets[presetColoumn]).map(col => new ObjectDataColumn(col)) : [];
+    }
+
+    private getDefaultLayoutPreset(): DataColumn[] {
+        return (this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
+    }
+}

lib/core/datatable/public-api.ts

@@ -35,6 +35,7 @@ export * from './components/datatable/date-cell.component';
 export * from './components/datatable/empty-list.component';
 export * from './components/datatable/filesize-cell.component';
 export * from './components/datatable/location-cell.component';
+export * from './data/data-table.schema';
 
 export * from './directives/loading-template.directive';
 export * from './directives/no-content-template.directive';

lib/process-services/mock/public-api.ts

@@ -23,4 +23,5 @@ export * from './process/process.model.mock';
 export * from './task/start-task.mock';
 export * from './task/task-details.mock';
 export * from './task/task-details.component.mock';
+export * from './task/task-list.mock';
 export * from './task/tasklist-service.mock';

lib/process-services/mock/task/task-list.mock.ts

@@ -0,0 +1,97 @@
+/*!
+ * @license
+ * Copyright 2016 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 { ObjectDataColumn } from '@alfresco/adf-core';
+
+export let fakeGlobalTask = {
+    size: 2,
+    start: 0,
+    total: 2,
+    data: [
+        {
+            id: 14, name: 'nameFake1',
+            description: 'descriptionFake1',
+            category: 'categoryFake1',
+            assignee: {
+                id: 2, firstName: 'firstNameFake1', lastName: 'lastNameFake1', email: 'emailFake1'
+            },
+            created: '2017-03-01T12:25:17.189+0000',
+            dueDate: '2017-04-02T12:25:17.189+0000',
+            endDate: '2017-05-03T12:25:31.129+0000',
+            duration: 13940,
+            priority: 50,
+            parentTaskId: 1,
+            parentTaskName: 'parentTaskNameFake',
+            processInstanceId: 2511,
+            processInstanceName: 'processInstanceNameFake',
+            processDefinitionId: 'myprocess:1:4',
+            processDefinitionName: 'processDefinitionNameFake',
+            processDefinitionDescription: 'processDefinitionDescriptionFake',
+            processDefinitionKey: 'myprocess',
+            processDefinitionCategory: 'http://www.activiti.org/processdef',
+            processDefinitionVersion: 1,
+            processDefinitionDeploymentId: '1',
+            formKey: 1,
+            processInstanceStartUserId: null,
+            initiatorCanCompleteTask: false,
+            adhocTaskCanBeReassigned: false,
+            taskDefinitionKey: 'sid-B6813AF5-8ACD-4481-A4D5-8BAAD1CB1416',
+            executionId: 2511,
+            memberOfCandidateGroup: false,
+            memberOfCandidateUsers: false,
+            managerOfCandidateGroup: false
+        },
+
+        {
+            id: 2, name: '', description: 'descriptionFake2', category: null,
+            assignee: {
+                id: 1, firstName: 'fistNameFake2', lastName: 'Administrator2', email: 'admin'
+            },
+            created: '2017-03-01T12:25:17.189+0000',
+            dueDate: '2017-04-02T12:25:17.189+0000',
+            endDate: null
+        }
+    ]
+};
+
+export let fakeCutomSchema =
+    [
+        new ObjectDataColumn({
+            'key': 'fakeName',
+            'type': 'text',
+            'title': 'ADF_TASK_LIST.PROPERTIES.FAKE',
+            'sortable': true
+        }),
+        new ObjectDataColumn({
+            'key': 'fakeTaskName',
+            'type': 'text',
+            'title': 'ADF_TASK_LIST.PROPERTIES.TASK_FAKE',
+            'sortable': true
+        })
+    ];
+
+export let fakeColumnSchema = {
+    'default': [
+        {
+            'key': 'name',
+            'type': 'text',
+            'title': 'ADF_TASK_LIST.PROPERTIES.NAME',
+            'sortable': true
+        }
+    ]
+    , fakeCutomSchema
+};

lib/process-services/task-list/components/task-list.component.html

@@ -2,8 +2,11 @@
 <ng-container *ngIf="requestNode">
         <adf-datatable
             [data]="data"
+            [rows]="rows"
+            [columns]="columns"
             [sorting]="dataSort"
             [loading]="isLoading"
+            [selectFirstRow]="selectFirstRow"
             [multiselect]="multiselect"
             [selectionMode]="selectionMode"
             (row-select)="onRowSelect($event)"

lib/process-services/task-list/components/task-list.component.spec.ts

@@ -19,106 +19,15 @@ import { Component, SimpleChange, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from '@ang
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { AppConfigService, setupTestBed, CoreModule } from '@alfresco/adf-core';
-import { DataRowEvent, ObjectDataRow, ObjectDataTableAdapter } from '@alfresco/adf-core';
+import { DataRowEvent, ObjectDataRow } from '@alfresco/adf-core';
 import { TaskListService } from '../services/tasklist.service';
 import { TaskListComponent } from './task-list.component';
 import { ProcessTestingModule } from '../../testing/process.testing.module';
+import { fakeGlobalTask, fakeCutomSchema } from '../../mock';
 
 declare let jasmine: any;
 
 describe('TaskListComponent', () => {
-
-    let fakeGlobalTask = {
-        size: 2,
-        start: 0,
-        total: 2,
-        data: [
-            {
-                id: 14, name: 'nameFake1',
-                description: 'descriptionFake1',
-                category: 'categoryFake1',
-                assignee: {
-                    id: 2, firstName: 'firstNameFake1', lastName: 'lastNameFake1', email: 'emailFake1'
-                },
-                created: '2017-03-01T12:25:17.189+0000',
-                dueDate: '2017-04-02T12:25:17.189+0000',
-                endDate: '2017-05-03T12:25:31.129+0000',
-                duration: 13940,
-                priority: 50,
-                parentTaskId: 1,
-                parentTaskName: 'parentTaskNameFake',
-                processInstanceId: 2511,
-                processInstanceName: 'processInstanceNameFake',
-                processDefinitionId: 'myprocess:1:4',
-                processDefinitionName: 'processDefinitionNameFake',
-                processDefinitionDescription: 'processDefinitionDescriptionFake',
-                processDefinitionKey: 'myprocess',
-                processDefinitionCategory: 'http://www.activiti.org/processdef',
-                processDefinitionVersion: 1,
-                processDefinitionDeploymentId: '1',
-                formKey: 1,
-                processInstanceStartUserId: null,
-                initiatorCanCompleteTask: false,
-                adhocTaskCanBeReassigned: false,
-                taskDefinitionKey: 'sid-B6813AF5-8ACD-4481-A4D5-8BAAD1CB1416',
-                executionId: 2511,
-                memberOfCandidateGroup: false,
-                memberOfCandidateUsers: false,
-                managerOfCandidateGroup: false
-            },
-
-            {
-                id: 2, name: '', description: 'descriptionFake2', category: null,
-                assignee: {
-                    id: 1, firstName: 'fistNameFake2', lastName: 'Administrator2', email: 'admin'
-                },
-                created: '2017-03-01T12:25:17.189+0000',
-                dueDate: '2017-04-02T12:25:17.189+0000',
-                endDate: null
-            }
-        ]
-    };
-
-    let fakeCutomSchema = [
-            {
-                'key': 'fakeName',
-                'type': 'text',
-                'title': 'ADF_TASK_LIST.PROPERTIES.FAKE',
-                'sortable': true
-            },
-            {
-                'key': 'fakeTaskName',
-                'type': 'text',
-                'title': 'ADF_TASK_LIST.PROPERTIES.TASK_FAKE',
-                'sortable': true
-            }
-        ];
-
-    let fakeColumnSchema = {
-        'default': [
-                {
-                    'key': 'name',
-                    'type': 'text',
-                    'title': 'ADF_TASK_LIST.PROPERTIES.NAME',
-                    'sortable': true
-                },
-                {
-                    'key': 'created',
-                    'type': 'text',
-                    'title': 'ADF_TASK_LIST.PROPERTIES.CREATED',
-                    'cssClass': 'hidden',
-                    'sortable': true
-                },
-                {
-                    'key': 'assignee',
-                    'type': 'text',
-                    'title': 'ADF_TASK_LIST.PROPERTIES.ASSIGNEE',
-                    'cssClass': 'hidden',
-                    'sortable': true
-                }
-            ]
-        , fakeCutomSchema };
-
     let component: TaskListComponent;
     let fixture: ComponentFixture<TaskListComponent>;
     let appConfig: AppConfigService;
@@ -155,8 +64,7 @@ describe('TaskListComponent', () => {
                     ]
                 }
             }
-        }
+        });
-    );
 
     });
 
@@ -170,39 +78,27 @@ describe('TaskListComponent', () => {
 
     it('should use the default schemaColumn as default', () => {
         component.ngAfterContentInit();
-        expect(component.data.getColumns()).toBeDefined();
+        expect(component.columns).toBeDefined();
-        expect(component.data.getColumns().length).toEqual(3);
+        expect(component.columns.length).toEqual(3);
-    });
-
-    it('should use the schemaColumn passed in input', () => {
-        component.data = new ObjectDataTableAdapter(
-            [],
-            [
-                {type: 'text', key: 'fake-id', title: 'Name'}
-            ]
-        );
-
-        component.ngAfterContentInit();
-        expect(component.data.getColumns()).toBeDefined();
-        expect(component.data.getColumns().length).toEqual(1);
     });
 
     it('should use the custom schemaColumn from app.config.json', () => {
+        component.presetColumn = 'fakeCutomSchema';
         component.ngAfterContentInit();
         fixture.detectChanges();
-        expect(component.layoutPresets).toEqual(fakeColumnSchema);
+        expect(component.columns).toEqual(fakeCutomSchema);
     });
 
     it('should fetch custom schemaColumn when the input presetColumn is defined', () => {
         component.presetColumn = 'fakeCutomSchema';
         fixture.detectChanges();
-        expect(component.data.getColumns()).toBeDefined();
+        expect(component.columns).toBeDefined();
-        expect(component.data.getColumns().length).toEqual(2);
+        expect(component.columns.length).toEqual(2);
     });
 
     it('should return an empty task list when no input parameters are passed', () => {
         component.ngAfterContentInit();
-        expect(component.data).toBeDefined();
+        expect(component.rows).toBeDefined();
         expect(component.isListEmpty()).toBeTruthy();
     });
 
@@ -213,34 +109,34 @@ describe('TaskListComponent', () => {
 
         component.success.subscribe((res) => {
             expect(res).toBeDefined();
-            expect(component.data).toBeDefined();
+            expect(component.rows).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
-            expect(component.data.getRows().length).toEqual(2);
+            expect(component.rows.length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1');
+            expect(component.rows[0]['name']).toEqual('nameFake1');
-            expect(component.data.getRows()[0].getValue('description')).toEqual('descriptionFake1');
+            expect(component.rows[0]['description']).toEqual('descriptionFake1');
-            expect(component.data.getRows()[0].getValue('category')).toEqual('categoryFake1');
+            expect(component.rows[0]['category']).toEqual('categoryFake1');
-            expect(component.data.getRows()[0].getValue('assignee').id).toEqual(2);
+            expect(component.rows[0]['assignee'].id).toEqual(2);
-            expect(component.data.getRows()[0].getValue('assignee').firstName).toEqual('firstNameFake1');
+            expect(component.rows[0]['assignee'].firstName).toEqual('firstNameFake1');
-            expect(component.data.getRows()[0].getValue('assignee').lastName).toEqual('lastNameFake1');
+            expect(component.rows[0]['assignee'].lastName).toEqual('lastNameFake1');
-            expect(component.data.getRows()[0].getValue('assignee').email).toEqual('emailFake1');
+            expect(component.rows[0][('assignee')].email).toEqual('emailFake1');
-            expect(component.data.getRows()[0].getValue('created')).toEqual('2017-03-01T12:25:17.189+0000');
+            expect(component.rows[0]['created']).toEqual('2017-03-01T12:25:17.189+0000');
-            expect(component.data.getRows()[0].getValue('dueDate')).toEqual('2017-04-02T12:25:17.189+0000');
+            expect(component.rows[0]['dueDate']).toEqual('2017-04-02T12:25:17.189+0000');
-            expect(component.data.getRows()[0].getValue('endDate')).toEqual('2017-05-03T12:25:31.129+0000');
+            expect(component.rows[0]['endDate']).toEqual('2017-05-03T12:25:31.129+0000');
-            expect(component.data.getRows()[0].getValue('duration')).toEqual(13940);
+            expect(component.rows[0]['duration']).toEqual(13940);
-            expect(component.data.getRows()[0].getValue('priority')).toEqual(50);
+            expect(component.rows[0]['priority']).toEqual(50);
-            expect(component.data.getRows()[0].getValue('parentTaskId')).toEqual(1);
+            expect(component.rows[0]['parentTaskId']).toEqual(1);
-            expect(component.data.getRows()[0].getValue('parentTaskName')).toEqual('parentTaskNameFake');
+            expect(component.rows[0]['parentTaskName']).toEqual('parentTaskNameFake');
-            expect(component.data.getRows()[0].getValue('processInstanceId')).toEqual(2511);
+            expect(component.rows[0]['processInstanceId']).toEqual(2511);
-            expect(component.data.getRows()[0].getValue('processInstanceName')).toEqual('processInstanceNameFake');
+            expect(component.rows[0]['processInstanceName']).toEqual('processInstanceNameFake');
-            expect(component.data.getRows()[0].getValue('processDefinitionId')).toEqual('myprocess:1:4');
+            expect(component.rows[0]['processDefinitionId']).toEqual('myprocess:1:4');
-            expect(component.data.getRows()[0].getValue('processDefinitionName')).toEqual('processDefinitionNameFake');
+            expect(component.rows[0]['processDefinitionName']).toEqual('processDefinitionNameFake');
-            expect(component.data.getRows()[0].getValue('processDefinitionDescription')).toEqual('processDefinitionDescriptionFake');
+            expect(component.rows[0]['processDefinitionDescription']).toEqual('processDefinitionDescriptionFake');
-            expect(component.data.getRows()[0].getValue('processDefinitionKey')).toEqual('myprocess');
+            expect(component.rows[0]['processDefinitionKey']).toEqual('myprocess');
-            expect(component.data.getRows()[0].getValue('processDefinitionCategory')).toEqual('http://www.activiti.org/processdef');
+            expect(component.rows[0]['processDefinitionCategory']).toEqual('http://www.activiti.org/processdef');
             done();
         });
         component.ngAfterContentInit();
-        component.ngOnChanges({'state': state, 'processDefinitionKey': processDefinitionKey, 'assignment': assignment});
+        component.ngOnChanges({ 'state': state, 'processDefinitionKey': processDefinitionKey, 'assignment': assignment });
         fixture.detectChanges();
 
         jasmine.Ajax.requests.mostRecent().respondWith({
@@ -257,15 +153,15 @@ describe('TaskListComponent', () => {
 
         component.success.subscribe((res) => {
             expect(res).toBeDefined();
-            expect(component.data).toBeDefined();
+            expect(component.rows).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
-            expect(component.data.getRows().length).toEqual(2);
+            expect(component.rows.length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1');
+            expect(component.rows[0]['name']).toEqual('nameFake1');
             done();
         });
 
         component.ngAfterContentInit();
-        component.ngOnChanges({'state': state, 'processDefinitionKey': processDefinitionKey, 'assignment': assignment});
+        component.ngOnChanges({ 'state': state, 'processDefinitionKey': processDefinitionKey, 'assignment': assignment });
         fixture.detectChanges();
 
         jasmine.Ajax.requests.mostRecent().respondWith({
@@ -282,16 +178,16 @@ describe('TaskListComponent', () => {
 
         component.success.subscribe((res) => {
             expect(res).toBeDefined();
-            expect(component.data).toBeDefined();
+            expect(component.rows).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
-            expect(component.data.getRows().length).toEqual(2);
+            expect(component.rows.length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1');
+            expect(component.rows[0]['name']).toEqual('nameFake1');
-            expect(component.data.getRows()[0].getValue('processInstanceId')).toEqual(2511);
+            expect(component.rows[0]['processInstanceId']).toEqual(2511);
             done();
         });
 
         component.ngAfterContentInit();
-        component.ngOnChanges({'state': state, 'processInstanceId': processInstanceId, 'assignment': assignment});
+        component.ngOnChanges({ 'state': state, 'processInstanceId': processInstanceId, 'assignment': assignment });
         fixture.detectChanges();
 
         jasmine.Ajax.requests.mostRecent().respondWith({
@@ -307,19 +203,19 @@ describe('TaskListComponent', () => {
 
         component.success.subscribe((res) => {
             expect(res).toBeDefined();
-            expect(component.data).toBeDefined();
+            expect(component.rows).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
-            expect(component.data.getRows().length).toEqual(2);
+            expect(component.rows.length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1');
+            expect(component.rows[0]['name']).toEqual('nameFake1');
-            expect(component.data.getRows()[0].getValue('processInstanceId')).toEqual(2511);
+            expect(component.rows[0]['processInstanceId']).toEqual(2511);
-            expect(component.data.getRows()[0].getValue('endDate')).toBeDefined();
+            expect(component.rows[0]['endDate']).toBeDefined();
-            expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
+            expect(component.rows[1]['name']).toEqual('No name');
-            expect(component.data.getRows()[1].getValue('endDate')).toBeNull();
+            expect(component.rows[1]['endDate']).toBeNull();
             done();
         });
 
         component.ngAfterContentInit();
-        component.ngOnChanges({'state': state, 'processInstanceId': processInstanceId});
+        component.ngOnChanges({ 'state': state, 'processInstanceId': processInstanceId });
         fixture.detectChanges();
 
         jasmine.Ajax.requests.mostRecent().respondWith({
@@ -340,24 +236,14 @@ describe('TaskListComponent', () => {
         expect(component.dataSort).toEqual(['fakeKey', 'fakeOrder']);
     });
 
-    it('should return selected true for the selected task', () => {
+    it('should return selected id for the selected task', () => {
-        component.data = new ObjectDataTableAdapter(
+        component.rows = [
-            [
+            { id: '999', name: 'Fake-name' },
-                {id: '999', name: 'Fake-name'},
+            { id: '888', name: 'Fake-name-888' }
-                {id: '888', name: 'Fake-name-888'}
+        ];
-            ],
-            [
-                {type: 'text', key: 'id', title: 'Id'},
-                {type: 'text', key: 'name', title: 'Name'}
-            ]
-        );
         component.selectTask('888');
-        const dataRow = component.data.getRows();
+        expect(component.rows).toBeDefined();
-        expect(dataRow).toBeDefined();
+        expect(component.currentInstanceId).toEqual('888');
-        expect(dataRow[0].getValue('id')).toEqual('999');
-        expect(dataRow[0].isSelected).toEqual(false);
-        expect(dataRow[1].getValue('id')).toEqual('888');
-        expect(dataRow[1].isSelected).toEqual(true);
     });
 
     it('should reload tasks when reload() is called', (done) => {
@@ -366,10 +252,10 @@ describe('TaskListComponent', () => {
         component.ngAfterContentInit();
         component.success.subscribe((res) => {
             expect(res).toBeDefined();
-            expect(component.data).toBeDefined();
+            expect(component.rows).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
-            expect(component.data.getRows().length).toEqual(2);
+            expect(component.rows.length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1');
+            expect(component.rows[0]['name']).toEqual('nameFake1');
             done();
         });
         fixture.detectChanges();
@@ -400,13 +286,7 @@ describe('TaskListComponent', () => {
     describe('component changes', () => {
 
         beforeEach(() => {
-            component.data = new ObjectDataTableAdapter(
+            component.rows = fakeGlobalTask.data;
-                [],
-                [
-                    {type: 'text', key: 'fake-id', title: 'Name'}
-                ]
-            );
-
             fixture.detectChanges();
         });
 
@@ -414,43 +294,24 @@ describe('TaskListComponent', () => {
             spyOn(component, 'reload').and.stub();
             component.currentInstanceId = '999';
 
-            component.data = new ObjectDataTableAdapter(
+            component.rows = [{ id: '999', name: 'Fake-name' }];
-                [
-                    {id: '999', name: 'Fake-name'}
-                ],
-                [
-                    {type: 'text', key: 'id', title: 'Id'},
-                    {type: 'text', key: 'name', title: 'Name'}
-                ]
-            );
-
             const landingTaskId = '999';
             let change = new SimpleChange(null, landingTaskId, true);
             component.ngOnChanges({'landingTaskId': change});
             expect(component.reload).not.toHaveBeenCalled();
-            expect(component.data.getRows().length).toEqual(1);
+            expect(component.rows.length).toEqual(1);
         });
 
         it('should reload the tasks if the loadingTaskId is different from the current task', (done) => {
             component.currentInstanceId = '999';
-
+            component.rows = [{ id: '999', name: 'Fake-name' }];
-            component.data = new ObjectDataTableAdapter(
-                [
-                    {id: '999', name: 'Fake-name'}
-                ],
-                [
-                    {type: 'text', key: 'id', title: 'Id'},
-                    {type: 'text', key: 'name', title: 'Name'}
-                ]
-            );
-
             const landingTaskId = '888';
             let change = new SimpleChange(null, landingTaskId, true);
 
             component.success.subscribe((res) => {
                 expect(res).toBeDefined();
-                expect(component.data).toBeDefined();
+                expect(component.rows).toBeDefined();
-                expect(component.data.getRows().length).toEqual(2);
+                expect(component.rows.length).toEqual(2);
                 done();
             });
 
@@ -463,9 +324,10 @@ describe('TaskListComponent', () => {
             });
         });
 
-        it('should NOT reload the process list when no parameters changed', () => {
+        it('should NOT reload the task list when no parameters changed', () => {
-            expect(component.isListEmpty()).toBeTruthy();
+            component.rows = null;
             component.ngOnChanges({});
+            fixture.detectChanges();
             expect(component.isListEmpty()).toBeTruthy();
         });
 
@@ -475,13 +337,13 @@ describe('TaskListComponent', () => {
 
             component.success.subscribe((res) => {
                 expect(res).toBeDefined();
-                expect(component.data).toBeDefined();
+                expect(component.rows).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
-                expect(component.data.getRows().length).toEqual(2);
+                expect(component.rows.length).toEqual(2);
-                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
+                expect(component.rows[1]['name']).toEqual('No name');
                 done();
             });
-            component.ngOnChanges({'appId': change});
+            component.ngOnChanges({ 'appId': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -496,14 +358,14 @@ describe('TaskListComponent', () => {
 
             component.success.subscribe((res) => {
                 expect(res).toBeDefined();
-                expect(component.data).toBeDefined();
+                expect(component.rows).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
-                expect(component.data.getRows().length).toEqual(2);
+                expect(component.rows.length).toEqual(2);
-                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
+                expect(component.rows[1]['name']).toEqual('No name');
                 done();
             });
 
-            component.ngOnChanges({'processDefinitionKey': change});
+            component.ngOnChanges({ 'processDefinitionKey': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -518,14 +380,14 @@ describe('TaskListComponent', () => {
 
             component.success.subscribe((res) => {
                 expect(res).toBeDefined();
-                expect(component.data).toBeDefined();
+                expect(component.rows).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
-                expect(component.data.getRows().length).toEqual(2);
+                expect(component.rows.length).toEqual(2);
-                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
+                expect(component.rows[1]['name']).toEqual('No name');
                 done();
             });
 
-            component.ngOnChanges({'state': change});
+            component.ngOnChanges({ 'state': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -540,14 +402,14 @@ describe('TaskListComponent', () => {
 
             component.success.subscribe((res) => {
                 expect(res).toBeDefined();
-                expect(component.data).toBeDefined();
+                expect(component.rows).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
-                expect(component.data.getRows().length).toEqual(2);
+                expect(component.rows.length).toEqual(2);
-                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
+                expect(component.rows[1]['name']).toEqual('No name');
                 done();
             });
 
-            component.ngOnChanges({'sort': change});
+            component.ngOnChanges({ 'sort': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -562,14 +424,14 @@ describe('TaskListComponent', () => {
 
             component.success.subscribe((res) => {
                 expect(res).toBeDefined();
-                expect(component.data).toBeDefined();
+                expect(component.rows).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
-                expect(component.data.getRows().length).toEqual(2);
+                expect(component.rows.length).toEqual(2);
-                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
+                expect(component.rows[1]['name']).toEqual('No name');
                 done();
             });
 
-            component.ngOnChanges({'name': change});
+            component.ngOnChanges({ 'name': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -584,14 +446,14 @@ describe('TaskListComponent', () => {
 
             component.success.subscribe((res) => {
                 expect(res).toBeDefined();
-                expect(component.data).toBeDefined();
+                expect(component.rows).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
-                expect(component.data.getRows().length).toEqual(2);
+                expect(component.rows.length).toEqual(2);
-                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
+                expect(component.rows[1]['name']).toEqual('No name');
                 done();
             });
 
-            component.ngOnChanges({'assignment': change});
+            component.ngOnChanges({ 'assignment': change });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -645,10 +507,10 @@ describe('CustomTaskListComponent', () => {
 
     it('should fetch custom schemaColumn from html', () => {
         fixture.detectChanges();
-        expect(component.taskList.data.getColumns()).toBeDefined();
+        expect(component.taskList.columnList).toBeDefined();
-        expect(component.taskList.data.getColumns()[0].title).toEqual('ADF_TASK_LIST.PROPERTIES.NAME');
+        expect(component.taskList.columns[0]['title']).toEqual('ADF_TASK_LIST.PROPERTIES.NAME');
-        expect(component.taskList.data.getColumns()[2].title).toEqual('ADF_TASK_LIST.PROPERTIES.CREATED');
+        expect(component.taskList.columns[1]['title']).toEqual('ADF_TASK_LIST.PROPERTIES.CREATED');
-        expect(component.taskList.data.getColumns().length).toEqual(3);
+        expect(component.taskList.columns.length).toEqual(3);
     });
 });
 

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

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { DataColumn, DataRowEvent, DataTableAdapter, ObjectDataColumn,
+import { DataRowEvent, DataTableAdapter, DataTableSchema, EmptyCustomContentDirective } from '@alfresco/adf-core';
-    ObjectDataRow, ObjectDataTableAdapter, EmptyCustomContentDirective } from '@alfresco/adf-core';
 import {
-    AppConfigService, DataColumnListComponent, PaginationComponent, PaginatedComponent,
+    AppConfigService, PaginationComponent, PaginatedComponent,
     UserPreferencesService, UserPreferenceValues, PaginationModel } from '@alfresco/adf-core';
 import {
     AfterContentInit, Component, ContentChild, EventEmitter,
@@ -36,13 +35,14 @@ import { TaskListService } from './../services/tasklist.service';
     templateUrl: './task-list.component.html',
     styleUrls: ['./task-list.component.css']
 })
-export class TaskListComponent implements OnChanges, AfterContentInit, PaginatedComponent {
+export class TaskListComponent extends DataTableSchema implements OnChanges, AfterContentInit, PaginatedComponent {
+
+    static PRESET_KEY = 'adf-task-list.presets';
+
+    @ContentChild(EmptyCustomContentDirective) emptyCustomContent: EmptyCustomContentDirective;
 
     requestNode: TaskQueryRequestRepresentationModel;
 
-    @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
-    @ContentChild(EmptyCustomContentDirective) emptyCustomContent: EmptyCustomContentDirective;
-
     /** The id of the app. */
     @Input()
     appId: number;
@@ -69,7 +69,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
     @Input()
     assignment: string;
 
-    /** Define the sort order of the processes. Possible values are : `created-desc`,
+    /** Define the sort order of the tasks. Possible values are : `created-desc`,
      * `created-asc`, `due-desc`, `due-asc`
      */
     @Input()
@@ -88,6 +88,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
     /** Data source object that represents the number and the type of the columns that
      * you want to show.
      */
+    /** @deprecated 2.4.0 */
     @Input()
     data: DataTableAdapter;
 
@@ -98,14 +99,14 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
     @Input()
     selectionMode: string = 'single'; // none|single|multiple
 
-    /** Custom preset column schema in JSON format. */
-    @Input()
-    presetColumn: string;
-
     /** Toggles multiple row selection, renders checkboxes at the beginning of each row */
     @Input()
     multiselect: boolean = false;
 
+    /* Toggles default selection of the first row */
+    @Input()
+    selectFirstRow: boolean = true;
+
     /** Emitted when a task in the list is clicked */
     @Output()
     rowClick: EventEmitter<string> = new EventEmitter<string>();
@@ -124,7 +125,6 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
 
     currentInstanceId: string;
     selectedInstances: any[];
-    layoutPresets = {};
     pagination: BehaviorSubject<PaginationModel>;
 
     /** The page number of the tasks to fetch. */
@@ -135,6 +135,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
     @Input()
     size: number = PaginationComponent.DEFAULT_PAGINATION.maxItems;
 
+    rows: any[] = [];
     isLoading: boolean = true;
     sorting: any[] = ['created', 'desc'];
 
@@ -148,9 +149,9 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
     hasCustomDataSource: boolean = false;
 
     constructor(private taskListService: TaskListService,
-                private appConfig: AppConfigService,
+                appConfigService: AppConfigService,
                 private userPreferences: UserPreferencesService) {
-
+        super(appConfigService, TaskListComponent.PRESET_KEY, taskPresetsDefaultModel);
         this.userPreferences.select(UserPreferenceValues.PaginationSize).subscribe((pageSize) => {
             this.size = pageSize;
         });
@@ -163,23 +164,20 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
     }
 
     ngAfterContentInit() {
-        this.loadLayoutPresets();
+        this.createDatatableSchema();
-        this.setupSchema();
+        if (this.data && this.data.getColumns().length === 0) {
+            this.data.setColumns(this.columns);
+        }
+
         if (this.appId) {
             this.reload();
         }
     }
 
-    /**
+    setCustomDataSource(rows: any[]): void {
-     * Setup html-based (html definitions) or code behind (data adapter) schema.
+        if (rows) {
-     * If component is assigned with an empty data adater the default schema settings applied.
+            this.rows = rows;
-     */
+            this.hasCustomDataSource = true;
-    setupSchema(): void {
-        let schema = this.getSchema();
-        if (!this.data) {
-            this.data = new ObjectDataTableAdapter([], schema);
-        } else if (this.data.getColumns().length === 0) {
-            this.data.setColumns(schema);
         }
     }
 
@@ -189,13 +187,6 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
         }
     }
 
-    setCustomDataSource(rows: ObjectDataRow[]): void {
-        if (this.data) {
-            this.data.setRows(rows);
-            this.hasCustomDataSource = true;
-        }
-    }
-
     private isPropertyChanged(changes: SimpleChanges): boolean {
         let changed: boolean = true;
 
@@ -217,6 +208,8 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
         if (!this.hasCustomDataSource) {
             this.requestNode = this.createRequestNode();
             this.load(this.requestNode);
+        } else {
+            this.isLoading = false;
         }
     }
 
@@ -224,8 +217,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
         this.isLoading = true;
         this.loadTasksByState().subscribe(
             (tasks) => {
-                let instancesRow = this.createDataRow(tasks.data);
+                this.rows = this.optimizeNames(tasks.data);
-                this.renderInstances(instancesRow);
                 this.selectTask(this.landingTaskId);
                 this.success.emit(tasks);
                 this.isLoading = false;
@@ -247,57 +239,25 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
             : this.taskListService.findTasksByState(this.requestNode);
     }
 
-    /**
-     * Create an array of ObjectDataRow
-     * @param instances
-     */
-    private createDataRow(instances: any[]): ObjectDataRow[] {
-        let instancesRows: ObjectDataRow[] = [];
-        instances.forEach((row) => {
-            instancesRows.push(new ObjectDataRow(row));
-        });
-        return instancesRows;
-    }
-
-    /**
-     * Render the instances list
-     *
-     * @param instances
-     */
-    private renderInstances(instances: any[]) {
-        instances = this.optimizeNames(instances);
-        this.data.setRows(instances);
-    }
-
     /**
      * Select the task given in input if present
      */
     selectTask(taskIdSelected: string): void {
         if (!this.isListEmpty()) {
-            let rows = this.data.getRows();
-            if (rows.length > 0) {
             let dataRow;
             if (taskIdSelected) {
-                    dataRow = rows.find((currentRow: any) => {
+                dataRow = this.rows.find((currentRow: any) => {
-                        return currentRow.getValue('id') === taskIdSelected;
+                    return currentRow['id'] === taskIdSelected;
                 });
-
                 if (!dataRow) {
-                        dataRow = rows[0];
+                    dataRow = this.rows[0];
                 }
             } else {
-                    dataRow = rows[0];
+                dataRow = this.rows[0];
-                }
-
-                this.data.selectedRow = dataRow;
-                dataRow.isSelected = true;
-                this.currentInstanceId = dataRow.getValue('id');
             }
+            this.rows[0] = dataRow;
+            this.currentInstanceId = dataRow['id'];
         } else {
-            if (this.data) {
-                this.data.selectedRow = null;
-            }
-
             this.currentInstanceId = null;
         }
     }
@@ -329,8 +289,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
      * Check if the list is empty
      */
     isListEmpty(): boolean {
-        return this.data === undefined ||
+        return !this.rows || this.rows.length === 0;
-            (this.data && this.data.getRows() && this.data.getRows().length === 0);
     }
 
     onRowClick(item: DataRowEvent) {
@@ -360,12 +319,14 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
      * Optimize name field
      * @param istances
      */
-    private optimizeNames(istances: any[]): any[] {
+    private optimizeNames(instances: any[]): any[] {
-        istances = istances.map(t => {
+        instances = instances.map(t => {
-            t.obj.name = t.obj.name || 'No name';
+            if (!t.name) {
+                t.name = 'No name';
+            }
             return t;
         });
-        return istances;
+        return instances;
     }
 
     private createRequestNode() {
@@ -386,41 +347,6 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
         return new TaskQueryRequestRepresentationModel(requestNode);
     }
 
-    private loadLayoutPresets(): void {
-        const externalSettings = this.appConfig.get('adf-task-list.presets', null);
-
-        if (externalSettings) {
-            this.layoutPresets = Object.assign({}, taskPresetsDefaultModel, externalSettings);
-        } else {
-            this.layoutPresets = taskPresetsDefaultModel;
-        }
-    }
-
-    getSchema(): any {
-        let customSchemaColumns = [];
-        customSchemaColumns = this.getSchemaFromConfig(this.presetColumn).concat(this.getSchemaFromHtml());
-        if (customSchemaColumns.length === 0) {
-            customSchemaColumns = this.getDefaultLayoutPreset();
-        }
-        return customSchemaColumns;
-    }
-
-    getSchemaFromHtml(): any {
-        let schema = [];
-        if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
-            schema = this.columnList.columns.map(c => <DataColumn> c);
-        }
-        return schema;
-    }
-
-    private getSchemaFromConfig(name: string): DataColumn[] {
-        return name ? (this.layoutPresets[name]).map(col => new ObjectDataColumn(col)) : [];
-    }
-
-    private getDefaultLayoutPreset(): DataColumn[] {
-        return (this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
-    }
-
     updatePagination(params: PaginationModel) {
         const needsReload = params.maxItems || params.skipCount;
         this.size = params.maxItems;