This is about SAPUI5 EventBus.
The SAPUI5 EventBus lets you share methods across controllers.
So if you want to learn what the SAPUI5 EventBus is and how to use it, then you’re in the right place.
Let’s get started!
What Is the EventBus in SAPUI5?
In SAPUI5, you can share methods application-wide with the EventBus.
Imagine the SAPUI5 EventBus as a cookie jar. Except instead of cookies, you’re storing methods.
Put the methods inside the SAPUI5 EventBus and get them out when and where you like.
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.
You could just copy and paste the controller x method into controller y.
The button in view y should do what the button in view x does, so why not?
SAPUI5 offers a more elegant way:
Instead of copying and pasting the method from controller x to controller y, you can use the SAPUI5 EventBus.
The method of controller x goes into the SAPUI5 EventBus and gets out in controller y. Recycle the method.
How Does the EventBus Work in SAPUI5?
You can find exact specs for the SAPUI5 EventBus in the SAPUI5 documentation:
The SAPUI5 EventBus uses the publish-subscribe pattern.
However, it would be more appropriate to call it a cookie jar pattern.
Here’s how to use the SAPUI5 EventBus in an SAPUI5 app.
Let’s go back 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 that has a press event.
Each button is supposed to do 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 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, when you click the button in view x, a message toast appears and says, “Button successfully clicked.”
If you want the button in view y to behave the same as the button in view x, you could just copy and paste the onPress method.
Instead, you use the SAPUI5 EventBus.
First, 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 from 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 take the cookie out when it’s time to eat it.
But that’s just the start of what the SAPUI5 EventBus can do:
Pass Data via the SAPUI5 EventBus
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 toast message 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 it accepts two parameters:
- oEvent
- oData
The parameter oEvent is the event object you get 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 pass, via the SAPUI5 EventBus, two parameters from controller y to the onPress method in 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 of copying and pasting the code across the board, you have the code in one controller and share it via the SAPUI5 EventBus.
So, your application stays neat and tidy.
Second, the SAPUI5 EventBus allows you to send data between controllers.
There is still more to the SAPUI5 EventBus:
More About the SAPUI5 EventBus
You can get 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 get 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()).
[SAP]
Furthermore, you need to include 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 your controller doesn’t require the SAPUI5 EventBus beforehand, it gets loaded using a synchronous XMLHttpRequest.
This could block the process of running your code, causing lags.
Fun fact: The SAPUI5 EventBus was used in the beginnings of SAPUI5 for navigation:
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.
[SAP]