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

Create Drop Down Input field
Share on Facebook16Share on LinkedIn1Tweet about this on TwitterShare on Google+0
Please Share!!

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.

manifest.json

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 sap.m.select 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!!

Useful Tutorials in SAPYard

1. ABAP for SAP HANA Tutorials
2. ABAP Web Dynpro Tutorials
3. GOS Tutorial
4. OOPs ABAP Tutorial
5. HANA Tutorial
6. SAP Netweaver and OData Tutorial
7. SAP Adobe Form Tutorial
8. SAP Fiori Tutorial
9. SAPUI5 Tutorial

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.

 

Share on Facebook16Share on LinkedIn1Tweet about this on TwitterShare on Google+0
Please Share!!

About the Author

Sridhara Karthik
Sridhara Karthik

Karthik is an ABAP developer with around 2 years of real project experience. He has a Bachelors of Technology degree in Electronic and Communication Engineering. Currently, he is assigned OData and SAPUI5 projects. Both these areas are new to him, but he is loving the challenge of learning these niche area and enhancing his skillsets.

In his free time, he loves playing cricket leagues for HMV Association and Managing Teams.

Find more about him on LinkedIn.

7 Comments on "SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)"

  1. Abhishek Banerjee | April 2, 2017 at 8:32 am | Reply

    Very nice tutorial Karthik!! Learned a lot from this.

  2. Sridhara Karthik sridhara karthik | March 7, 2017 at 5:45 am | Reply

    Thank you srinath for your Appreciation

  3. Great piece of Tutorial. Great job.

  4. 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.

Leave a Reply to sridhara karthik Cancel reply

Your email address will not be published.


*