Template for SAPUI5 table

Question

I created a template for a table on the controller that consist of some text cells that get oData but also a combo box and checkbox that had its own function, that is pretty lengthy, before creating the template. This template was originally on the XML side but had to move it to the controller side in order to filter the correct oData.

How can I add that function to the checkbox? Also, can I format the date/time to show only month like I had on the xml side?

var oTemplate = new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    text: "{ID}"
                }),

               //this does not work
                new sap.m.CheckBox({
                    select: function(){
                    this.estimatePercentageSelect();
                   }
                }),
                new sap.m.ComboBox({
                    items: [new sap.ui.core.ListItem("cMonth", {
                            text: currentMonthName,
                            key: currentMonthName
                        }),
                        new sap.ui.core.ListItem("month1", {
                            text: monthName1,
                            key: monthName1
                        }),
                        new sap.ui.core.ListItem("month2", {
                            text: monthName2,
                            key: monthName2
                        }),
                        new sap.ui.core.ListItem("month3", {
                            text: monthName3,
                            key: monthName3
                        })
                    ]
                }),
                new sap.m.Text({
                    text: "{INSTALL}"
                }),

                  //this formatting also does not work
                new sap.m.Text({
                    text: "{DATE}"
                        /*,
                        type: "sap.ui.model.type.DateTime", 
                        formatOptions: "{pattern: 'MMM'}" */
                }),
                new sap.m.Text({
                    text: "{DWN}"
                }),
                new sap.m.Text({
                    text: "{EST}"
                }), 
 new sap.m.Text({
                    text: "{PLAN}"
                })
            ]
        });

Rahul Bhardwaj Rahul Bhardwaj · Accepted Answer · 2018-01-23T05:10:29

Below are my feedback for your code :

Checkbox function:

             new sap.m.CheckBox({
                select: function(){
                this.estimatePercentageSelect();
               }
            }),

Here, this object will cause issues as this will refer to your control (the checkbox) and not your controller.

Do this instead:

                 new sap.m.CheckBox({
                    select: [
                    this.estimatePercentageSelect, this
                   ]
                }),

and in your function, get the object to do your checks.

estimatePercentageSelect : function(oEvent) {
    var oSource = oEvent.getSource(); // your clicked checkbox
    var oContext = oSource.getBindingContext().getObject(); // checkbox binding object/context
    console.log(oContext);
}

Date formatter:

Create date object:

var oDateType = new sap.ui.model.type.Date({
        source: {
          pattern: "yyyymmdd"
        },
        style: "MMM"
      });

and then pass it to your control:

new sap.m.Text({
    text: {
        path: "DATE",
        type: oDateType
    }
}),

Let me know if this works for you. Happy to refine code.

Template for SAPUI5 table

1 Answers