Skip to Content

Hi SAPUI5 Developers,

In a SAPUI5 application you have probably for every view a controller. In every controller you’ll have functions.

A good developer don’t want to write unnecessary code and reuse coding as much as possible πŸ™‚ Therefore it can be useful to call functions from other controllers.

For example, this could be useful when you’re working with nested views. You could have for example a parent view that exists out of two sub views. In your sub views you want to use a function from you’re parent view.

But there could be a lot of other reason that you want to communicate between controllers.

Therefore SAPUI5 has the EventBus. The EventBus has two functions to set up a communication between controllers:

  • Subscribe

          This function will define an event listener for a specific event.

  • Publish

          This function will trigger a specific event

The publish function can be called from everywhere in the project for different events. If there is a subscribe function defined for the triggered event, then it will execute the event handler.

How to use this in your SAPUI5 project?

In my example I’m using a “Main” view that contains a Label, a Button and two sub views.

/wp-content/uploads/2015/10/img1_817102.png


In the controller of my “Main” view, I have a function to show a message box:


/wp-content/uploads/2015/10/img2_817109.png


This will result in the following:


/wp-content/uploads/2015/10/img3_817110.png


Now in the sub views I also add a Label and a Button.

SubView1:


/wp-content/uploads/2015/10/img4_817111.png

SubView2:

/wp-content/uploads/2015/10/img5_817112.png

Now I want to use the function of my “Main” view to show the information message from the sub views. Therefore I edit the controller of my “Main” view.

In the “onInit” I define two event listeners with the subscribe function, one for “SubView1” and another for “SubView2”. Both are using the same event handler. They also require a name and an event. I use the name of the view where the event will be fired and the name of the event.

/wp-content/uploads/2015/10/img6_817113.png

The event handler is the same function that is used for the “Press” event of the Button in the “Main” view. Therefore I have to change this function to make it work for both cases.

/wp-content/uploads/2015/10/img7_817114.png

I’ve defined event listeners for the buttons on my sub views. But I still need to trigger these events.

To trigger these events I used the publish function of the EventBus in the button press function.

Controller of SubView1:

/wp-content/uploads/2015/10/img8_817115.png

Controller of SubView2:

/wp-content/uploads/2015/10/img9_817116.png

I need to use the same name and event as in the subscribe function to trigger the event. It will only call the event handler if these parameters have a match. Additionally I also add parameter with some text.

This will give the following result:

Use the button on the “Main” view

/wp-content/uploads/2015/10/img10_817117.png

Press the button on sub view 1

/wp-content/uploads/2015/10/img11_817118.png

Press the button on sub view 2

/wp-content/uploads/2015/10/img12_817119.png

Important to know, use the unsubscribe function of the eventbus when your app is used in the Fiori Launchpad! Otherwise it will stop working correctly after the following actions:

  1. Open the Fiori Launchpad
  2. Go to your app
  3. Go back to the Fiori Launchpad
  4. Open your app a second time

This last step will subscribe your function a second time to the eventbus.This will lead to errors.

Add the unsubscribe in the onAfter function, example:


onExit:function(){

     var eventBus = sap.ui.getCore().getEventBus();

     eventBus.unsubscribe(“SubView1″,”ShowPopup”,this.onShowPopup,this);

}

Hopefully this is useful.

You can find the full project on Github:

https://github.com/lemaiwo/SAPUI5Eventing

Try out the result:

http://lemaiwo.github.io/SAPUI5Eventing/webapp/test/index.html

Kind regards,

Wouter

To report this post you need to login first.

15 Comments

You must be Logged on to comment or reply to a post.

  1. Wolfgang Pfeifer

    Hi Wouter,

    thanks for sharing. Great stuff! Question: I plan to use this for parameter handling during navigation. Will the following scenario work? I mark some entries in view1, take out the values, publish them to the EventBus, navigate to view2, go through onInit(), create subscription and want to use the values in view2. I am in doubt about that a little since view2 is not initialized, when values are published to the EventBus. Are they getting queued and the triggering event as well or will they be lost and the payload wont male it to view2 in this scenario?

    Thanks a lot in advance.

    best regards

    WPdat

    (0) 
    1. Wouter Lemaire Post author

      Hi Pfeifer,

      I wouldn’t use this for sending parameters from one view to another. Therefore I would use routing parameters. If you’re sending a full json object to the view I would suggest to use a temporary JSON model to store the json object.

      Kind regards,

      Wouter

      (0) 
      1. Sijin Chandran

        I used temporary JSON model, reason being am using Router concepts for navigation.

        And passed and retrieved data using setModel() and getModel() methods respectively.

        Thanks for this suggestion.

        Regards,

        Sijin

        (1) 
  2. Wolfgang Pfeifer

    Hi,

    thanks a lot. After I tried to use router parameters in navTo with sap.m.routing I observed, that the handed over object is not transmitted. It is not appearing in arguments of the routing event I caught on the receiving side. Strange. All examples I found so far working with rewritten router , means own router class implementations. I think I gonna solve the problem with more or less global JSON models which obviously survive context changes during navigation.

    best regards

    Wolfgang

    (0) 
  3. Shivam Bedwal

    Hello Wouter,


    I have a question regarding passing of data from one view to another view, using event bus subscription –

    Does this event bus publish and subscription works only in case of nested views. ?


    I need to pass data from one view to another which are not nested. View 2 is called from View 1, on press of a button, and these two views are not nested.


    Could you help me here ?


    Regards,

    Shivam.

    (0) 
    1. Wouter Lemaire Post author

      For passing data from one view to another view you should use dynamic routing. If it’s a lot of data that you want to pass, you can create a JSON model in the component for Shared data. Fill this shared model before you navigate and read it in the second view.

      Kind regards,

      Wouter

      (0) 
  4. Boghyon Hoffmann

    I think it’s also worth mentioning that we can get an event bus from the component

    myComponent.getEventBus()

    which is dependent to the lifecycle of the component. I.e.: When the component gets destroyed (which is the case if the user navigates back to the launchpad), then its event bus is also gone – No need to unsubscribe any handler on exit.

    (0) 

Leave a Reply