Skip to Content

Hello All ,

Few weeks back we had a requirement to have drop down on sap.m.Table . So we have taken an XML view and coded the view to have a table with drop downs and text fields .

Using this code we have created an XML view with columns .

<Table class="sapUiSizeCompact" id="bankTable" updateFinished="onTableUpdate">
<columns>
<Column class="" demandPopin="true" hAlign="Begin" minScreenWidth="Tablet" width="28%">
<header>
<Label design="Bold" text="ProductId"/>
</header>
</Column>
<Column class="" demandPopin="true" hAlign="Begin" minScreenWidth="Tablet" width="14%">
<header>
<Label design="Bold" text="ProductName"/>
</header>
</Column>
<Column demandPopin="true" hAlign="Begin" minScreenWidth="Tablet">
<header>
<Label design="Bold" text="Quantity"/>
</header>
</Column>
<Column demandPopin="true" hAlign="Begin" minScreenWidth="Tablet">
<header>
<Label design="Bold" text="Status"/>
</header>
</Column>
</columns>
</Table>

I have created a template for all the drop downs and text elements .

//Template for Dropdown
var oTemplateBc = new sap.ui.core.ListItem({
				text: "{nameMod>name}",
				key: "{nameMod>name}"
                                });

//Similarly all the templates are taken as above for Drop down
                                  
        //code for Dropdown
	var oTemplate = new sap.m.ColumnListItem({
         cells: [
                new sap.m.Select("", {
	items: {
		path: "ProductMod>/",
	        template: oTemplatePc,
		templateShareable: true
		}
		},
              new sap.m.Select("", {
	items: {
		path: "nameMod>/",
	        template: oTemplatePc,
		templateShareable: true
		}
		}),
               new sap.m.Select("", {
	items: {
		path: "QtyMod>/",
	        template: oTemplatePc,
		templateShareable: true
		}
		}),
               	new sap.m.Text({
		text: "{Status}"
	       })
               ]
               });

Let us have an sample data to bind the drop downs and tables

//Table Sample JSON
 var tabledata = [{
"ProNo": "1111",
"name": "Cipla",
"qty": "20",
"Status": "In Progress"
}, {
"ProNo": "3333",
"name": "Cosmetics",
"qty": "10",
"Status": "Completed"
}, {
"ProNo": "2222",
"name": "Textiles",
"qty": "30",
"Status": "In Progress"
}];

//Product No Sample JSON

var ProdData = [{
"ProNo": "1111"
}, {
"ProNo": "2222"
}, {
"ProNo": "3333"
}, {"ProNo": "4444"}];

//Product Name Sample JSON
var ProdName = [{
"name": "Cosmetics",
"Id1": "1"
}, {
"name": "Textiles",
"Id1": "2"
}, {
"name": "Handlooms",
"Id1": "3"
}, {
"name": "Cipla",
"Id1": "4"
}];

//Quantity Sample JSON
var Quan = [{
"qty": "10"
}, {
"qty": "20"
}, {
"qty": "30"
}, {
"qty": "40"
}]; 

Now let us first bind all the drop down data using the models

//Binding using JSON Model
//Simalarly bind for all the dropdowns
var nameModel = new sap.ui.model.json.JSONModel();
nameModel.setData(ProdName);
that.getView().setModel(nameModel, "nameMod");

Finally bind the table using the following aggregation binding

                        var oTable = that.byId("bankTable");
			oTable.setModel(new sap.ui.model.json.JSONModel({
				"ReadSet": tabledata
			}));
			var sHash = "/" + "ReadSet";
			oTable.bindAggregation("items", {
				path: sHash,
				template: oTemplate
			});

This gives us the following output .

To Avoid the above highlighted issue and bind the drop down data dynamically to each row…

Use Selected key property for the drop down

new sap.m.Select("", {
items: {
path: "ProductMod>/",
template: oTemplatePc,
templateShareable: true
},
selectedKey: "{ProNo}"
})

So all we need to do is have selected key “KeyValue” binded to the drop down

Therefore we can have the ¬†following output according to the sample json data …

Above binding are using JSON models and I truly feel this blog is very helpful to all the SAP UI5 learners . Make ¬†all the syntax’s a note….

Cheer’s …

Thank You all…

Leave a Comment if useful…

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply