How to add ColumnListItem to a table inside a page in MVC from other page controller

Question

I have a SAPUI5 application written in MVC

I have a view called oPage4:

var landscapePage = new sap.m.Page({
        title : "Landscape Name",
        showNavButton : true,
        navButtonPress : [oController.back,oController],
        footer : new sap.m.Bar({
            id : 'landscapePage_footer',
            contentMiddle : [ 
             new sap.m.Button({

            }),
             new sap.m.Button({

            })
            ]
        }),
});

oLandscapePageTable = new sap.m.Table("landscape", {
        inset : true,
        visible : true,
        getIncludeItemInSelection : true,
        showNoData : false,
        columns : [ new sap.m.Column({
            styleClass : "name",
            hAlign : "Left",
            header : new sap.m.Label({
            })
        }) ]
});

landscapePage.addContent(oLandscapePageTable);
return landscapePage;

then inside page1 controller I want to add a columnlistitem to the table of page 4.

var oPage4 = sap.ui.getCore().byId("p4");
var landscapePageRow = new sap.m.ColumnListItem({
    type : "Active",
    visible : true,
    selected : true,
    cells : [ new sap.m.Label({
        text : something
    }) ]
});
oPage4.getContent().addItem(landscapePageRow);

it doesn't work. please show me how to do so?

Answer 1

Ok, I think I understood your problem now. In general I would avoid calling the page and doing manipulations on it from another view. However, it is absolutely possible:

Additional functions in your view

You can extend your page4 with some more functions that can be called from outside like this:

sap.ui.jsview("my.page4", {

    createContent : function() {
        this.table = ...    
        ...
    },

    addColumnListItem : function(columnListItem) {
        // add it to the table calling this.table ...
    }

}

From another view you´re now able to call this function like this:

var page4 = sap.ui.jsview("my.page4");
page4.addColumnListItem(page4, columnListItem);

Attention: The page4 object itself doesn´t point to the control you´re returning but to the the view instance itself. You will notice this, if you log the page4 object to the console. This is why you have to add functions like described.

Some other approaches would be to use the EventBus like described here to publish and subscribe to events. Since you´ve asked for it let me show you how you could do it:

Using the EventBus

The main intention is, that one can subscribe to a particular event and others can publish such events to the eventbus. Let me give you an example:

Subscribing to the EventBus:

var eventBus = sap.ui.getCore().getEventBus();
eventBus.subscribe("channel1", "event1", this.handleEvent1, this);

Of course you can name your channel and events as you wish. The third parameter indicates the function, that will be called in case of published events. The last paramter is the scope 'this' will point to in the given function.

Your handleEvent1 function could look like this:

handleEvent1 : function(channel, event, data) {
    var listItem = data.listItem
}

Publishing events to the EventBus:

var columnListItem = ...
var eventBus = sap.ui.getCore().getEventBus();

eventBus.publish("channel1", "event1", 
    {
        listItem : columnListItem
    }
);

One more option you have is to make the columnListItems depending on a model. Like everytime it depends on your actual architecture and data.

Let me know if this solved your problem or if you need some more information.