OpenUI5 / SAPUI5 Communication between controllers – Using Publish and Subscribe from EventBus

Hi SAPUI5 Developers,

In a SAPUI5 application you have probably for every view a controller. In every controller you’ll have functions.

A good developer don’t want to write unnecessary code and reuse coding as much as possible 🙂 Therefore it can be useful to call functions from other controllers.

For example, this could be useful when you’re working with nested views. You could have for example a parent view that exists out of two sub views. In your sub views you want to use a function from you’re parent view.

But there could be a lot of other reason that you want to communicate between controllers.

Therefore SAPUI5 has the EventBus. The EventBus has two functions to set up a communication between controllers:

• Subscribe

          This function will define an event listener for a specific event.

• Publish

          This function will trigger a specific event

The publish function can be called from everywhere in the project for different events. If there is a subscribe function defined for the triggered event, then it will execute the event handler.

How to use this in your SAPUI5 project?

In my example I’m using a “Main” view that contains a Label, a Button and two sub views.

In the controller of my “Main” view, I have a function to show a message box:

This will result in the following:

Now in the sub views I also add a Label and a Button.

SubView1:

SubView2:

Now I want to use the function of my “Main” view to show the information message from the sub views. Therefore I edit the controller of my “Main” view.

In the “onInit” I define two event listeners with the subscribe function, one for “SubView1” and another for “SubView2”. Both are using the same event handler. They also require a name and an event. I use the name of the view where the event will be fired and the name of the event.

The event handler is the same function that is used for the “Press” event of the Button in the “Main” view. Therefore I have to change this function to make it work for both cases.

I’ve defined event listeners for the buttons on my sub views. But I still need to trigger these events.

To trigger these events I used the publish function of the EventBus in the button press function.

Controller of SubView1:

Controller of SubView2:

I need to use the same name and event as in the subscribe function to trigger the event. It will only call the event handler if these parameters have a match. Additionally I also add parameter with some text.

This will give the following result:

Use the button on the “Main” view

Press the button on sub view 1

Press the button on sub view 2

Important to know, use the unsubscribe function of the eventbus when your app is used in the Fiori Launchpad! Otherwise it will stop working correctly after the following actions:

1. Open the Fiori Launchpad
2. Go to your app
3. Go back to the Fiori Launchpad
4. Open your app a second time

This last step will subscribe your function a second time to the eventbus.This will lead to errors.

Add the unsubscribe in the onAfter function, example:

onExit:function(){

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

     eventBus.unsubscribe(“SubView1″,”ShowPopup”,this.onShowPopup,this);

}

Hopefully this is useful.

You can find the full project on Github:

https://github.com/lemaiwo/SAPUI5Eventing

Try out the result:

http://lemaiwo.github.io/SAPUI5Eventing/webapp/test/index.html

Kind regards,

Wouter