SAPUI5: What Is the EventBus? (+ Examples)

🏷️

This is about the SAPUI5 EventBus.

The SAPUI5 EventBus allows you to share methods across controllers.

So, if you want to learn what the SAPUI5 EventBus is and how to use it, you’re in the right place.

Let’s get started!

What Is the EventBus in SAPUI5?

The EventBus in SAPUI5 lets you share methods application-wide.

Imagine the SAPUI5 EventBus as a cookie jar—except that, inside it, you store methods instead of cookies.

You put methods inside the SAPUI5 EventBus and get them out again where and when you like.

For example, let’s say you have a button in view x.

The button has a press event in the form of a method in controller x.

You also have a view y.

View y has a button, too.

And this button does exactly the same thing as the button in view x.

Now, you could go ahead and just copy and paste the method from controller x into controller y.

The button in view y is supposed to do what the button in view y does, so why not?

But SAPUI5 provides you with a more elegant way:

Instead of copying and pasting the method from controller x into controller y, you use the SAPUI5 EventBus.

You put the method of controller x into the SAPUI5 EventBus and get it out in controller y.

How Does the EventBus Work in SAPUI5?

You find the exact specifications of the SAPUI5 EventBus in the SAPUI5 documentation:

sapui5_api_eventbus_screenshot
[source]

The SAPUI5 EventBus follows the principle of the publish-subscribe pattern.

However, to call it a cookie jar pattern would be more appropriate.

Here’s how to use the SAPUI5 EventBus in an SAPUI5 application.

Let’s return to the example from above:

Avoid Redundant Code via the SAPUI5 EventBus

You have two views:

  • View x
  • View y

Each view has a button with a press event.

Each button is supposed to do exactly the same thing when pressed: show a message toast that says “Button successfully clicked.”

<!-- in your xml view x -->
...
	
<Page>
    
  <Button
    press="onPress"/>
	
</Page>

...
<!-- in your xml view y -->
...
	
<Page>
    
  <Button
    press="onPress"/>
	
</Page>

...

You have two controllers.

There’s one controller for view x and one controller for view y:

  • Controller x
  • Controller y

In controller x you’ve already implemented the onPress method for the press event of the button in view x:

// in your controller x
...
    
onPress: function() {
                
  MessageToast.show("Button successfully clicked");

}

...

So, if you click the button in view x, a message toast shows up and says, “Button successfully clicked.”

To achieve the same behavior for the button in view y, you could just copy and paste the onPress method from controller x into controller y.

But, instead, you use the SAPUI5 EventBus.

First, you put the onPress method of controller x into the SAPUI5 EventBus:

// in your controller x
...

onInit: function() {

  // get the EventBus
  var oEventBus = this.getOwnerComponent().getEventBus();
               
  // put the onPress method into the EventBus
  oEventBus.subscribe("onPress", this.onPress, this);

},
    
onPress: function() {
                
  MessageToast.show("Button successfully clicked");

}

...

Second, you get the method onPress out of the SAPUI5 EventBus in controller y and reuse it:

// in your controller y
...
    
onPress: function() {
                
  // get the EventBus
  var oEventBus = this.getOwnerComponent().getEventBus();

  // get the onPress method out of the EventBus
  oEventBus.publish("onPress");

}

...

As mentioned before, it’s just like a cookie jar:

You put a cookie into the cookie jar and then get the cookie out again at a later point to eat it.

But that’s only the beginning of what the SAPUI5 EventBus can do:

Pass Data via the SAPUI5 EventBus

Using the SAPUI5 EventBus not only avoids redundant code but also allows you to pass data between controllers.

For example, you want the message toast to say “Button x successfully clicked” when the button from view X is clicked.

And vice versa, you want the message toast to say “Button y successfully clicked” when the button from view Y is clicked.

You can do that with the SAPUI5 EventBus.

Let’s change the onPress method in controller x so that it accepts two parameters:

  • oEvent
  • oData

The parameter oEvent is the regular event object you get passed from a fired event such as the press event from a button.

The parameter oData contains the message that the message toast is supposed to show:

// in your controller x

...

onInit: function() {

  // get the EventBus
  var oEventBus = this.getOwnerComponent().getEventBus();     

  // put the onPress method into the EventBus
  oEventBus.subscribe("onPress", this.onPress, this);

},
    
onPress: function(oEvent, oData) {
                
  MessageToast.show(oData.message);

}

...

Now you can pass, via the SAPUI5 EventBus, the two parameters from controller y into the method onPress of controller x:

// in your controller y
...
    
onPress: function(oEvent) {
                
  var oData = {
    message: "Button y successfully clicked"
  };

  // get the EventBus
  var oEventBus = this.getOwnerComponent().getEventBus();

  // get the onPress method out of the EventBus
  oEventBus.publish("onPress", oEvent, oData);

}

...

The message toast will say, “Button y successfully clicked.”

Why the EventBus in SAPUI5?

Simple as that:

  • You avoid duplicate code in your application
  • You can communicate between controllers

First, you don’t have the same code in multiple controllers.

Instead, you have the code in one controller and share it with other controllers via the SAPUI5 EventBus instead of copying and pasting it across the board.

This way, your application remains clean and tidy.

Second, you can send data via the SAPUI5 EventBus across controllers.

More About the SAPUI5 EventBus

You can retrieve the SAPUI5 EventBus in two ways:

  • sap.ui.getCore().getEventBus();
  • sap.ui.core.Component.getEventBus(); (this.getOwnerComponent().getEventBus(); inside of a controller)

Use sap.ui.core.Component.getEventBus() to retrieve the SAPUI5 EventBus:

“If you need an event bus, use the event bus of the component (sap.ui.core.Component.getEventBus()). By this, you avoid conflicting event names and make sure that your listeners are automatically removed when the component is unloaded. Do not use the global event bus (sap.ui.getCore().getEventBus()).”

[source]

Furthermore, require the SAPUI5 EventBus in your controller when you want to use it in the controller:

// in your controller y

...

onInit: function() {

  // get the EventBus
  var oEventBus = this.getOwnerComponent().getEventBus();     

}

...

If you don’t require the SAPUI5 EventBus in your controller beforehand, it gets loaded via a synchronous XMLHttpRequest.

That can block the execution of code in your application, which may lead to lags.

Fun fact: The SAPUI5 EventBus was used in the beginnings of SAPUI5 for the navigation instead of routing:

A new Routing mechanism was introduced to UI5 in release 1.16. For in-app navigation, this supersedes previous techniques such as using the sap.ui.core.EventBus or sharing navigation-container specific controller code amongst aggregated pages.

[source]

🙌 More Articles

🔥 The Complete SAP ERP Modules Overview Infographic in PDF Format (Free)

Plus, don't miss future infographics and free SAP tips and insights that are available only to newsletter subscribers. 

Leave a Comment

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.
You need to agree with the terms to proceed

Menu