What Is the EventBus and How Does It Work in SAP UI5?

The sap.ui.core.EventBus in SAP UI5 allows sharing events application-wide. It is possible to attach or detach events to an EventBus. One can retrieve the global EventBus anywhere in an application.

Therefore one can retrieve to an EventBus applied events anywhere in an application. The primary use case for an EventBus is to enable communication between controllers.

For example, there are two different views. Each view has its controller on its own. And both views contain a button control. To both buttons is a press event attached.

The event raises a message toast, which says ‘Hello’. Without an EventBus, it would be necessary to initialize the press event for the button in each view’s controller.

But with the EventBus, it is sufficient to initialize the button press event just in one controller. Or in a base controller which extends the views’ controllers. After the press event is initialized, it is to attach to the EventBus. Then the EventBus is to receive in the views’ controllers.

For example, the methods of the press events of two buttons from two different views and therefore, from two different controllers. Both to the buttons’ press events attached methods using the same method, which is shared through an EventBus.

The first XML view and its button …

<!-- in your XML view 1 -->

...

<Button
  text='button_1'
  press='onPressButton'>
</Button>

...

… the second XML view and its button …

<!-- in your xml view 2 -->

...

<Button
  text='button_2'
  press='onPressButton'>
</Button>

...

… the first XML view’s controller which holds the between the controllers of view 1 and view 2 through the EventBus shared method called _onButtonPress – the controller attaches the method to the EventBus and consumes it as well …

// in your controller of view 1

...

onInit: function() {

  var oEventBus = sap.ui.getCore().getEventBus();
  oEventBus.subscribe("_onButtonPress", this._onButtonPress, this);

},

onButtonPress: function(oEvent) {

  var oData = {
    message: "View 1 button was clicked."
  };

  var oEventBus = sap.ui.getCore().getEventBus();
  oEventBus.publish("_onButtonPress", oEvent, oData);

},

_onButtonPress: function(oEvent, oData) {

  var sMessage = oData.message;
  MessageToast.show("sMessage");

}

...

… and the second XML view’s controller which consumes the method _onButtonPress from the EventBus

// in your controller of view 2

...

onButtonPress: function(oEvent) {

  var oData = {
    message: "View 2 button was clicked."
  };

  var oEventBus = sap.ui.getCore().getEventBus();
  oEventBus.publish("_onButtonPress", oEvent, oData);

}

...

There is an example of the EventBus as a SAP UI5 mini application.

2 Comments

Get Exclusive SAP Tips

Learn about exclusive SAP tips and insights that are only shared with the private newsletter subscribers.

Will SAP UI5 replace the SAP Web UI?

Result

Essential Ressources

2 Comments. Leave new

Hi,

Nice article! Does it make sense to use Event Bus if we have a Base Controller? I think it doesn’t as you can just move _onButtonPress to Base and call it from different controllers.

Reply

Hi Adrian, thanks and a great question! A base controller should contain basic functionalities which almost every controller make use of such as this.getView().getRouter(). An event bus should contain specific events which just a couple of controllers make use of such as a button press event. Otherwise, you would load for every controller all the specific methods from the base controller even if the majority of the controllers do not use the specific methods. For example, you have ten controllers overall, and two controllers use the same button press event. Then it would be better to share the button press event via the event bus between the two controllers instead of incorporate the button press event in the base controller. Otherwise, you load the button press event in all ten controllers despite that eight controllers do not use the event at all.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu