Skip to Content
1

SplitContainer is not visible in IconTabBar content Area ?

Jun 01, 2017 at 05:43 AM

83

avatar image

Hi I need Master Detail page within the IconTabBar.

I mean master detail page should be in content area of the IconTabBar.

I am able to see code in inspect element but master detail page is not visible in output?

Please help me,I have used the following code.

<mvc:View controllerName="com.masterDetailTab.controller.masterDetailTabView" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:semantic="sap.m.semantic" displayBlock="true">
<App>
<pages>
<Page title="{i18n>title}">
<content>

<IconTabBar select="handleIconTabBarSelect" id="idIconTabBarNoIcons" expanded="{device>/isNoPhone}">
<items>

<IconTabFilter text="tab1" key="tab1">
<SplitContainer>
<masterPages>
<semantic:MasterPage title="Master Page Title"></semantic:MasterPage>
</masterPages>
<detailPages>
<semantic:DetailPage title="Detail Page Title"></semantic:DetailPage>
</detailPages>
</SplitContainer>
</IconTabFilter>
<IconTabFilter text="tab2" key="tab2">
<Text text="tab2 go here ..."/>
</IconTabFilter>
</items>
</IconTabBar>
</content>
</Page>
</pages>
</App>
</mvc:View>
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Urvish Vijay Panchal Jun 05, 2017 at 02:30 PM
1

Hi Srinivas G,

I have again checked the issue and came to know that we can directly add SplitContainer in IconTab bar there is no need to add SplitApp in it.

reason it was not coming in the IconTab bar is tab's content has 0 height. This is because the SplitContainer has a height 100% of its parent element whilst the tab's height is determined based on the height of its children. for that First we need to set property stretchContentHeight="true". Please refer the code it is working fine.

<mvc:View controllerName="Z_SAP_Forum_Demo.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:semantic="sap.m.semantic" displayBlock="true">

<App>
<pages>
<Page title="{i18n>title}">
<content>
<IconTabBar select="handleIconTabBarSelect" id="idIconTabBarNoIcons" expanded="{device>/isNoPhone}" stretchContentHeight="true">
<items>
<IconTabFilter text="tab1" key="tab1" >
<SplitContainer id="SplitContDemo">
<detailPages>
<Label text="Detail page 1"/>
<Button text="Go to Detail page2" press="onPressNavToDetail"/>
</detailPages>
<masterPages>
<List>
<items>
<StandardListItem title="To Master2" type="Navigation" press="onPressGoToMaster"/>
</items>
</List>
</masterPages>
</SplitContainer>
</IconTabFilter>
<IconTabFilter text="tab2" key="tab2">
<Text text="tab2 go here ..."/>
</IconTabFilter>
</items>
</IconTabBar>
</content>
</Page>
</pages>
</App>
</mvc:View>

Thanks & regards,

Urvish

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thank you Urvish Vijay Panchal.
It works.......

0
Urvish Vijay Panchal Jun 01, 2017 at 11:17 AM
1

Hi Srinivas G,

Instead of using <SplitContainer> use <SplitApp> it will work as per your requirement. Please refer code that i have written.

<mvc:View controllerName="Z_SAP_Forum_Demo.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:semantic="sap.m.semantic" displayBlock="true">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<IconTabBar select="handleIconTabBarSelect" id="idIconTabBarNoIcons" expanded="{device>/isNoPhone}">
						<items>
							<IconTabFilter text="tab1" key="tab1">
								<SplitApp id="SplitContDemo" initialDetail="detail" initialMaster="master">
									<detailPages>
										<Page id="detail" title="Detail 1" class="sapUiStdPage">
											<content>
												<Label text="Detail page 1"/>
												<Button text="Go to Detail page2" press="onPressNavToDetail"/>
											</content>
										</Page>
									</detailPages>
									<masterPages>
										<Page id="master" title="Master 1" icon="sap-icon://action" class="sapUiStdPage">
											<content>
												<List>
													<items>
														<StandardListItem title="To Master2" type="Navigation" press="onPressGoToMaster"/>
													</items>
												</List>
											</content>
										</Page>
									</masterPages>
								</SplitApp>
							</IconTabFilter>
							<IconTabFilter text="tab2" key="tab2">
								<Text text="tab2 go here ..."/>
							</IconTabFilter>
						</items>
					</IconTabBar>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

Thanks & regards,

Urvish Panchal

Share
10 |10000 characters needed characters left characters exceeded