Demystifying crazy case of a Shell issue in #SAPUI5

[nabheetscn]

Background

From last one week or so I have been catching up again on important concepts of SAPUI5. I have been following this amazing series by ericci to do some hands on also. This blog summarizes one of the issue which i faced while doing the development. Read on for details!

What is the crazy case?

We are making this Spilt app with Master Detail view where on left side we have Business partners and on right side we have the respective details. The issue which i faced was that my master list is visible when i make the screen smaller but not while its full as can be seen in below video. Read on how did i troubleshoot the issue!

How did i found the root cause?

As always the first step was to open the developer console in a separate window.



From the look of the issue i was sure it has to do something with the CSS being applied to the controls. So first try for me was to play with the initial width of the HTML tags of the list in master view, to see if something is visible.  As can be see some part of the list is visible but not complete



One thing which i noticed while resizing the screen was that my master list is only visible till 1279 pixel and after that it gets resized and hidden.



So that is where i decide to go one step higher and look at where this width parameter is being set in the CSS. That is where i found my first hint. It is at Shell level that this CSS issue is coming as can be seen below.



On disabling this CSS the data is appearing. So it has to do something with the Shell.



Wait Shell inside a split app, something fishy read on!

What is the solution?

On checking my master view in detail found the root cause that parent control is Split app and inside the master i have by mistake put a Shell something like below.

<mvc:View controllerName="com.comp.myapp.myapp.controller.BusinessPartnerList" xmlns:html="http://www.w3.org/1999/xhtml"

	xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" displayBlock="true" xmlns="sap.m" xmlns:fb="sap.ui.comp.filterbar"

	xmlns:l="sap.ui.layout">

	<Page id="page" title="{i18n>title}">

		<subHeader>

			<Toolbar>

				<SearchField search="onSearch" width="100%"/>

			</Toolbar>

		</subHeader>

		<List id="idBusinessPartner" items="{ path: '/BusinessPartnerSet' }" includeItemInSelection="true" growing="true" growingScrollToLoad="true"

			inset="false" itemPress="handlePress">

			<items>

				<StandardListItem type="Navigation" description="{CompanyName}" title="{BusinessPartnerID}"/>

			</items>

		</List>

	</Page>

</mvc:View>

The Shell in principle reserve some space on the left as well as on right as can be seen below which is causing the issue.



 

So practically it makes sense to have a Shell and then inside it Split app or we can do away with shell altogether. I just encapsulated the Splitapp inside the shell and bingo it worked!



So issues like these when being drilled down makes one understand how does a control work in depth. Feel free to provide your feedback.