4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.

Table - SAP Community

m
m
Products and Technology Groups Partners Topics Events What's New Get Started
u
ni
t
y
SAP Community  Products and Technology  Technology  Technology Blogs by Members
 Bind a Drop Down Dynamically on sap.m.Table

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP
products, technology, and events. Get in the mix!

Blog  What are you looking for today?

Bind a Drop Down Dynamically on sap.m.Table

Srikar
Active Participant

‎2017 Aug 20 8:32 PM

 1 Kudo  8,674

SAP Managed Tags: SAP Fiori, SAPUI5

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.

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 1/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

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.

1 <Table class="sapUiSizeCompact" id="bankTable" updateFinished="on

2 <columns>
3 <Column class="" demandPopin="true" hAlign="Begin" minScreenWidth
4 <header>
5 <Label design="Bold" text="ProductId"/>
6 </header>
7 </Column>
8 <Column class="" demandPopin="true" hAlign="Begin" minScreenWidth
9 <header>
10 <Label design="Bold" text="ProductName"/>
11 </header>
12 </Column>
13 <Column demandPopin="true" hAlign="Begin" minScreenWidth="Tablet"
14 <header>
15 <Label design="Bold" text="Quantity"/>
16 </header>
17 </Column>
18 <Column demandPopin="true" hAlign="Begin" minScreenWidth="Tablet"
19 <header>
20 <Label design="Bold" text="Status"/>
21 </header>
22 </Column>
23 </columns>
24 </Table>

 
https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 2/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

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.

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 3/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

1 //Template for Dropdown

