How to switch UI5 content on demand?

Question

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

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.

Answer 1

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}}' />

Controller:

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

and it works. Screenshots:

and :