SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)

Create Drop Down Input field

Trying anything for the first time is always challenging. Do you remember how many times did you fall off your bike (bicycle) before you learned how to balance and ride it without any help? In the same way learning any new technical area or for that matter any area, there are lots of obstacles. Most ABAPers would also have similar problems when venturing into SAPUI5, especially with no prior Javascript knowledge.

For my first SAPUI5 Application for my current project, there was a requirement to provide a dropdown of Purchase Order numbers to the users. The requirement seemed very straight forward. But you won’t believe, I had to spend more than 18 hours to surf the internet, reading help documents, demo codes/tutorials etc before I could figure out how to bind the dataset to the view element. Believe me, it took more than 18 hours. But I learned what not to do in SAPUI5 in those hours of struggle. 🙂

And at the end, I figured out that not only can I code the javascript commands and get my drop down list but also could achieve the drop down functionality with just Drag and Drop with no custom code.

Today, I would show you two methods to design drop down on your SAPUI5 screen. First with a couple of lines of codes in my view file and view.component file. The second method is my preferred method, just drag, drop and some clicks. And you get the same result as from the first.

I am positive all ABAPers would want to know the second method first. But, I will show you the first method first. 🙂

Assuming, you have been following our posts diligently, you should be comfortable creating OData services in t-code SEGW and re-defining the methods to select and populate EntitySet. Also, you know how to Register the Backend OData service in Gateway system (t-code /iwfnd/maint_service). If you do not know the above steps, please refer to “Create my First OData Service” post.

In SEGW, I created the OData Project ZDROPDOWN with the zponumber as Entity Type and zponumberSet as the Entity Set.

SAPUI5 Training

Since I just wanted to show the PO numbers in my drop down, therefore I selected just the PO numbers. For other projects, you might want to select more fields which would be used in your applications.

sapui5 training

Assuming our Backend OData is ready. Now it is time to design our frontend SAPUI5 screen. We would log into our WebIDE system and create a new project.

What is SAP WebIDE?

Select SAPUI5 Application Template.

SAPUI5 made easy
Provide the project name.

SAPUI5 training for free

Provide view name and click finish.

Binding in SAPUI5

Since we are fetching data from OData service we should make sure that Application knows the source of data. Go to manifest.json file in Descriptor Editor and Add the Source of Data. Check our SAPUI5 Part II Tutorial for more details on the manifest.json Source, Models and Routings.


Also, let the application know the Default Model (OData Service) which would help to fetch data from Source.
Choose “Select data source” and set as default model (model name not needed).

SAPUI5 model

Open View1.xml file and View1.component.js file to check the default code generated by WebIDE.

Take a note, the <content></content> section is empty.

view in sapui5

Also note, the return function section has the second parameter empty.

component files

Method 1: Dropdown in SAPUI5 with some code in View and Controller files.

a) Add the below line of codes on the View1 file.

I tried creating a dropdown using “Select” tag instead of “ComboBox”.

If xmlns:c=”sap.ui.core” is not added to the view, then it raises an error as “Unexpected namespace ‘C’ ”.

Since “Items” is an Aggregation of and which belongs to library sap.ui.core, we need to add the reference of it on the first line.

Provide an Id (for example oSelect) to Select tag and in items provide the EntitySet name (/zponumberSet).

drop down in sapui5

b) In View1.controller file please bind the data to view based on Id.

To Bind the data from Controller to View we need to create an OData model (for our example it is oModel) and bind it to view based on Id. In our case it is “oSelect”.

Now our development is complete. Let us test the UI5 Application to check the output.

Below is the initial screen which we developed to display all the Purchasing Document Number values as drop down. When the user clicks on dropdown control it will show all Purchasing Document Numbers.

sapui5 and dropdown list
Here is the list of Purchasing Document Numbers from EKKO which is fetch using OData Service.

Method 2: Dropdown in SAPUI5 with just drag and drop with no custom javascript code

After you create your SAPUI5 project, your View file and Controller file would look like below by default.

Go the View1 file in Layout Editor Mode. Right click on the View1 file and choose Layout Editor.

Put the cursor on the View Page and bind it to the DataSet of the OData Service.

Now drag the “SelectUser Input UI element on to the Page Content. Make sure to put it on the Page->Content area. If you drag too high, it might go to the Page Header.

Now set the zponumberSet DataSet as the “Template” for the view. This is a very important step. If you do not Set as Template, the UI elements do not recognize it.

Bind the Select UI element’s text to the Data Source Field Ebeln. Just click on the property/field name of the EntitySet of the OData Service and it would put the Expression in curly braces { }. Anything within curly braces is dynamic and would be determined at runtime.

Let us check the View1 in Code Editor mode. The following four lines of code are added.

There is no change in default View1.controller.js file. It remains as it is.

Now, let us test the Application again. You would find the same output as Method 1.

What is the difference you see in the above 2 methods? Do you think the Binding part is handled differently? Why was the model not bound to the view element in method 2? Please leave your thoughts in the comment section.

As stated above, I am a fresher in SAPUI5 and this is my first SAPUI5 development, so there might be blunders in my understanding. If any experts can guide me better, I would be obliged. Which is a better way to achieve the functionality? Is there a better way?

Do you have any other methods to do the same job? Please share your thoughts.

If you GENUINELY like our articles then it would be a HUGE help if you subscribed and liked us on facebook. It might seem insignificant, but it helps more than you might think.

Thank you very much for your time!!

Call for Guest Authors and Contributors to write SAP Articles on our page and get noticed and also receive cool Gifts.

Do you have any tips or tricks to share? Do you want to write some articles at SAPYard? Please REGISTER and start posting and sharing your knowledge to the SAP world and get connected to your readers. Please check our simple guidelines for contributing your articles and receiving the gifts.

Step by Step Tutorials on SAPUI5

Also, Check Step by Step Tutorials on SAP Fiori

We have a very active Telegram SAP Technical Group. Please join it using below link.
Telegram SAP Technical Discuss Group.

WhatsApp had the limitation of 256 members per group and we were finding a hard time syncing and maintaining information in multiple WhatsApp group. Therefore we have moved to Telegram as it can accommodate more than 10,000 users. Please join.



  1. hello blogger ,I also learned sapui5 rencently .in your first menthod,,you don`t write such code in your controller.I think when you set the model in the manifest.json,you already finish setModel().I have a try without writing code in controller,and i achieve the function.


Please enter your comment!
Please enter your name here