UI5
No Comments

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

Oldtimer VW bus in red and white.

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.

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

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