Skip to Content
Author's profile photo Former Member

New chrome extension for UI5 application development

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!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Samantak Chatterjee
      Samantak Chatterjee

      Hi Inga,

      Thanks for developing such a wonderful tool for inspecting the UI Models.

      Do you have any kind of documentation which will guide someone to how to inspect any model for the UI5 application using your tool ? I was trying to get my hands dirty on this but without any success. I am sure I am missing something here which I am not able to figure out at the moment.

      Any clues or pointers in this regard will be really helpful.

      Thanks in advance and keep up the good work.


      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Samantak,

      1. Can you see panel "Models" in the DevTools window?
      2. When you click on this panel, do you see all available frames with UI5 as in the first picture?
      3. When you click on a specific frame, you may or may not see models, it depends if a model is set to ui.core.Core with name, by default all other models are hidden and you have to press "filter" button in the header to select which models should be displayed and which shouldn't (last picture).

      Thanks for your question!