SAPUI5 Add new column and value to existing table

Question

I am having a table. However, i need to add new column dynamically to my existing table. I successfully added a new column header in my table, but I failed to add new cells to my current ColumnListItem in my table.

Anyone can help me.

The following is my source code

View.xml

<Table id="customerTable" width="auto" items="{path:'customerJSONData>/',   sorter: {path: 'CUSTOMER_NAME', descending: false} }" 
            growing="true" growingScrollToLoad="true">
            <columns>
                <Column id="nameColumn1">
                    <Text text="Customer ID" id="nameCustomerID"/>
                </Column>
                <Column id="nameColumn2">
                    <Text text="Customer Name" id="nameCustomerName"/>
                </Column>
                <Column id="nameColumn3">
                    <Text text="Address Line 1" id="nameAddress1" /> 
                </Column>
                <Column id="nameColumn4">
                    <Text text="Address Line 2" id="nameAddress2" />
                </Column>
                <Column id="nameColumn5">
                    <Text text="Private Number" id="namePrivateNumber"/>
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <ObjectIdentifier title="{customerJSONData>CUSTOMER_ID}"/>
                        <ObjectIdentifier title="{customerJSONData>CUSTOMER_NAME}"/>
                        <ObjectIdentifier title="{customerJSONData>ADDRESS_LINE_1}"/>
                        <ObjectIdentifier title="{customerJSONData>ADDRESS_LINE_2}"/>
                        <ObjectIdentifier title="{customerJSONData>PRIVATE_NUMBER}"/>
                    </cells>
                </ColumnListItem>
            </items>
        </Table>

Controller.js

extColumnHeader = "idExtHeader" + (i+1).toString();
var ExtColumnHeader = new sap.m.Column(extColumnHeader,{header: new sap.m.Label({text:customer_Ext[i].fieldlabel})});
this.getView().byId("customerTable").addColumn(ExtColumnHeader);

var colItems = this.getView().byId("customerTable").getColumns();
var ExtValue = new sap.m.Text("extColumnBodyId",{text:"ProductID"});
colItems.addCell(ExtValue); 

CustomerJSON

[
   {
        "CUSTOMER_ID" : "C001",
        "CUSTOMER_NAME": "Weng Fong Sdn Bhd",
        "ADDRESS_LINE_1": "Tai Rai Bong",
        "ADDRESS_LINE_2": "Hatyai",
        "PRIVATE_NUMBER" : "10001",
        "EXT_FLDS" : {
            "PRINTING_NUM": {
              "fieldvalue": 12,
              "fieldlabel": "Printing Number",
              "uictrl": "sap.m.Input"
            },
            "COUNTRY": {
              "fieldvalue": "Thailand",
              "fieldlabel": "Country",
              "uictrl": "sap.m.ComboBox"
            }
        }
]

Answer 1

You need to add the new column with binding property

addNewCol: function(oEvent) {
    var oTable = this.byId("customerTable");
    var oCol = new sap.m.Column({
       label: customer_Ext[i].fieldlabel,
       template: "EXT_FLDS/PRINTING_NUM/fieldvalue", //Updated PATH,  Update your binding property from customerJSONData model
    });
    oTable.addColumn(oCol);
}

Existing customerJSONData Model Data

[
    {"CUSTOMER_ID":"200","CUSTOMER_NAME":"RF","ADDRESS_LINE_1":"CV","ADDRESS_LINE_2":"5988","PRIVATE_NUMBER":"YY"},
    {"CUSTOMER_ID":"80","CUSTOMER_NAME":"UG","ADDRESS_LINE_1":"RT","ADDRESS_LINE_2":"878","PRIVATE_NUMBER":"RF"},
    {"CUSTOMER_ID":"789","CUSTOMER_NAME":"GV","ADDRESS_LINE_1":"ED","ADDRESS_LINE_2":"8989","PRIVATE_NUMBER":"FGG"}
]

For adding the new Column the model should have one more property ie newCol here

[
   { "CUSTOMER_ID": "200", "CUSTOMER_NAME": "RF", "ADDRESS_LINE_1": "CV", "ADDRESS_LINE_2": "5988", "PRIVATE_NUMBER": "YY", "EXT_FLDS": { "PRINTING_NUM": { "fieldvalue": 11, "fieldlabel": "Printing Number", "uictrl": "sap.m.Input" }, "COUNTRY": { "fieldvalue": "Thailand", "fieldlabel": "Country", "uictrl": "sap.m.ComboBox" } } },
   { "CUSTOMER_ID": "80", "CUSTOMER_NAME": "UG", "ADDRESS_LINE_1": "RT", "ADDRESS_LINE_2": "878", "PRIVATE_NUMBER": "RF", "EXT_FLDS": { "PRINTING_NUM": { "fieldvalue": 11, "fieldlabel": "Printing Number", "uictrl": "sap.m.Input" }, "COUNTRY": { "fieldvalue": "Thailand", "fieldlabel": "Country", "uictrl": "sap.m.ComboBox" } } },
   { "CUSTOMER_ID": "789", "CUSTOMER_NAME": "GV", "ADDRESS_LINE_1": "ED", "ADDRESS_LINE_2": "8989", "PRIVATE_NUMBER": "FGG", "EXT_FLDS": { "PRINTING_NUM": { "fieldvalue": 11, "fieldlabel": "Printing Number", "uictrl": "sap.m.Input" }, "COUNTRY": { "fieldvalue": "Thailand", "fieldlabel": "Country", "uictrl": "sap.m.ComboBox" } } }
]

Note: Assuming NewProperty exist in the binding customerJSONData model.