Dynamic Path to Model Data

Introduction

While working with model data in SAPUI5, often we could come across scenarios where it is more comfortable to have our own(custom) data nodes or objects for storing additional properties in the gloabl/application model for further processing later in the application. An example scenario is one described by DJ Adams / Chris Choy is here. It may not have been possible to anticipate all the corresponding objects at build time.

Sample Application

Let us quickly create a sample application. In this application Employee data is shown in a list and based of demand during run time additional information pertaining to their organisation is shown.

Model data:-

Our Model data holds an array with Employee name, Billing Rate and their availability.

View:-

At the view side we would display the Employee list with status in Red if they are not available using Expression Binding.

Controller does not have any role to play for now and the output(as expected) is a simple list with the Employee availability(Green/Red)

Let us quickly check what the model holds for us:-

As expected, the model holds the employee details for us. “Results” was the name given to the model.

Updating the Application

Now that the initial application set up is done, let us quickly try to extend the model at run time. We would add a new button on the view to show more information. Under the event for this button, let us quickly specify a path to set our new data. Base controller used for code guidelines. getModel function is being called from there.

New Button is visible on screen:-

And when this button is being clicked, let us check the model once again in console for additional node containing our new data.

This contains our new data node as expected. The result now shows these additional properties on the screen.

Conclusion

While we were not able to completely extend the model early on, this method could work as a short hand during the development process to hold additional data nodes to the same mode being used across the views/controller. Hope this was useful for beginners in SAPUI5.

Git Repo:https://github.com/jakes2255/UI5-Custom-Model-Data

Thank you,

Jakes