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?

Could you describe 'what' exactly doesn't work? Is something written to the developer console? One first thing I see is that you try to find page4 by ID ("p4") but your page4 object doesn't seem to have an Id. — Tim Gerlach, Apr 03 '14 at 07:34
Hi Tim p4 is the id of the page in the split app page which is like that: var oPage4 = sap.ui.view({id:"p4", viewName:"mvc2.oPage4", type:sap.ui.core.mvc.ViewType.JS}); I want to know how can I get page 4 inside page 1 and access its table and add a ColumnListItem to it? thank you — Ryan, Apr 03 '14 at 10:10

Tim Gerlach · Accepted Answer · 2014-08-19T12:30:16.537

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.

Thank you Tim for your comprehensive solution. I read through the page you sent me and I agree with you, this is the right way of doing what I want to achieve. I am not %100 sure how to do so though. I was wondering if you can provide me with an example. such as how to instantiate the sap.ui.core.EventBus and how to use it in my application. By the way my application is made of one view and control of split page and many other pages. thank you — Ryan, Apr 04 '14 at 00:49
one More question I have for you Tim. can you please show me how to call controller page of one view and then calling functions inside the controller? i tried this line but it doesn't work: sap.ui.jsview("my.page4").getController(); — Ryan, Apr 04 '14 at 01:11
Ok, see my edited answer on how you could use the EventBus if you´d like to do so. To answer your last question: Using sap.ui.jsview(...).getController() should really give you access to the controller and its functions. I just tried it out again. Maybe there`s something else going wrong. You could try to debug this. — Tim Gerlach, Apr 04 '14 at 18:22

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

1 Answers1

Additional functions in your view

Using the EventBus

Linked