Model explorer

The tab at a glance

The Models tab exists in the DevTools panel only: F12 → FrontTailor panel → Models. Without a selected control it shows the models of the app’s root components; with a control, that control’s own and propagated models.

1. Enter a Control ID and Show selects a control without the inspector. App models clears the selection, the icon on the right refreshes the list.
2. The list of models: name (the unnamed one is (default model)), type and whether the model is own or propagated.
3. Take snapshot and Compare, see snapshot and diff.
4. Search keys and values: matches stay with their ancestors. Next to it Expand all and Collapse all.
5. Copy JSON takes the shown subtree, Copy path the path of the selected node, such as view>/editable.
6. The tree with the data. Above it you see how many values were read and when.

With the Path field and Load you fetch one subtree. Large models need this: the tree reads up to 12 levels deep, 20,000 values and 2,000 characters per text; beyond that it says “Large model: the data was truncated …”.

OData models: what is already loaded

1. The (default model) of type OData V2, with class and service URL on the right.
2. Cached entities: “Read from the model cache only; FrontTailor sends no request.”
3. An entity set with the number of entities in the cache. A click filters the tree to it.

If an entity is missing, the app has not loaded it (yet). What the backend actually sent is shown in the OData console.

Snapshot and diff: what an action changes

1. In the Models tab, choose the model, for example view.
2. Click Take snapshot. It says “Snapshot from … Now do something in the app, then compare.”
3. Run the action in the app – in the example Edit in the demo app.
4. Click Compare. Changes since the snapshot lists every path as added, removed or changed, with old and new value.
5. Discard snapshot starts over.

1. Compare reads the model again and compares it with the snapshot.
2. One change: kind, path, old value, new value.

The first 1,000 changes are shown; with more, a note appears below.

i18n: key, bundle and texts per language

When a control is selected (in the Inspector or by control ID), the i18n section shows every property bound to a resource model.

1. Key with model name, e.g. i18n>edit.
2. Bundle: name and file of the resource bundle.
3. Texts per loaded language; fallback languages UI5 has not fetched yet are listed as not loaded. FrontTailor loads no language itself.
4. Find missing keys checks every control on the page and lists texts that are shown as a key (up to 200 entries). Show control jumps to the finding.

Next to the key it says Key found, Key missing or that this cannot be told without loading a language.

Bound controls

For a node in the tree, Find bound controls looks for the controls whose bindings use this node or a node below it – in one pass over the page’s controls. A click on a hit selects the control in the inspector. The other way round, Show in Model Explorer in the inspector opens this tab right at the bound path.

All buttons and fields

Typical problems