Remove SideNavigation for the CustomLogin page

[Former Member]

Hi,

I am trying to develop a SAPUI5 application with custom login. Login page is coming with side navigation, as I have added the Code for Side Navigation in App.view.xml(my root view) to display it in all other pages. Please help me to remove the side navigation from the Login screen.

Here is my App.view.xml

<mvc:View controllerName="fitgebuser.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

  xmlns:tnt="sap.tnt" xmlns="sap.m" xmlns:core="sap.ui.core">

  <App id="appControlId">

  <tnt:ToolPage id="toolPage">

  <tnt:header>

  <tnt:ToolHeader>

  <Button id="sideNavigationToggleButton" icon="sap-icon://menu2" type="Transparent" press="onSideNavButtonPress">

  <layoutData>

  <OverflowToolbarLayoutData priority="NeverOverflow"/>

  </layoutData>

  </Button>

  <ToolbarSpacer/>

  <Text class="title" text="Test Application" wrapping="false">

  <layoutData>

  <OverflowToolbarLayoutData priority="Disappear"/>

  </layoutData>

  </Text>

  </tnt:ToolHeader>

  </tnt:header>

  <tnt:sideContent>

  <tnt:SideNavigation expanded="true" itemSelect="onItemSelect">

  <tnt:NavigationList id="navigationList" width="320px">

  <tnt:NavigationListItem text="Nav1" icon="sap-icon://bar-chart" select="onNav1"></tnt:NavigationListItem>

  <tnt:NavigationListItem text="Nav2" icon="sap-icon://activity-assigned-to-goal" select="onNav2"></tnt:NavigationListItem>

  </tnt:NavigationListItem>

  </tnt:NavigationList>

  </tnt:SideNavigation>

  </tnt:sideContent>

  <tnt:mainContents>

  <NavContainer id="pageContainer"></NavContainer>

  </tnt:mainContents>

  </tnt:ToolPage>

  </App>

</mvc:View>

Manifest.json

"routing": {

  "config": {

  "routerClass": "sap.m.routing.Router",

  "viewType": "XML",

  "viewPath": "testapp.view",

  "controlId": "pageContainer",

  "controlAggregation": "pages",

  "transition": "slide"

  },

  "routes": [{

  "pattern": "",

  "name": "loginPage",

  "target": "loginPage"

  }, {

  "pattern": "nav1",

  "name": "nav1",

  "target": "nav1"

  },

"pattern": "nav2",

  "name": "nav2",

  "target": "nav2"

  }

],

  "targets": {

  "loginPage": {

  "viewName": "Login",

  "viewLevel": 1

  },

  "nav1": {

  "viewName": "Home", 

  "viewLevel": 1

  },

  "nav1": {

  "viewName": "Products", 

  "viewLevel": 1

  }

  }

  }

  },

[Former Member · Accepted solution]

Issue Resolved.

I referred the following link(parent-child relation) :

SAPUI5 SDK - Demo Kit

I moved the side navigation code from app view xml to New file (Base view xml as a parent). Rest all pages(except login) are child of Base view xml. Now side navigation is not appearing in Login page.

Changes i made,

Manifest.json

"routing": {

  "config": {

  "routerClass": "sap.m.routing.Router",

  "viewType": "XML",

  "viewPath": "testapp.view",

  "controlId": "appId",

  "controlAggregation": "pages",

  "transition": "slide"

  },

  "routes": [{

  "pattern": "",

  "name": "loginPage",

  "target": "loginPage"

  }, {

  "pattern": "nav1",

  "name": "nav1",

  "target": "nav1"

  },

"pattern": "nav2",

  "name": "nav2",

  "target": "nav2"

  }

],

  "targets": {

  "loginPage": {

  "viewName": "Login",

  "viewLevel": 1

  },

"base": {

  "viewName": "Base",

  "viewLevel": 2

  },

  "nav1": {

  "parent": "base", 

  "viewName": "Home",

  "controlId": "pageContainer",

  "controlAggregation": "pages"

  },

  "nav2": {

"parent": "base",

  "viewName": "Products",  

  "controlId": "pageContainer",

"controlAggregation": "pages"

  }

  }

  }

  },

App.view.xml(Root file):

<mvc:View controllerName="NavigationCheck.controller.App" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">

  <App id="appId"></App>

</mvc:View>

Base.View.xml:

<mvc:View controllerName="fitgebuser.controller.Base" xmlns:mvc="sap.ui.core.mvc"

  xmlns:tnt="sap.tnt" xmlns="sap.m">

   <tnt:ToolPage id="toolPage">

  <tnt:header>

  <tnt:ToolHeader>

  <Button id="sideNavigationToggleButton" icon="sap-icon://menu2" type="Transparent" press="onSideNavButtonPress">

  <layoutData>

  <OverflowToolbarLayoutData priority="NeverOverflow"/>

  </layoutData>

  </Button>

  <ToolbarSpacer/>

  <Text class="title" text="Test Application" wrapping="false">

  <layoutData>

  <OverflowToolbarLayoutData priority="Disappear"/>

  </layoutData>

  </Text>

  </tnt:ToolHeader>

  </tnt:header>

  <tnt:sideContent>

  <tnt:SideNavigation expanded="true" itemSelect="onItemSelect">

  <tnt:NavigationList id="navigationList" width="320px">

  <tnt:NavigationListItem text="Nav1" icon="sap-icon://bar-chart" select="onNav1"></tnt:NavigationListItem>

  <tnt:NavigationListItem text="Nav2" icon="sap-icon://activity-assigned-to-goal" select="onNav2"></tnt:NavigationListItem>

  </tnt:NavigationListItem>

  </tnt:NavigationList>

  </tnt:SideNavigation>

  </tnt:sideContent>

  <tnt:mainContents>

  <NavContainer id="pageContainer"></NavContainer>

  </tnt:mainContents>

  </tnt:ToolPage>

</mvc:View>

[TrusPatel · Accepted solution]

Thanks for sharing the code.

It really helped.

[suresu22]

Hi Abiram,

sap.m.App --> login page on successful login navigate to --> home page with side navigation.

Regards,

Suresh

[Former Member]

Thanks for your reply. Can you elaborate your solution? Is there any sample to refer

[former_member227918]

Hi Abirami,

You can do a workaround, do visible false in on init of login page or while navigating to login page, as below:

..byId("btnId").setVisible(false);

and on successful login or inside oninit function of home page you can do set setVisible(true);

OR there may be some workaround using css as well.

Hope this help.

Regards,

Akhilesh

[Former Member]

HI Abirami ,

Its not clear what you exactly want .... if you dont want side navigation than why did you place your code in the view ??

or i think i m not getting it what you are trying to say ?

thanks

Viplove

[Former Member]

Thanks for your interest Viplove. I have added the side navigation code in app view xml so that it is common and available to all the other pages. If i dont add side navigation code in App view xml, i have to rewrite that code in all other pages. Now the problem is it appears in login page also. how can i remove from it from login page?