Class sap.m.routing.TargetsModule: sap/m/routing/Targets

{
    config: {
        viewType : "XML"
    }
    targets : {
        xmlTarget : {
            ...
        },
        jsTarget : {
            viewType : "JS"
            ...
        }
    }
}

{
    xmlTarget : {
        // coming from the defaults
        viewType : "XML"
        ...
    },
    jsTarget : {
       // XML is overwritten by the "JS" of the targets property
       viewType : "JS"
      ...
    }
}

{
    targets: {
        welcome: {
            viewName: "Welcome",
            viewType: "XML",
            ....
            // Other target parameters
        },
        goodbye: {
            viewName: "Bye",
            viewType: "JS",
            ....
            // Other target parameters
        }
    }
}

This will create two targets named 'welcome' and 'goodbye' you can display both of them or one of them using the display function.

{
    targets: {
        // If display("masterWelcome") is called, the master view will be placed in the 'MasterPages' of a control with the id splitContainter
        masterWelcome: {
            viewName: "Welcome",
            controlId: "splitContainer",
            controlAggregation: "masterPages"
        },
        // If display("detailWelcome") is called after the masterWelcome, the view will be removed from the master pages and added to the detail pages, since the same instance is used. Also the controls inside of the view will have the same state.
        detailWelcome: {
            // same view here, that's why the same instance is used
            viewName: "Welcome",
            controlId: "splitContainer",
            controlAggregation: "detailPages"
        }
    }
}

If you want to have a second instance of the welcome view you can use the following:

// Some code you execute before you display the taget named 'detailWelcome':
var oView = sap.ui.view(({ viewName : "Welcome", type : sap.ui.core.mvc.ViewType.XML});
oTargets.getViews().setView("WelcomeWithAlias", oView)

{
    targets: {
        // If display("masterWelcome") is called, the master viewName will be placed in the 'MasterPages' of a control with the id splitContainter
        masterWelcome: {
            viewName: "Welcome",
            controlId: "splitContainer",
            controlAggregation: "masterPages"
        },
        // If display("detailWelcome") is called after the masterWelcome, a second instance with an own controller instance will be added in the detail pages.
        detailWelcome: {
            // same viewName here, that's why the same instance is used
            viewName: "WelcomeWithAlias",
            controlId: "splitContainer",
            controlAggregation: "detailPages"
        }
    }
}

<View xmlns="sap.m">
    <App id="myApp"/>
</View>

<View xmlns="sap.m">
    <IconTabBar>
        <items>
            <IconTabFilter>
                <!-- content of our first tab -->
            <IconTabFilter>
            <IconTabFilter id="mySecondTab">
                <!-- nothing here, since we will lazy load this one with a target -->
            <IconTabFilter>
        </items>
    </IconTabBar>
</View>

    new Targets({
        //Creates our views except for root, we created this one before - when using a component you
        views: new Views(),
        config: {
            // all of our views have that type
            viewType: 'XML',
            // a reference to the app control in the rootView created by our UIComponent
            controlId: 'myApp',
            // An app has a pages aggregation where the views need to be put into
            controlAggregation: 'pages'
        },
        targets: {
            detail: {
                viewName: 'Detail'
            },
            secondTabContent: {
                // A reference to the detail target defined above
                parent: 'detail',
                // A reference to the second Tab container in the Detail view. Here the target does not look in the rootView, it looks in the Parent view (Detail).
                controlId: 'mySecondTab',
                // An IconTabFilter has an aggregation called content so we need to overwrite the pages set in the config as default.
                controlAggregation: 'content',
                // A view containing the content
                viewName: 'SecondTabContent'
            }
        }
    });

Now if we call oTargets.display("secondTabContent") , 2 views will be created: Detail and SecondTabContent. The 'Detail' view will be put into the pages aggregation of the App. And afterwards the 'SecondTabContent' view will be put into the content Aggregation of the second IconTabFilter. So a parent will always be created before the target referencing it.

    {
        targets: {
            startPage: {
                viewLevel: 0
                // more properties
            },
            userData: {
                viewLevel: 1
                // more properties
            },
            confirmRegistration: {
                viewLevel: 2
                // more properties
            },
            settings: {
                //no view level here
            }
        }
    }

Currently the 'userData' target is displayed.

• If we navigate to 'startPage' the navContainer will show a backwards navigation, since the viewLevel is lower.
• If we navigate to 'userData' the navContainer will show a forwards navigation, since the viewLevel is higher.
• If we navigate to 'settings' the navContainer will show a forwards navigation, since the viewLevel is not defined and cannot be compared.