<semantic:DetailPage title="Detail Page Title">
    <mvc:XMLView viewName="query.sap.view.Table"/>
    <mvc:XMLView viewName="query.sap.view.chart"/>

I have two nested views in the same content and I want to display only one of them. When I press a button, it should switch to the other one.

3 Answers

Rahul Bhardwaj On Best Solutions

Lets have a switch and save its current value to a local JSON Model. Now, we will use this value to switch between the 2 views. If switch is true, show first view else show second switch.

Below is the code:

XML ( I've just used the texts in place of View (same thing)) :

        <Switch state='{/showFirstView}' />
        <Text text='TExt 1' visible='{/showFirstView}' />
        <Text text='TExt 2' visible='{=!${/showFirstView}}' />


onInit: function() {
        var model = new sap.ui.model.json.JSONModel({showFirstView:true});

and it works. Screenshots: enter image description here

and :

enter image description here

Sid On

I suggest adding a single view. Later, on any chosen event, you can use sap.m.semantic.SemanticPage.removeContent(vContent) to remove the original view and sap.m.semantic.SemanticPage.addContent() to add the new View.

Link to the relevant SAPUI5 Guide Page

Hope it helps you.

Boghyon Hoffmann On

In order to make only one control visible (in our case one of the child views), we might be tempted to instantiate all controls first and use the visible property to hide "unneeded" ones but we should keep in mind that this approach might lead to a performance issue depending on the complexity and the amount of contents of those controls. This is especially true for controls such as tables and views which is the reason why we should instantiate such controls lazily instead of all at once.

Thankfully, UI5 has already a built-in lazy loading feature for our case which can be configured easily in the targets property inside the app descriptor file (manifest.json).

Here is a minimal example of showing only one child view on demand: https://embed.plnkr.co/HRSJ44/

For this, we need three properties for the target object of the child view:

  1. parent: Pointing to a parent target name where the parent view is defined
  2. controlId: The ID of the control in which the child view should be attached.
    In the Plunker example above, the control is a NavContainer which also offers a sliding animation as a bonus. The animation can be turned off with transition: "show".
  3. controlAggregation: In our case "pages" (default aggregation of NavContainer).

After defining those three properties, we can either display the target view without changing the hash, or navigate to the child view by calling component.getRouter().navTo("thatChildRouteName");. Either way, the child view will be created lazily and we have a flexible way of switching through different child views.

Network waterfall showing lazy loading on a button press: UI5 lazy loading on a button press