SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()

SAPUI5 Training for free
Share on Facebook8Share on LinkedIn2Tweet about this on TwitterShare on Google+1
Please Share!!

Hello, Friends!! Hope you all are learning SAPUI5 along with us. Since we are still learning the tips and tricks of UI development, we are trying to share everything we think might help the beginners. There are many small practical issues which the novice UI developer face while handling his first UI App. Hopefully, in days to come, we would be able to share most of them which would save the research time of future UI (from ABAP) developers.

With that in mind, today we would do some analysis of setSizeLimit() function in SAPUI5.

SAP has defaulted the automatically generated items from OData to limit to 100. This is to avoid unintentional performance problem. Say a user forgets to provide some parameter in the UI screen and the backend OData service returns 1 million entries. By default, the UI would still display only 100 entries. This is a proactive action taken by SAP to keep the UI app light. After all UI screens should not be an alternative for the heavy data display. Also, who would like to scroll 1000s of line in the smartphone?

Having said that, often we need to search fields which may lay in the items after 100th position. A real example is a drop down in UI screen. SAP has re-christened drop down to Combo Box. The other day, I created a UI screen and presented it to our business. Everything appeared to be fine. But the business user complained that, when he types a certain purchasing group or plant, it does not show up in the drop-down list. After some research, I found it is the inherent property of default SAPUI5 where the item below 100 do not show up when the user starts typing the initial few letters. We can do some customization for LIVE search if we want, but that is not something we are trying to explore today.

Today, we would want to learn, how to override the 100 default set by SAP?

Let me present my case first.

Say we have a dropdown (ComboBox) for Purchasing Group and Plant. When the user types 3 in the Purchasing group only three entries show up in the dropdown, but if you go to the backend table, when we search with 3*, a lot more entries show up. Similarly when 543 is typed in the UI combobox, only two entries show up, but in the backend for 543*, there are 9 entries.

DropBox in SAPUI5

Let me show the code for the ComboBox. A view with date, purchasing group (Combobox) and plant (Combobox).

Let us put a hard debugger in the onInit function of the Controller. Hopefully, by now you know how to debug UI screen. 🙂 Execute your app and right click and select Inspect or just press F12 to go to debug mode.

In the debug mode go to Console and type this.getOwnerComponent().getModel();.

It would show the details of the model. You would find here that the iSizeLimit parameter is 100 by default.

We want to change this 100 to say 999. Let us add the below two lines of code in our onInit function. Everyone on the internet said, oModel.setSizeLimit(count) would override the default count. But no one showed how to read the Model. 🙂

Also Read: Issues and Hurdles faced in my first SAPUI5 Development

Begin a beginner, I had a hard time finding Model detail. Finally this.getOwnerComponent().getModel() saved the day. I have defaulted it to 999.

set model in SAPUI5

Now, lets us debug again and check the iSizeLimit parameter. It is rightly set to 999 as shown below.

OVERRIDE default model limit

Perfect!! Let us check our output.

Confirmed. It worked. The after change shows all the entries.

Now you should be able to use oModel.setSizeLimit() easily in any UI development you want.

Also Read: Do you know how to convert your SAPUI5 App to Fiori App?

Let us come to the actual section which I was excited to share with you. What if we do not want to set one limit for the whole Project? What if, for one dropdown, I want to show only 5 entries, another dropdown I want to show 110 and another dropdown 1001? As per my understanding oModel.setSizeLimit() would set one limit for the whole application.

Here comes the question: What is the alternative to oModel.setSizeLimit()?

While I was researching a way how to use oModel.setSizeLimit({collection}), I found another method which worked the same way I wanted. In fact, this method was a lot cleaner than setSizeLimit. 🙂 . Lazy ABAPers always want fewer lines of code.

While declaring the path of the items, we just need to add another property called “Length“. Yes, this keyword did the trick for me.

Check the modified View.

I have removed the setSizeLimit() from my onInit function in the Controller.

Let us test now. Check the drop down shows all the items.

Isn’t it simpler than setSizeLimit()? Technically, I am not sure which is the better method. Since I am a beginner in SAPUI5, I would request the experienced SAPUI5 developers to enlighten us with the pros and cons of both the above-discussed points.

Friends, please leave your feedback. Please share if you have found any other method to meet the same requirement.

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.

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

Share on Facebook8Share on LinkedIn2Tweet about this on TwitterShare on Google+1
Please Share!!

About the Author

SAP Yard
SAP Yard
SAPYard is one stop page for all Technical Folks in SAP. You would find un-conventional explanations, tutorials, and tricks. Please like our Facebook Page and also join our LinkedIn Group.

2 Comments on "SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()"

  1. yes..!
    great findings..
    The way people are learning from SAPYARD is superb.
    No one will forget the things ever after going through the detailed story…

    • Thanks Partha. Hopefully the beginners would benefit from our simple tutorials. 🙂

      Raju.
      SAPYard.com

Comments are closed.