[ADF-2326] Process List - Provide a way to support custom html template and static columns at same time. (#2975)

* [ADF-2326] Process List - Provide a way to support custom html template and static columns at same time. * Fixed support custom html template and static columns at same time * Updated process list documentation with recent changes. * * Added testcases for recent changes .
2025-07-24 17:32:15 +00:00 · 2018-02-22 15:03:45 +05:30
parent 9bbdf4331e
commit 9c5be3eb27
4 changed files with 181 additions and 26 deletions
--- a/docs/process-list.component.md
+++ b/docs/process-list.component.md
@@ -46,6 +46,43 @@ define custom schema in the app.config.json as shown below json format.
 </adf-process-instance-list>
 ```

+You can also use both HTML-based and app.config.json custom schema declaration at same time like shown below:
+
+```json
+"adf-process-list": {
+        "presets": {
+            "customSchema": [
+            {
+                    "key": "id",
+                    "type": "text",
+                    "title": "Id",
+                    "sortable": true
+            }],
+            "default": [
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "name",
+                    "sortable": true
+            }],
+        }
+}
+```
+
+```html
+<adf-process-instance-list
+    [appId]="'1'" 
+    [presetColumn]="'customSchema'">
+    <data-columns>
+        <data-column key="key" title="title" class="full-width name-column">
+            <ng-template let-entry="$implicit">
+                    <div>{{getFullName(entry.row.obj.assignee)}}</div>
+            </ng-template>
+        </data-column>
+    </data-columns>
+</adf-process-instance-list>
+```
+
 ### Pagination strategy

 adf-process-instance-list also supports pagination and the same can be used as shown below.
--- a/lib/process-services/process-list/components/process-list.component.spec.ts
+++ b/lib/process-services/process-list/components/process-list.component.spec.ts
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { SimpleChange } from '@angular/core';
+import { Component, SimpleChange, ViewChild } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { MatProgressSpinnerModule } from '@angular/material';
 import { Observable } from 'rxjs/Observable';
@@ -135,7 +135,7 @@ describe('ProcessInstanceListComponent', () => {
    });

    it('should fetch custom schemaColumn when the input presetColumn is defined', () => {
-        component.presetColumn = 'fakeCutomColumns';
+        component.presetColumn = 'fakeCutomSchema';
        component.ngAfterContentInit();
        fixture.detectChanges();
        expect(component.data.getColumns()).toBeDefined();
@@ -483,3 +483,60 @@ describe('ProcessInstanceListComponent', () => {
        });
    });
 });
+
+@Component({
+    template: `
+    <adf-process-instance-list #processlistComponentInstance>
+        <data-columns>
+            <data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
+            <data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.END_DATE" class="hidden"></data-column>
+            <data-column key="startedBy" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="desktop-only dw-dt-col-3 ellipsis-cell">
+                <ng-template let-entry="$implicit">
+                    <div>{{getFullName(entry.row.obj.startedBy)}}</div>
+                </ng-template>
+            </data-column>
+        </data-columns>
+    </adf-process-instance-list>`
+})
+
+class CustomProcessListComponent {
+
+    @ViewChild(ProcessInstanceListComponent)
+    processList: ProcessInstanceListComponent;
+}
+
+describe('CustomProcessListComponent', () => {
+    let fixture: ComponentFixture<CustomProcessListComponent>;
+    let component: CustomProcessListComponent;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                ProcessInstanceListComponent,
+                CustomProcessListComponent
+            ],
+            providers: [
+                ProcessService
+            ],
+            imports: []
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomProcessListComponent);
+        fixture.detectChanges();
+        component = fixture.componentInstance;
+    });
+
+    it('should create instance of CustomProcessListComponent', () => {
+        expect(component instanceof CustomProcessListComponent).toBe(true, 'should create CustomProcessListComponent');
+    });
+
+    it('should fetch custom schemaColumn from html', () => {
+        fixture.detectChanges();
+        expect(component.processList.data.getColumns()).toBeDefined();
+        expect(component.processList.data.getColumns()[1].title).toEqual('ADF_PROCESS_LIST.PROPERTIES.END_DATE');
+        expect(component.processList.data.getColumns()[2].title).toEqual('ADF_PROCESS_LIST.PROPERTIES.CREATED');
+        expect(component.processList.data.getColumns().length).toEqual(3);
+    });
+});
--- a/lib/process-services/process-list/components/process-list.component.ts
+++ b/lib/process-services/process-list/components/process-list.component.ts
@@ -141,20 +141,11 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
     * If component is assigned with an empty data adater the default schema settings applied.
     */
    setupSchema() {
-        let schema: DataColumn[] = [];
-
-        if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
-            schema = this.columnList.columns.map(c => <DataColumn> c);
-        }
-
+        let schema = this.getSchema();
        if (!this.data) {
-            this.data = new ObjectDataTableAdapter([], schema.length > 0 ? schema : this.getLayoutPreset(this.presetColumn));
-        } else {
-            if (schema && schema.length > 0) {
-                this.data.setColumns(schema);
+            this.data = new ObjectDataTableAdapter([], schema);
        } else if (this.data.getColumns().length === 0) {
-                this.presetColumn ? this.setupDefaultColumns(this.presetColumn) : this.setupDefaultColumns();
-            }
+            this.data.setColumns(schema);
        }
    }

@@ -355,13 +346,6 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
        return new ProcessFilterParamRepresentationModel(requestNode);
    }

-    setupDefaultColumns(preset: string = 'default'): void {
-        if (this.data) {
-            const columns = this.getLayoutPreset(preset);
-            this.data.setColumns(columns);
-        }
-    }
-
    private loadLayoutPresets(): void {
        const externalSettings = this.appConfig.get('adf-process-list.presets', null);

@@ -370,11 +354,31 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
        } else {
            this.layoutPresets = processPresetsDefaultModel;
        }
-
    }

-    private getLayoutPreset(name: string = 'default'): DataColumn[] {
-        return (this.layoutPresets[name] || this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
+    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: PaginationQueryParams) {
--- a/lib/process-services/task-list/components/task-list.component.spec.ts
+++ b/lib/process-services/task-list/components/task-list.component.spec.ts
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { SimpleChange } from '@angular/core';
+import { Component, SimpleChange, ViewChild } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MaterialModule } from '../../material.module';
 import { AppConfigService } from '@alfresco/adf-core';
@@ -628,3 +628,60 @@ describe('TaskListComponent', () => {
        });
    });
 });
+
+@Component({
+    template: `
+    <adf-tasklist #taskList>
+        <data-columns>
+            <data-column key="name" title="ADF_TASK_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
+            <data-column key="created" title="ADF_TASK_LIST.PROPERTIES.CREATED" class="hidden"></data-column>
+            <data-column key="startedBy" title="ADF_TASK_LIST.PROPERTIES.CREATED" class="desktop-only dw-dt-col-3 ellipsis-cell">
+                <ng-template let-entry="$implicit">
+                    <div>{{getFullName(entry.row.obj.startedBy)}}</div>
+                </ng-template>
+            </data-column>
+        </data-columns>
+    </adf-tasklist>`
+})
+
+class CustomTaskListComponent {
+
+    @ViewChild(TaskListComponent)
+    taskList: TaskListComponent;
+}
+
+describe('CustomTaskListComponent', () => {
+    let fixture: ComponentFixture<CustomTaskListComponent>;
+    let component: CustomTaskListComponent;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                TaskListComponent,
+                CustomTaskListComponent
+            ],
+            providers: [
+                TaskListService
+            ],
+            imports: []
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomTaskListComponent);
+        fixture.detectChanges();
+        component = fixture.componentInstance;
+    });
+
+    it('should create instance of CustomTaskListComponent', () => {
+        expect(component instanceof CustomTaskListComponent).toBe(true, 'should create CustomTaskListComponent');
+    });
+
+    it('should fetch custom schemaColumn from html', () => {
+        fixture.detectChanges();
+        expect(component.taskList.data.getColumns()).toBeDefined();
+        expect(component.taskList.data.getColumns()[0].title).toEqual('ADF_TASK_LIST.PROPERTIES.NAME');
+        expect(component.taskList.data.getColumns()[2].title).toEqual('ADF_TASK_LIST.PROPERTIES.CREATED');
+        expect(component.taskList.data.getColumns().length).toEqual(3);
+    });
+});