Skip to Content

Hello All,

A few weeks back I had a requirement where I am dealing an application and the application contains dynamic Javascript where we have dynamic panels generated and Inside the panels we had a sap.m.Table with one row on each table in the panels. On the first row of sap.m.Table contains a column with an add button and using this we can add the rows in each table for each panel. Inside the table, we had another column which is a drop down and their after placing a drop down I have faced binding issues because each row with drop down column should be bound. This became an outstanding issue for me.

Also, this issue is because using ID’s for dropdowns and this made me learn when I was binding dropdowns dynamically with javascript. Using the bindAggregation syntax for drop down  I was not able to achieve the dynamic binding of Dropdowns. So, in that case, I used models and I have achieved binding as below.

I can point you to a sample demo application code where I have explained you with a clear-cut idea. So we have taken an XML view and coded the view to have a table with dropdowns 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>

Below code is for having a table with 4 columns and you can simply copy it and paste it into your SAP UI5 application view. So using this code you are ready for building a table with columns. After creating the columns, we need to switch to the controller part where we will write the code for the column list item in order to have drop downs in the view. So we will place the below code.

Also, you can see the template where we are having 3 dropdowns and a label. Below code is for adding dropdowns with a model name after loading the JSON model.

Therefore, ProductMod nameMod,QtyMod will be the models for the drop downs without Id.

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

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

var oTemplateQ = new sap.ui.core.ListItem({
				text: "{Qty>name}",
				key: "{Qty>name}"
                                });


//Similarly all the templates are taken as above for Dropdown
                                  
        //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}"
	       })
               ]
               });

In order to bind them, we need a sample JSON. So below you can find the sample JSON file code where you can load them into your project structure and load into your controller.

Let us have a 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");

Using the bind Aggregation syntax I was able to bind the Table with dropdowns.

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 dropdown

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

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

Therefore we can have the following output according to the sample JSON data …

So this is how I have resolved the Issue and able to get the drop down. So according to my skillset, I have written to this blog and make others get some knowledge. Feel free to comment and ask questions

Cheers …

Thank You all…

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