New chrome extension for UI5 application development

[Former Member]

As a part of SAP Screen Personas (and other model driven UI5 application) development you need to quickly inspect models to check if their data are correct and to make live model changes. It normally involves running scripts from console and performing several manual steps each time the model changes. This adds a rather significant overhead to the seemingly simple task of checking a model.

To ease the access to UI5 application models and assist with debugging I have created an extension for Google Chrome browser, which presents current state of the models in a clear and readable manner. It extends Chrome Developer Tools by adding a new panel - “Models”.

It offers such features as:

Inspect all available frames (with UI5) in the application. Frames are not refreshed automatically, to do so, press refresh button.



Inspect all JSON and XML models available in the selected frame. When model data is changed in the inspected window, it will be automatically updated in the extension. Any newly created model will not be added, press refresh button in the header for this model to appear in the model list.



Enables user to edit JSON models and display changes in the inspected window (except JSON models with circular references – read only). As JSON and XML model viewing and editing is powered by Monaco Editor, features like collapsing, expanding and searching is also provided (more commands can be found in command palette).



Users can also choose which models should be displayed and which shouldn’t. By default, all models are hidden, except the ones that are set to ui.core.Core with name.



Note, that model display name is determined in the following way:

• If the model is set to Core with name, then this name is used as display name.


• Otherwise display name is view’s name that this model is bound to.


• And if it also doesn’t have that, then model ID is displayed.

I hope it will be useful for you.

Go and check out it here: Chrome Web Store – UI5 Models

Comments and feedback are welcome!