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.
Let me show the code for the ComboBox. A view with date, purchasing group (Combobox) and plant (Combobox).
<mvc:View xmlns:core=”sap.ui.core” xmlns:mvc=”sap.ui.core.mvc” xmlns=”sap.m” xmlns:html=”http://www.w3.org/1999/xhtml”controllerName=”ZComboBox.controller.V_Input” displayBlock=”true”><App>
<pages>
<Pagetitle=”oModel.setSizeLimit() Alternatives”><content><VBox width=”100%” direction=”Column” id=”__vbox0″>
<items>
<Label text=” From Date*” width=”90%” id=”Lb_FromDate” design=”Bold”/><DatePicker width=”90%” id=”FromDate” valueFormat=”yyyy-MM-dd” placeholder=”Enter PReq Creation From Date …” change=”handleChange”/>
<Label text=” Purchasing Group” width=”90%” id=”Lb_PGroup” design=”Bold”/>
<ComboBox id=”PGrp” width=”90%” showSecondaryValues=”true” placeholder=”Select or Enter a PGroup”items=”{ path: ‘/PGroupSet’, sorter: { path: ‘Ekgrp’ }}”>
<core:ListItem key=”{Ekgrp}” text=”{Ekgrp}” additionalText=”{Eknam}”/></ComboBox>
<Label text=” Plant” width=”90%” id=”Lb_Plant” design=”Bold”/>
<ComboBox id=”Plant” width=”90%” showSecondaryValues=”true” placeholder=”Select or Enter a Plant”items=”{ path: ‘/PlantSet’, sorter: { path: ‘Werks’ }}”>
<core:ListItem key=”{Werks}” text=”{Werks}” additionalText=”{Name1}”/></ComboBox>
</items>
</VBox>
</content>
</Page>
</pages>
</App>
</mvc:View>
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.
Begin a beginner, I had a hard time finding Model detail. Finally this.getOwnerComponent().getModel() saved the day. I have defaulted it to 999.
var myModel = this.getOwnerComponent().getModel();
myModel.setSizeLimit(999);
Now, lets us debug again and check the iSizeLimit parameter. It is rightly set to 999 as shown below.
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.
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.
<ComboBox id=”PGrp” width=”90%” showSecondaryValues=”true” placeholder=”Select or Enter a PGroup”
items=”{ path: ‘/PGroupSet’, length: 650, sorter: { path: ‘Ekgrp’ }}”><core:ListItem key=”{Ekgrp}” text=”{Ekgrp}” additionalText=”{Eknam}”/>
</ComboBox>
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.
