Skip to Content
0
Jan 27, 2023 at 10:56 AM

SAPUI5 - The visible property does not respect the model change

681 Views Last edit Jan 27, 2023 at 11:29 AM 3 rev

Hi all,

I have a ui5 application where I am trying to display the Login screen with Toolpage with routing.

My App.view.xml is as below:

<mvc:View
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:core="sap.ui.core"
	xmlns="sap.m"
	xmlns:tnt="sap.tnt"
	xmlns:l="sap.ui.layout"
	xmlns:f="sap.f" controllerName="myWork.controller.App" displayBlock="true">
	<App id="mainApp">
		<tnt:ToolPage>
			<tnt:header>
				<core:Fragment id="accSshellbarId" fragmentName="myWork.view.fragments.Shellbar" type="XML" />
			</tnt:header>
			<tnt:sideContent>
				<core:Fragment id="accSideNavigationId" fragmentName="myWork.view.fragments.SideNavigation" type="XML" />
			</tnt:sideContent>
			<tnt:mainContents>
				<NavContainer id="app" initialPage="page2">
					<pages></pages>
				</NavContainer>
			</tnt:mainContents>
		</tnt:ToolPage>
	</App>
</mvc:View>

manifest.json has following content which are relevant to this issue:

"rootView": { "viewName": "enkompass.view.App", "type": "XML" },and"routing": { "config": { "routerClass": "sap.m.routing.Router", "type": "View", "viewType": "XML", "path": "enkompass.view", "controlId": "app", "controlAggregation": "pages" },} 

Shellbar.fragment.xml

<core:FragmentDefinition
	xmlns="sap.m"
	xmlns:f="sap.f"
	xmlns:core="sap.ui.core" >
	<f:ShellBar title="{i18n>TITLE}" showMenuButton="true" id="myShellBar" secondTitle="Short description" showNotifications="true" menuButtonPressed="onMenuButtonPress" notificationsNumber="2" visible="{ path: 'appModel>/route/oCurrentRoute' }" >
		<f:profile>
			<Avatar initials="AG"/>
		</f:profile>
	</f:ShellBar>
</core:FragmentDefinition>

SideNavigation.fragment.xml

<core:FragmentDefinition
	xmlns="sap.tnt"
	xmlns:core="sap.ui.core" >
	<SideNavigation
		xmlns:core="sap.ui.core" expanded="true" itemSelect="onItemSelect" visible="{ path: 'appModel>/route/oCurrentRoute' }">
		<NavigationList>
			<NavigationListItem text="Item 1" icon="sap-icon://employee">
				<NavigationListItem text="Sub Item 1" />
				<NavigationListItem text="Sub Item 2" />
				<NavigationListItem text="Sub Item 3" id="subItem3" key="subItem3" />
				<NavigationListItem text="Sub Item 4" /></NavigationListItem>
			<NavigationListItem text="Item 2" icon="sap-icon://building">
				<NavigationListItem text="Sub Item 1" />
				<NavigationListItem text="Sub Item 2" />
				<NavigationListItem text="Sub Item 3" />
				<NavigationListItem text="Sub Item 4" /></NavigationListItem>
		</NavigationList>
		<fixedItem>
			<NavigationList>
				<NavigationListItem text="Item 1" icon="sap-icon://employee" />
				<NavigationListItem text="Item 2" icon="sap-icon://building" />
				<NavigationListItem text="Item 3" icon="sap-icon://card" />
			</NavigationList>
		</fixedItem>
	</SideNavigation>
</core:FragmentDefinition>

Here comes the issue:

1. I Open the URL and it only displays the login page as below (Works as expected):

image.png

2. Then after login, I see this (works as expected):

image.png

3. The I press back button from browser and instead seeing the first original login page, I get this (issue- I must be able to see the original login page, here the visible attribute inside fragments failed):

image.png

The value of appModel>/route/oCurrentRoute was set to false in App.controller.js and Login.controller.js as below:

onInit: function() { const oRouter = this.getOwnerComponent().getRouter(); oRouter.attachRoutePatternMatched(this._onRouteMatched, this); },_onRouteMatched: async function(oCurrentRoute) { this.getView().getModel('appModel').setProperty('/route/oCurrentRoute', false); },

I am literally clueless what is wrong here? I want to hide the fragments components when user hits back, I can see above lines getting called and the model property values were also changed at controller level but it does show its reflection on the UI

Need help to solve the problem

Attachments

image.png (27.3 kB)
image.png (50.3 kB)
image.png (58.1 kB)
image.png (26.1 kB)