2 var oTemplatePro = new sap.ui.core.ListItem({
3 text: "{ProductMod>name}",
4 key: "{ProductMod>name}"
5 });
6 var oTemplateN = new sap.ui.core.ListItem({
7 text: "{nameMod>name}",
8 key: "{nameMod>name}"
9 });
10
11 var oTemplateQ = new sap.ui.core.ListItem({
12 text: "{Qty>name}",
13 key: "{Qty>name}"
14 });
15
16
17 //Similarly all the templates are taken as above for Dropdown
18
19 //code for Dropdown
20 var oTemplate = new sap.m.ColumnListItem({
21 cells: [
22 new sap.m.Select("", {
23 items: {
24 path: "ProductMod>/",
25 template: oTemplatePc,
26 templateShareable: true
27 }
28 },
29 new sap.m.Select("", {
30 items: {
31 path: "nameMod>/",
32 template: oTemplatePc,
33 templateShareable: true
34 }
35 }),
36 new sap.m.Select("", {
37 items: {
38 path: "QtyMod>/",
39 template: oTemplatePc,
40 templateShareable: true
https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 4/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

41 }
42 }),
43 new sap.m.Text({
44 text: "{Status}"
45 })
46 ]
47 });

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

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 5/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

1 //Table Sample JSON

2 var tabledata = [{
3 "ProNo": "1111",
4 "name": "Cipla",
5 "qty": "20",
6 "Status": "In Progress"
7 }, {
8 "ProNo": "3333",
9 "name": "Cosmetics",
10 "qty": "10",
11 "Status": "Completed"
12 }, {
13 "ProNo": "2222",
14 "name": "Textiles",
15 "qty": "30",
16 "Status": "In Progress"
17 }];
18
19 //Product No Sample JSON
20
21 var ProdData = [{
22 "ProNo": "1111"
23 }, {
24 "ProNo": "2222"
25 }, {
26 "ProNo": "3333"
27 }, {"ProNo": "4444"}];
28
29 //Product Name Sample JSON
30 var ProdName = [{
31 "name": "Cosmetics",
32 "Id1": "1"
33 }, {
34 "name": "Textiles",
35 "Id1": "2"
36 }, {
37 "name": "Handlooms",
38 "Id1": "3"
39 }, {
40 "name": "Cipla",
https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 6/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

41 "Id1": "4"
42 }];
43
44 //Quantity Sample JSON
45 var Quan = [{
46 "qty": "10"
47 }, {
48 "qty": "20"
49 }, {
50 "qty": "30"
51 }, {
52 "qty": "40"
53 }];

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

1 //Binding using JSON Model

2 //Simalarly bind for all the dropdowns
3 var nameModel = new sap.ui.model.json.JSONModel();
4 nameModel.setData(ProdName);
5 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

1 var oTable = that.byId("bankTable");

2 oTable.setModel(new sap.ui.model.json.JSONModel({
3 "ReadSet": tabledata
4 }));
5 var sHash = "/" + "ReadSet";
6 oTable.bindAggregation("items", {
7 path: sHash,
8 template: oTemplate
9 });

This gives us the following output.

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 7/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

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

Use Selected key property for the dropdown

1 new sap.m.Select("", {
2 items: {
3 path: "ProductMod>/",
4 template: oTemplatePc,
5 templateShareable: true
6 },
7 selectedKey: "{ProNo}"
8 })

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

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 8/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

Cheers ...

Thank You all...

Tags:

Bind Table dropdown Sample JSON Binding sap.m.select bind

1 Comment

former_member553641
Explorer


‎2018 Jan 31 7:19 AM

 0 Kudos

Dear Srikar,

I like your post, can you please look into my issue, when I am binding drop down within
the table, my scenario seems little different than you, as I need to bind drop down after
adding the row object,
Please review my post here,
https://answers.sap.com/questions/418155/bind-a-drop-down-on-every-row-added-
dynamically-on.html

Thanks for your time,

Hamdan.

You must be a registered user to add a comment. If you've already registered,

sign in. Otherwise, register and sign in.

Comment

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 9/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

Labels In This Area

"as_written_by_Marian_Zeis" 6 "automatische backups" 1 "Best Practice" 1

"Best Practices" 3 "Bitbucket" 2 "Cloud Connector" 1 "Cloud Development" 2

"CPI" 1 "Data Source Migration" 1 "Define Plan Scenarios" 1

"Integration Challenges" 3 "Live Data Model" 1 "OData" 1 "Patch" 1 "Post" 1

"regelmäßige sicherung" 1 "sap abap"sap program 1 "SAP BI" 3 "SAP BW 7.4" 1

"SAP BW 7.5" 3 "SAP BW" 6 "SAP Sales" 1 "SAP Successfactor" 2

"SAP VARIANT CONFIGURAITION 2 "SAP_BUILD_APPS" 1 "SAPDatasphere" 7

"SSO" 2 "Standard API" 1 "TypeScript" "Development" "FeedBack" 1

"VersionControl" 2 "Workflow" 2 'API' 1 *SAP" 1

-147 Get CurrentUserInfo failed 1 2YM 1 3-TIER Extensibility 3 30 examples 1

505 Technology Updates​53 1 @expertsap 2 @hanasizing 1

@RetroDate_HireDateCorrection 1 @sapcommunity 1 @sapilm @archiving @sapiq 1

@SAPSupport 2 @SCPI 2 @ST06 SAPOSCOL 1

A Comprehensive Guide to Using OLE Objects in SAP ABAP 1 aATP 1 abap 52

ABAP 7.4 3 ABAP API 1 ABAP BAPI BAPI_FIXEDASSET_CREATE1 1 ABAP BTP 2

ABAP CDS VIEW 2 ABAP CDS Views 13 ABAP CDS Views - BW Extraction 3

ABAP CDS Views - CDC (Change Data Capture) 3 ABAP Class 3 ABAP Cloud 11

ABAP Cloud Developer Trial 1 ABAP Cloud Landing Page 1 ABAP Custom 1

ABAP DDIC CDS view 1 ABAP DEVELOPMENT 15 ABAP Development Tools 1

ABAP Editor 2 ABAP Enhancement 1 ABAP Enhancements 1

ABAP Environment & RAP 4 ABAP Extensibility 5 ABAP Extension 1

ABAP for EWM 1 ABAP in Eclipse 3 ABAP Interface 1 ABAP New Syntax 2

ABAP ODATA 2 ABAP on HANA 3 ABAP OOABAP 2 ABAP PLATFORM 1

ABAP Platform Trial 2 ABAP Programming 10 ABAP Push Channels 1

ABAP Query 1 ABAP RAP 6 ABAP RAP custom action 4

ABAP RAP(RESTful Application Programming) 11 ABAP RESTFul API 1

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 10/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

ABAP RESTful Application Programming Model 4 ABAP Reuse 1

ABAP String functions 1 abap technical 1 ABAP test cokpit 1 abap to xml 1

ABAP Trial 2022 AP01 1 abapGit 1 absl 2 Accenture 1 Access Control 1

Access data from datasphere to ADF Azure Data Factory 6

access data from SAP Datasphere directly from Snowflake 1

Related Content
Custom Tile Visualization & Navigation in SAP Build Workzone - Cloud foundry
launchpad: Solved
in Technology Blogs by SAP yesterday

Dynamic Intent Based Navigation

in Technology Q&A Saturday

Exactly once in order (EOIO) for Group messages using Advanced Event Mesh
in Technology Q&A Saturday

SAP Standard API POST vs PATCH

in Technology Blogs by Members Thursday

Material Description in Adobe Form not showing line breaks – All text appearing in
single line
in Technology Q&A Thursday

Popular Blog Posts

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 11/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

SAP PI for Beginners

former_member200339
Participant

 738870  155  389

ABAP 7.40 Quick Reference

jeffrey_towell2
Participant

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 12/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

 1268420  75  345

Difference between SAP S/4HANA :Public Vs Private edition : RISE with SAP

rajarajeswari_kaliyaperum
Active Participant

 211342  48  321

Top Kudoed Authors

MioYasutake  6

dirkfrick  5

Sandra_Rossi  5

Arunagirish1  4

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 13/14
4/28/25, 4:32 PM Bind a Drop Down Dynamically on sap.m.Table - SAP Community

Michał_Biegun  4

PasupuletiVenuGopal  3

Clement  3

Nihal_Nath_Tiwary1  3

BH91976  3

fellipe_mendes  3

View all

Privacy Terms of Use

Copyright Legal Disclosure

Trademark Support

Cookie Preferences
Follow

https://community.sap.com/t5/technology-blogs-by-members/bind-a-drop-down-dynamically-on-sap-m-table/ba-p/13311714 14/14