1. Guides
  2. SAPUI5 EventBus: What’s the EventBus in SAPUI5?

SAPUI5 EventBus: What’s the EventBus in SAPUI5?

GuidesSAP
SAPUI5 EventBus: What's the EventBus in SAPUI5?

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!

Contents

What’s the EventBus in SAPUI5?

Data multi user light blue background

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.

Cookie jar and milk.

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?

Data program codes light blue background

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

SAPUI5 EventBus API documentation 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.”

<!-- view X -->

<mvc:View 
    controllerName="my.application.ViewX"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
	
    <Page>
    
        <Button
            press="onPress"/>
	
    </Page>

</mvc:View>
<!-- view Y -->

<mvc:View 
    controllerName="my.application.ViewY"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
	
    <Page>
    
        <Button
            press="onPress"/>
	
    </Page>

</mvc:View>

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:

// controller X

sap.ui.define(

    [
        "sap/ui/core/mvc/Controller",
        "sap/ui/core/EventBus",
        "sap/m/MessageToast"
    ], 

    function(
        Controller, 
        EventBus,
        MessageToast
    ) {
        "use strict";

        return Controller.extend("demo.controller.Home", {
    
            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:

// controller X

sap.ui.define(

    [
        "sap/ui/core/mvc/Controller",
        "sap/ui/core/EventBus",
        "sap/m/MessageToast"
    ], 

    function(
        Controller, 
        EventBus,
        MessageToast
    ) {
        "use strict";

        return Controller.extend("demo.controller.Home", {

            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:

// controller Y

sap.ui.define(

    [
        "sap/ui/core/mvc/Controller",
        "sap/ui/core/EventBus",
        "sap/m/MessageToast"
    ], 

    function(
        Controller, 
        EventBus
        MessageToast
    ) {
        "use strict";

        return Controller.extend("demo.controller.Home", {
    
            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:

// controller X

sap.ui.define(

    [
        "sap/ui/core/mvc/Controller",
        "sap/ui/core/EventBus",
        "sap/m/MessageToast"
    ], 

    function(
        Controller, 
        EventBus,
        MessageToast
    ) {
        "use strict";

        return Controller.extend("demo.controller.Home", {

            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:

// controller Y

sap.ui.define(

    [
        "sap/ui/core/mvc/Controller",
        "sap/ui/core/EventBus",
        "sap/m/MessageToast"
    ], 

    function(
        Controller, 
        EventBus,
        MessageToast
    ) {
        "use strict";

        return Controller.extend("demo.controller.Home", {
    
            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?

Website click gesture light turquoise background

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

Programming light blue background

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:

// controller Y

sap.ui.define(

    [
        "sap/ui/core/mvc/Controller",
        "sap/ui/core/EventBus", // require the EventBus
        "sap/m/MessageToast"
    ], 

    function(
        Controller, 
        EventBus,
        MessageToast
    ) {
        "use strict";

        return Controller.extend("demo.controller.Home", {
    
            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]

Now It’s Your Turn

Speech bubbles light blue background

Hopefully, you found this guide to “SAPUI5 EventBus: What’s the EventBus in SAPUI5?” helpful.

And now it’s your turn:

  • Did this guide answer your questions?
  • Is anything missing?
  • Is there something you need to know that wasn’t covered here?
  • Do you have questions about something in the guide?
  • Or maybe you just want to share your thoughts.

Either way, go ahead and leave a comment below right now!

GuidesSAP

More Similar Articles

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