Skip to Content

SplitContainer is not visible in IconTabBar content Area ?

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>
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    avatar image
    Former Member
    Jun 05, 2017 at 02:30 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jun 01, 2017 at 11:17 AM

    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

    Add comment
    10|10000 characters needed characters exceeded