Master Detail Binding using EventBus in SAP UI5

[madhusudan007h]

Requirement:

I had a requirement where on events of View1 I wanted to make some changes in View 2 in Master-Detail page with Nested Views.

 

Advantage

1. Multiple people can work on same project without facing any issue while merging.


2. Code is segregate which helps in reducing complexity of program.


3. Individual view can be used as a plugin.

 

Note :

Here I have created 3 Views one for SplitApp and remaining two views I made it as nested view inside the SplitApp as Master View and Detail View.

 

Step 1: Create one main view as SplitApp follow the as shown in the image

sample of nested view in SplitApp

 

Master View

Master View

Detail View

Detail View

 

Invoking methods of Detail view controller for event occurring in Master View

As per my Requirement this can be achieved by different ways but still will implement it by EventBus

Event Bus is publisher/subscriber design pattern. There will be 2 events one will be a publisher and another will be subscriber.Publisher : This is event which gets triggered on any event of same view.Subscriber: This is event which gets triggered on any event of another View.

 

Code for Master controller  (Publish method)

Publish Method

Code for Detail controller (Subscribe method)

Subscribe method

 

Once event is triggered in Master view (publish) an event will be published. All the subscriber (Detail view) events will be triggered (subscribe).

 

Step 2:

Create model with data and configure it in manifest.json file

Data.json

{

    "data":[

        {

            "name":"Madhusudan",

            "city":"Bangalore",

            "Gender":"Male",

            "Salary":"Rs.20000",

            "Designation":"Developer"

        },

        {

            "name":"Ayaz",

            "city":"Hassan",

            "Gender":"Male",

            "Salary":"Rs.30000",

            "Designation":"Developer"

        },

        {

            "name":"Monika",

            "city":"Yamaloka",

            "Gender":"Female",

            "Salary":"Rs.35000",

            "Designation":"Singing and Dancing"

        },

        {

            "name":"Faraz",

            "city":"Ramnagar",

            "Gender":"Male",

            "Salary":"Rs.40000",

            "Designation":"Test Engineer"

        },

        {

            "name":"Sachin",

            "city":"Gulbarga",

            "Gender":"Male",

            "Salary":"Rs.10000",

            "Designation":"System Engineer"

        },

        {

            "name":"Ganesh",

            "city":"Ranebennuru",

            "Gender":"Male",

            "Salary":"Rs.200000",

            "Designation":"Support"

        }

    ]

}

 

Manifest.json

Manifest.json

 

Final Output

output

 

Conclusion

Finally, we done. The same approach can be implement it by in different ways. nested views in master detail with EventBus is one more way. At the same time of event occurring you can pass multiple data as channels as user requirement.

Hope I find this helpful.

 

Thanks and Regards

Madhusudan