SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App

0
12
9 SAPUI5 issues by ABAPer

In our earlier post, we tried to show all the issues faced by an ABAPer in his/her first SAPUI5 development. One of our readers suggested putting another article with some more issues and its resolutions. He argued that it is a very good way to learn from other’s mistake. Today, we would like to continue in the same line and add on to the list of hiccups faced by the novice SAPUI5 developer.

My second UI development had the below requirement.

First View:

  1. Date as an input field along with two other input fields.
  2. Show error message is user tries to execute without entering the Date

my first UI5

Second View:

  1. User wants to see the Count of incomplete Purchase Requisition Line Items

incomplete Purchase Requisition

Third View:

  1. When the user hits Show PReq, the PReq summary should be displayed.

Fiori and SAPUI5

Fourth View:

  1. When the user clicks any PReq, it’s details need to be displayed.

details need to be displayed

Pretty simple and straightforward requirement. Let us start developing it.

We developed the backend OData project and activated the OData service. We would not talk about the OData part as it is ABAP and ABAPer can figure out the logic pretty easily.

If you need to brush up your OData skills, please go through our SAP Netweaver Gateway and OData Services Tutorials.

Here, we would put forth only the UI5 issues which we faced.

To begin with, we created 5 views and embedded V_Input into V_Root and then navigated from V_Input to V_Count to V_PReqH(Header) and finally to V_PReqD (Detail). We assume, by now you know how to create views and maintain the patterns and targets in the manifest file.

If you are not sure how to create and configure the views and patterns, check this post. My First SAPUI5 App

We have attached the complete project from WebIDE at the end of this article. If you face any difficulty during your development, you can directly import the zipped file to your WebIDE and check the project.

Let us know if you still face any issue.

Views in SAPUI5

Issue No 1 faced in my second SAPUI5 App: Not able to put space in front of Label of fields. Not able to put space after the input fields.

Look at the below screen prints. When we open this app in our mobile, the fields tend to hide at the left-handside edges. The users did not like it. They wanted some margins in the left and also some gap after every input field.

sapUiSmallMarginBottom

Original code snippet.

SAPUI5 Code

I tried to give space in the layout editor of the View, but I was not successful. After some research, I found the below two class would do the needful for us.

gaps

Check the output now. We have good margins both horizontally and vertically.

alignment in sapui5

Issue No 2 faced in my second SAPUI5 App: How to show more than 100 entries in drop down i.e in the combo box?

We have already dedicated a separate article on this topic. Please read How to ovoverwritehe default 100 set by SAP for UI.

If your dropdown or your item table is not showing more than 100 records. Worry not.  It is SAP’s way to avoid unintentional performance problem. The most common method to over write this 100 number is to use oModel.setSizeLimit(‘999’) method. But, we found a better one.

Just add a property length: 999 and your combo box would show data up to 999. You can show any number and 999 is just an example. 🙂

length in sapui5

Forget oModel.setSizeLimit(count) and remember length: count. 😛

Issue No 3 faced in my second SAPUI5 App: OData Service failing when some fields of the entity set returned no data (i.e empty).

This was a strange issue. Our OData worked fine for some cases and for some cases it errored out with status 500 and status reason Internal Server Error.

After debugging the GetEntitySet method we found that it failed only when some fields were blank. For our case whenever there was no data in the Erdat (created date) field, our service failed with the below error.

 “Invalid format (return table): Row Number 1,  Property Name ‘Erdat’,  Property Value

nullable in odata

After some head scratching, we found that the solution was itself in the Error Text. The key word was “Property Value”.

Check the column “Nullable” of the entity property. It is not checked.

odata issue

We just need to make the Nullable as ‘X’ and our OData would work even when it returns blank. Isn’t the solution so simple? But we wasted almost half a day to find it. 🙂

The right way is shown below.

Similarly, if some Filters and Sorts are not working, I believe we need to set these properties just like Nullable (although we have not tried it yet).

Issue No 4 faced in my second SAPUI5 App: The Date value sent from UI is not in correct format. Error log “Invalid token detected at position”.

Let me elaborate a bit. Since I have a date as input field in the UI, my requirement was to use this data as the filter and retrieve the count of Purchase requisitions.

Basically, I wanted to get a filter URI like:

/sap/opu/odata/sap/ZGW_PREQ_SRV/PReqSet/?$filter=Erdat gt datetime’2017-04-20′

date error in odata

To my surprise, the Model did not return me any value. I checked the /n/IWFND/ERROR_LOG t-code and found the below message.

So, I planned to test and debug using t-code /n/IWFND/GW_CLIENT using below URI.

/sap/opu/odata/sap/ZGW_PREQ_SRV/PReqSet/?$filter=Erdat gt datetime‘2017-04-20’

