SAPUI5 - How to set a link a MasterDetail Split App

Question

I'm working on a SAPUI5 App containing a SplitApp with one MasterPage and many DeatilPages. I create a list of StandartListItems for the MasterPage, if I select one of them, I want to show the right DetailPage. But at this point I have no idea how to implement it.

Fill the list of the MasterPage:

var oMasterPage = sap.ui.getCore().byId("masterPage");
    var masterContentList = sap.ui.getCore().byId("masterList");

    masterContentList.bindItems({
        path : "/inhaltList",
        template : new sap.m.StandardListItem({
            title: "{master}"
        })
    });

And for each MasterListItem I create a DetailPage and add it to the SplitApp:

var detailContentList = new sap.m.List({});
         detailContentList.bindItems({
            path : "/inhaltList",
            sorter : new sap.ui.model.Sorter("name"),
            template : new sap.m.CustomListItem({
                content: [
                    new sap.m.VBox({
                        width : "80%",
                        displayInline : false,
                        direction: "Column",
                        items:[
                        new sap.ui.commons.TextView({text:"titel", design:sap.ui.commons.TextViewDesign.H2}),
                        //new sap.ui.commons.TextView({text:"{detail>titel}", design:sap.ui.commons.TextViewDesign.H2}),
                        //new sap.ui.commons.TextView({text:"{detail>content>text}", design:sap.ui.commons.TextViewDesign.Small})
                        new sap.ui.commons.TextView({text:"textetextetextetexttextexte", design:sap.ui.commons.TextViewDesign.Small})
                        ]
                    })
                ]
            })
        });

        var DetailPage = new sap.m.Page({
                    path : "/inhaltList",
                    title: "{master}",
                    content:[
                    detailContentList
                    ]
                });


        splitApp.addDetailPage(DetailPage);

In the end, I have one MasterPage in the SplitApp and in one case 4 DetailPages. That is up to this point working.

Now, I want to make a relation from the MasterListItem to the right DetailPage, so that the right DetailPage is showing up, if I selct the MasterListItem for that.

Does anyone have an idea?

Answer 1

As I understand you have sap.m.StandardListItem with some items and you want to switch details while clicking on an item. Easiest way: 1. add press event to your item. controller is a controller, if you are doing it in a view.

press: [controller.pressItem, controller]

2.from pressItem, get your application and use to method.

var app = sap.ui.getCore().byId("splitApp");
app.to(id, "slide", data)

where id - is the id of your detail page and data is the payload you want to send to the page.

Notes: 1. Implementation through event bus will also work and would be better