Preface – This post is part of the UI5 Programs series.
In this article, we will learn Master Detail with multiple fragments for detail and a single controller in SAP UI5. Visit this page, in case you are looking for Master Detail with multiple views and multiple controllers for detail
Main.view.xml
In this use case, our Application name is YRR. We have used tnt:ToolPage to create Master and Detail sections. Within detail, you will see multiple fragments within ScrollContainer. All the tab names are specified within tnt:Side Navigation. On click of these tabs, their functions are called which navigates the view with the help of Scroll Containers ID.
<mvc:View xmlns:core="sap.ui.core" controllerName="YRR.YRR.controller.Main" xmlns:mvc="sap.ui.core.mvc" xmlns:tnt="sap.tnt"
xmlns:html="http://www.w3.org/1999/xhtml" displayBlock="true" xmlns="sap.m"
xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<!--<App id="idAppControl">-->
<tnt:ToolPage id="toolPage">
<tnt:header>
<tnt:ToolHeader>
<Button id="sideNavigationToggleButton" icon="sap-icon://menu2" type="Transparent" press="onCollapseExpandPress">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow"/>
</layoutData>
</Button>
<ToolbarSpacer/>
<core:Icon src="sap-icon://vehicle-repair"></core:Icon>
<Text text="{i18n>title}" wrapping="false">
<layoutData>
<OverflowToolbarLayoutData priority="Disappear"/>
</layoutData>
</Text>
<ToolbarSpacer/>
<Button text="Download User Excel" icon="sap-icon://excel-attachment" type="Transparent" press="onSelectExtendedUser"/>
<Text text="{i18n>version}" wrapping="false"/>
<!--<Button icon="sap-icon://bell" press="handleMessagePopoverPress"/>-->
</tnt:ToolHeader>
</tnt:header>
<tnt:sideContent>
<tnt:SideNavigation expanded="true" selectedKey="root0">
<tnt:NavigationList>
<tnt:NavigationListItem text="Users" key="root0" icon="sap-icon://account" expanded="true" select="onSelectUser"/>
<!--<tnt:NavigationListItem text="Download User Excel" key="root1" icon="sap-icon://excel-attachment" expanded="true"-->
<!-- select="onSelectExtendedUser"/>-->
<tnt:NavigationListItem text="Insurance" key="root2" icon="sap-icon://insurance-car" expanded="true" select="onSelectInsurance"/>
<tnt:NavigationListItem text="Transactions" key="root3" icon="sap-icon://vehicle-repair" expanded="true" select="onSelectTransactions"/>
<tnt:NavigationListItem text="Controller & Driver" key="root4" icon="sap-icon://manager" expanded="true" select="onSelectController"/>
<tnt:NavigationListItem text="Car Plates" key="root5" icon="sap-icon://add-contact" expanded="true" select="onSelectCarPlates"/>
<tnt:NavigationListItem text="Promotion & Rewards" icon="sap-icon://loan" expanded="false">
<tnt:NavigationListItem text="Promotion" key="root6" icon="sap-icon://payment-approval" expanded="true" select="onSelectPromotion"/>
<tnt:NavigationListItem text="Rewards" key="root7" icon="sap-icon://loan" expanded="true" select="onSelectRewards"/>
<tnt:NavigationListItem text="Specific Rewards" key="root7_1" icon="sap-icon://loan" expanded="true" select="onSelectSpecificRewards"/>
</tnt:NavigationListItem>
<tnt:NavigationListItem text="Notifications" icon="sap-icon://sales-notification" expanded="false">
<tnt:NavigationListItem text="App Notification" key="root8" icon="sap-icon://sales-notification" expanded="true"
select="onSelectNotification"/>
<tnt:NavigationListItem text="Manual Push Notification" key="root8_1" icon="sap-icon://sales-notification" expanded="true"
select="onSelectPushNotification"/>
</tnt:NavigationListItem>
<tnt:NavigationListItem text="Home Images" icon="sap-icon://background" expanded="false">
<tnt:NavigationListItem text="Promo Images" key="root9_1" icon="sap-icon://background" expanded="true" select="onSelectPromoImages"/>
<tnt:NavigationListItem text="Dashboard Images" key="root9_2" icon="sap-icon://background" expanded="true" select="onSelectDashboardImages"/>
<tnt:NavigationListItem text="Dashboard Icons" key="root9_3" icon="sap-icon://background" expanded="true" select="onSelectDashboardIcons"/>
</tnt:NavigationListItem>
<tnt:NavigationListItem text="Master Data" icon="sap-icon://accounting-document-verification" expanded="false">
<tnt:NavigationListItem text="Terms & Conditions" key="root12" icon="sap-icon://activities" expanded="true" select="onSelectTerms"/>
<tnt:NavigationListItem text="Car Brands" key="root10" icon="sap-icon://insurance-car" expanded="true" select="onSelectCarBrands"/>
<tnt:NavigationListItem text="Organizations" key="root13" icon="sap-icon://insurance-car" expanded="true" select="onSelectOrg"/>
</tnt:NavigationListItem>
<tnt:NavigationListItem text="Enquiry" key="root11" icon="sap-icon://headset" expanded="true" select="onSelectInquiry"/>
</tnt:NavigationList>
<tnt:fixedItem>
<tnt:NavigationList >
<tnt:NavigationListItem text="Log Out" icon="sap-icon://log" select="onSelectLogOut"/>
</tnt:NavigationList>
</tnt:fixedItem>
</tnt:SideNavigation>
</tnt:sideContent>
<tnt:mainContents>
<NavContainer id="pageContainer" initialPage="root1">
<pages>
<ScrollContainer id="root0" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.UserDetails" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root1" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.ExtendedUserDetails" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root1_1" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.UserOvp" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root2" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.InsuranceDetails" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root2_1" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.InsuranceOvp" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root3" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.Transaction" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root4" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.Controller" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root5" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.CarPlates" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root5_1" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.CarPlatesOvp" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root6" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.Promotion" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root7" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.Rewards" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root7_1" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.SpecificRewards" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root8" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.Notification" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root8_1" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.PushNotification" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root9_1" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.PromoImages" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root9_2" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.HomeImages" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root9_3" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.DashboardIcons" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root10" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.CarDetails" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root11" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.Inquiry" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root12" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.TermsConditions" type="XML"/>
</ScrollContainer>
<ScrollContainer id="root13" horizontal="false" vertical="true" height="100%">
<core:Fragment fragmentName="YRR.YRR.fragment.Organizations" type="XML"/>
</ScrollContainer>
</pages>
</NavContainer>
</tnt:mainContents>
</tnt:ToolPage>
<!--</App>-->
</mvc:View>
Output of tnt:SideNavigation:
Main.controller.js
// the function used to show the User Fragment
onSelectUser: function (oEvent) {
// "pageContainer" is the ID of NavContainer within which all the ScrollContainer are added
// "root0" is the ID of first ScrollContainer within which we have a fragment called "UserDetails"
this.byId("pageContainer").to(this.getView().createId("root0"));
},
No special navigation handling is required within the Manifest file.
Fragment: UserDetails.fragment.xml
This Fragment will open when onSelectUser is clicked.
<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
xmlns:u="sap.ui.unified" xmlns:commons="sap.suite.ui.commons">
<OverflowToolbar>
<Title text="User Data ({AppConfig>/UserCount})" level="H2"/>
<ToolbarSpacer/>
<Button text="Sort" icon="sap-icon://sort" press="handleUserSort"/>
</OverflowToolbar>
<Table id="idUserTable" inset="false" items="{/Users}" sticky="ColumnHeaders,HeaderToolbar" class="sapFDynamicPageAlignContent" width="auto">
<headerToolbar>
<OverflowToolbar>
<SearchField id="idSearchUserName" placeholder="Search Name" value="" search="onSearchName" width="15rem"/>
<SearchField id="idSearchUserPhone" placeholder="Search Phone Number" value="" search="onSearchPhone" width="15rem"/>
<SearchField id="idSearchUserEmail" placeholder="Search Email ID" value="" search="onSearchUser" width="15rem"/>
<SearchField id="idSearchUserOrg" placeholder="Search Organization" value="" search="onSearchOrg" width="15rem"/>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="User Name"/>
</Column>
<Column minScreenWidth="Desktop" demandPopin="true" hAlign="End">
<Text text="Email ID"/>
</Column>
<Column minScreenWidth="Desktop" demandPopin="true" hAlign="Center">
<Text text="Phone Number"/>
</Column>
<Column minScreenWidth="Desktop" demandPopin="true" hAlign="Center">
<Text text="Date of Birth"/>
</Column>
<Column minScreenWidth="Desktop" demandPopin="true" hAlign="Center">
<Text text="Organization"/>
</Column>
</columns>
<items>
<ColumnListItem type="Navigation" press="onUserPress">
<customData>
<core:CustomData key="idUserTable"/>
</customData>
<cells>
<Text text="{userName}"/>
<Text text="{email}"/>
<Text text="{mob}"/>
<Text text="{ path: 'dob', formatter: '.formatter.dateUnit' }"/>
<Text text="{org}"/>
<!--<Select id="iduserRole" selectedKey="{userRole}" change="onSelectUserRole">-->
<!-- <core:Item key="BASIC" text="BASIC"/>-->
<!-- <core:Item key="SG Member" text="SG Member"/>-->
<!-- <core:Item key="SGMY Member" text="SGMY Member"/>-->
<!--</Select>-->
</cells>
</ColumnListItem>
</items>
</Table>
<Bar design="SubHeader" id="idLoadMore">
<contentMiddle>
<VBox height="100%" alignItems="Center">
<Button text="Load Next 20 Data >>" press="onMoreUsers"/>
</VBox>
</contentMiddle>
<contentRight>
<Input type="Number" id="pageNumber" width="50px"></Input>
<Button id="goToButton" text="Go to" type="Emphasized" press="onHandleGoTo"></Button>
</contentRight>
</Bar>
<VBox id="idLoadSortMore" height="100%" alignItems="Center" visible="false">
<Button text="Load Next 20 Data >>" press="onMoreSortUsers"/>
</VBox>
</core:FragmentDefinition>
Output of Fragment:
