This chrome add-on allows us to verify the different components in SAPUI5 application. It also gives us information about hierarchy of components and binding model.
Once on the page, click on the "Add to Chrome" button and in the Pop-up click on "Add extension" We already have our plugin integrated. Does not require any extra configuration.
This extension is added in the Chrome development tools. When loading an HTML page, it add the script "detectUI5.js".
(Optional Stept) Change the configuration of the extension to add the script manually everything you want
When accessing the tab "UI5" of the development console we can see 2 tabs. One is the "Inspector Control" that allows us to view our UI5 application in XML format. The other tab is "Application information" and it have application details.
Let's see an example using the samples from SAP UI5 Library (sapui5.hana.ondemand.com).
https://sapui5.hana.ondemand.com/#/entity/sap.m.List/sample/sap.m.sample.ListCounter
Click on the list component with the right mouse button (just above the text "Products") and select "Inspect UI5 control".
This shows us the UI5 component that we have selected within the XML tree. In this case we see that it is a "List" component and we can see:
All the elements that are added in the component of the type "StandardListItem"
Information of the binding
Properties of the component
On the other hand, if we select an element within the list, we can see the data referring to that row, in this case we see that the path is «/ ProductCollection» and position 2. This component uses two data: as a counter with field «Quantity» and title with field «Name» and their respective values.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
10 | |
10 | |
7 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 | |
2 |