?$filter=Erdat gt datetime'2017-04-20'

But it did not go to debug mode at all. 🙂  It exited with the below message.

After some analysis and going through different forums, I found that the date field expects time as well.

Erdat gt datetime’2017-04-20T00:00:00

Check, we have added a default T00:00:00. You can, however, give real time if you want to filter using time as well. We just sent dummy time (T00:00:00) to match what OData was expecting.

/sap/opu/odata/sap/ZGW_PREQ_SRV/PReqSet/?$filter=Erdat gt datetime’2017-04-20T00:00:00

Tested in backend and it worked perfectly.

So, I had to change my UI code as below.

I did not understand why we need to send T00:00:00. But as long as it works, I will remember this and keep using it. 🙂

Issue No 5 faced in my second SAPUI5 App: Define an internal table (Array) and define an object.     

define an object in UI

Issue No 6 faced in my second SAPUI5 App: How to pass data from one function to another function in UI?

The date, purchasing group and plant data would be passed to View 2 when Get PReq Count button is hit using Router->Pattern.

patterns in ui5

In one funtion (_onRouteFound) of the controller of View 2, the data is read from the pattern and saved in local variables.

In another function (ShowPReq), we need to access the same data lv_date, lv_pgroup, lv_plant. But how?

Seasoned UI developers might find this issue too silly. But, I really struggled. Finally, I achieved it as below.

Step 1: Instantiate a local JSON model for the controller. I did it in function 1 i.e. onInit.

Step 2: Define an object and fill it with the variable data. I did it in function 2 i.e. _onRouteFound.

Step 3: Set the object data from step 2 to the local JSON model for the controller in step 1. I did it in function 2 i.e. _onRouteFound.

Step 4: Read the data from the local JSON model wherever you need it in the controller. I did it in function 3 i.e. ShowPReq.

Step 1: Instantiating a local JSON model to be used in this controller

new sap.ui.model.json.JSONModel();

Step 2: Define an object and fill it with the variable data.

array and object in ui5

oJson.vdate is like inline declaration in SAP ABAP. It gets created at run-time.

Step 3: Set the object data to the local JSON model for the controller.

Set the local data to the Model

Step 4: Read the data from the local JSON model wherever you need it in the controller.

We have set the data in the local model in above step. Here we just need to read the Data. And the syntax is model.oData.variable.

Syntax to read data from local model

Issue No 7 faced in my second SAPUI5 App: How to generate the necessary URI for the backend OData Service and save the response from the OData Service? Basically how to declare a model and consume it?
save the response from the OData Service

 The above code is self-explanatory. Knowing it for the first time is the only issue.

Issue No 8 faced in my second SAPUI5 App: How to get the count of number of rows in an array?

In ABAP we can use LINES or DESCRIBE syntax to get the number of lines in an internal table. But finding that for UI script was again a new syntax for an ABAPer. This fellow was not that difficult though. J

ArrayName.length is what we need to do.

array count

Issue No 9 faced in my second SAPUI5 App: How to SET the calculated run time data to the View Element?

set data

The requirement was to show the above message in the second view. The count would be calculated at run time and the sentence would be framed using ‘+’ (concatenate) statement. We have the data, but how was I supposed to set it to the screen elements to be displayed?

getView().byId(“Id name”).setText(variable name) helped me.

this.getView().byId("Count").setText(v_count);

These were ridiculously simple stuff which I shared today. But believe me, if you are a fresher in UI5, every new thing is an uphill task. You scramble through the internet, look into GitHub and get drowned in the vast ocean of information. But sometimes what you need is just these simple syntax to complete your task and deliver your App. 🙂

Hopefully, newbies would find these useful and experienced folks would want to add to this list and help us in learning. Please provide your feedback and let us know if you have some more issues which you faced during the initial days of your UI development.

Please find the whole Project for this application here. My Second SAPUI5 App.

Most of the issues I revealed above were from one View Controller. Therefore I am sharing the code for easy reference for the SAPUI5 enthusiasts.

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

We put a lot of effort in conceptualizing, testing and writing each and every article. If you could pass this link to at least 5 colleagues/friends who you think would benefit from our post, it would be a great favor to our team. We want our articles to reach to as many audiences as possible so that everyone would benefit and our team would remain motivated and our work does not get lost in this huge ocean of the internet.

Please, please share our post in your professional and social media and introduce your friends/colleagues/co-workers to our blog page.

Thank you very much for visiting. Please leave your comments/compliments, good and no so good so that we can keep on improving and providing you quality stuff.

Also, check our popular step by step tutorials on some of the important topics of SAP ABAP.

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
10. SAP Screen Personas Tutorials

LEAVE A REPLY

Please enter your comment!
Please enter your name here