In the previous article we discussed an approach to dynamically display full screen and detailed screen. In the approach 1, we had two controls (one for full screen and another for detailed) in root view. In this tutorial we would achieve the same functionality using just one control in the root view. Basically, we are going to play around with the visibility property of the master and detail page.
Approach – 2: Maintaining only one control in root view (App.view.xml). The control we named is for both full screen and master-detail. Here at one time we will hide the master page and making only full screen visible while on other instance we will make both master and detail page visible.
Steps:
1. Create a root view(App.view.xml) with only one control
2. Create a full screen view
3. Create 2 views (Main.view.xml – for master page, Empty.view.xml- for detail page)
4. Configure routes, routing and target in manifest.json
5. Initialize router in component.js
6. Controller.js for navigation on button click
7. Execute the application
Step-1: Create a root view(App.view.xml) with only one control
As we have seen the project structure in approach – 1, it should be the same for this approach as well.
The root view App.view.xml should look like below
As shown in the above image the control and control should be provided with id.
Mode=“HideMode” is used in order to hide the master page and to display the full screen
Step-2: Create a full screen view
My full screen page which loads initially should be the same as Approach – 1 as below
In the above image we have created a button “MasterDetail”, clicking on that will navigate to master-detail pages.
Steps-3: Create 2 views (Main.view.xml – for master page, Empty.view.xml- for detail page)
Main.view.xml:
Empty.view.xml:
In the above image we have created a button “Full Screen”, clicking on that will navigate back to full screen page.
Step-4: Configure routes, routing and target in manifest.json
In the above manifest.json, the root view and the config along with its id is provided as shown below,
Note: Here the controlId: “mySplitApp” is the id for control which can be seen in App.view.xml.
The full screen page and master-detail page is defined in routes as
Note:
Name – will be provided where we are navigating to next screen
Pattern – will appear in browser hash tag
Target – will be used to display the page which should be displayed
In the above image in order to load the full screen page initially with respect to control, the “viewLevel” is set to “1”.
Since it is a full screen page with hide option of master page, the master page aggregation is “masterPages” and the full screen view is detail page aggregation is “detailPages” as shown in above image.
Since we need to navigate to master-detail page after button click from full screen page we are setting the view level to 2, where the master page on the left side which is hidden would be shown and the right side detail pages, empty and full screen will be changed
Step-5: Initialize router in component.js
Note: The router initialization is instantiated in init function as shown above.
Step-6: Controller.js for navigation on button click
After full screen page is displayed we need to navigate to master-detail page.
So we will write the code functionality in event handler of button in FullScreen.controller.js as:
Since navigation from full screen to master-detail is done by button click we need to show both pages.
As shown in the above image, we need to navigate to full screen page from master-detail page and set the master page to hide.
Step-7: Execute the application
Initial display
In the above image the full screen page displays but the master page is hidden as per code (logic). If you click the button
it should show the hidden master page as:
And the pattern is
Now click “MasterDetail” button, it should navigate to master-detail page as shown below:
Now the pattern is
Now click the button “Full Screen”, it should navigate back to full screen page as:
This is a simple demo application for beginners. If you are already working in SAPUI5 project, you would know that there are better ways to do. But, this article is targeted to beginners. Just playing around with the visibility mode does the trick. Technically, everything is there at the same time. We are just hiding it and displaying it based on the button clicks.
