Ajout de colonnes éditables à des tables existantes

Effectuez cette tâche pour activer les colonnes éditables pour les tables existantes. Vous pouvez ensuite utiliser les attributs d'en-tête isEditable, fieldConfig et options dans une table.

Procédure

  1. Déclarer "tokenId": "abctable-custom-service", en parallèle à la propriété headers.
    Par exemple :
    {
        "order-table": { //Add new columns to the outbound order search results table
            "name": "order-table",
            "aliases": [
                "inbound-order-table" //Add the same columns to the inbound order search results table
            ],
            "tokenId": "abctable-custom-service"
            "headers": [
  2. Mettez à jour le fichier app-customization.impl.ts avec le code suivant:
    import { ABCTableCustomEditableFieldsService } from "./services/abctable-custom.service";
        
    export class AppCustomizationImpl {
        static readonly components = [];
    
        static readonly providers = [
            {
                provide: 'abctable-custom-service',
                useClass: ABCTableCustomEditableFieldsService
            }
        ];
    
        static readonly imports = [];
    }
    
  3. Déclarer le nouveau service:
    import { Injectable } from "@angular/core";
    import { BucTableHeaderItem, EditableFieldsInterface } from "@buc/common-components";
    import { OrderlineListTableComponent } from "../../app/features/order/orderline-list-table/orderline-list-table.component"
    
    @Injectable()
    export class ABCTableCustomEditableFieldsService implements EditableFieldsInterface {
    
        tableContext: OrderlineListTableComponent;
    
        initializeTableParentContext(parentContext) {
            //  set the context of the table here. Mandatory method
            this.tableContext = parentContext;
        }
        //processDefaultValueInField(header: BucTableHeaderItem, data: any): void {
            // this is an optional method
            // if the default value is set via the json configuration, this method can be used to update the parent context 
        //}
    
        //getDataForField(header: BucTableHeaderItem, data) {
            // This is an optional method. returns custom data for an editable field. 
            // Example - If the list in dropdown requires further filtering, then this methid can be used to return custom list
        //}
    
        onDropdownSelection(event, data) {
    // logic to update the table data in parent tablecontext
            const key = data.item.key;
            this.tableContext.allTableData.forEach((row) => {
                if (row.key === key) {
                    if (data.headerId === 'lineTypeCustom') {
                     // created a new property lineType to store the selected value
                        row.item.lineType = data.value;
                    }
                }
            });
    
            this.tableContext.tableDataChange.emit(this.tableContext.allTableData);
        }
    
    }
    

Etape suivante

Vous pouvez utiliser les attributs d'en-tête isEditable, fieldConfig et options dans une table. Pour plus d'informations, voir Ajout de colonnes et d'actions à des tables existantes.