Tools

The tab at a glance

Open the FrontTailor panel in DevTools (F12) or the side panel and choose the Tools tab. It consists of cards you can expand and collapse; their state is remembered. In the DevTools panel the cards sit in two columns from about 1100 pixels width, in the side panel in one.

1. How many cache targets are selected. Targets the page does not have are not counted.
2. Reset and reload deletes the selected targets – with double confirmation (see cache).
3. Reload without cache reloads the page bypassing the HTTP cache and deletes nothing.
4. The debug switches: URL parameters before the #, below them the address of the UI5 bootstrap.
5. Apply and reload becomes active as soon as you change a switch.

Every switch that reloads puts its parameters before the hash of the address. The launchpad hash (#Object-action?…&/route) and other parameters stay exactly as they were.

Clear the cache selectively

1. In the Cache card, choose the targets: Browser cache, Service workers, Web storage, UI5 cache and, in the launchpad, Launchpad personalization.
2. Click Reset and reload.
3. The Reset caches? dialog lists every target. Tick I understand that this data will be deleted. – only then does Reset become active.
4. FrontTailor deletes the targets, reloads the page without cache and shows done, skipped, not available or failed per target.

FrontTailor never touches cookies or passwords.

Debug switches

A tag in the card header shows how many switches are active in the page and how many changes are pending. Apply and reload sets the parameters and reloads the tab.

Debug only your own code

sap-ui-debug=true loads every module as a debug source – in the launchpad that often takes minutes. Usually your own code is enough. The Debug only your own code card sets sap-ui-debug to the app’s namespace.

1. Detected namespaces of the loaded apps, as check boxes. Add more below – for example a team library – and click Add.
2. Reloads with: the parameter used for the reload.
3. Reload: own code only. Switch debug off removes the parameter again.

1. Open the Debug only your own code card and check the detected namespaces.
2. Click Reload: own code only.
3. After the reload the card header says Own code. Your modules come as -dbg.js with comments, the UI5 libraries stay bundled.

Built apps (ui5 build) have -dbg files; without one UI5 loads the normal file. In the launchpad the parameter goes into the outer URL; for an app in an iframe FrontTailor adds sap-iframe-params=sap-ui-debug so the launchpad passes it on.

URL presets and profiles

1. Tick presets. Several can be combined; presets with the same parameter exclude each other.
2. Reload with selection – the number counts the selected presets.
3. Save as profile stores the selection as a profile for this host.

Remove preset parameters takes the parameters out of the address again. Saved profiles holds up to 20 profiles per host; Apply reloads with a profile, Remove deletes it. Export and Import exchange profiles as JSON. Profiles only accept sap-* parameters and reject names that look like credentials (token, password, session …).

Language and RTL

1. Language: sets sap-ui-language in the URL. The list also holds Test languages (SAP pseudo languages).
2. Right to left (RTL): sap-ui-rtl=true mirrors the layout without changing the language.
3. Reload with language.
4. Switch without reload: UI5 updates bound i18n texts and formatted dates and numbers right away. OData texts, Fiori elements annotations and texts set once in code keep the old language until the next reload.

Browser language removes sap-ui-language and sap-ui-rtl again. Find missing translations with Quality: i18n & accessibility.

Open in editor

From a control in the inspector or from the visible view you jump straight to the source file – for XML views to the control’s line. For that you tell FrontTailor once which editor you use and in which local folder an app’s files live.

1. Open the Open in editor card and choose your editor under Editor.
2. Under Path mapping, click the app’s detected namespace or Add mapping.
3. As Local folder, enter the absolute path that holds the files – usually webapp, for example /Users/me/projects/demo-freestyle/webapp or C:\dev\app\webapp.
4. Click Save. Current app now lists views, controllers, Component.js and manifest.json as links.
5. In the Inspector, select a control and click Open in editor. The browser asks before it starts the editor.

1. Editor: opens files via its link scheme.
2. Path mapping: Namespace → Local folder, with a bin to remove it.
3. Save.
4. Current app: all visible own views with their controller, plus Component.js and manifest.json. The icon next to it reads the visible view again.

1. Open in editor in the control’s details.
2. The link to the view, here with the line that holds the control’s ID. Below it the controller; Path mapping leads to the card.

• Up to 30 mappings. If both ft.demo and ft.demo.freestyle have one, the longer namespace wins.
• If the ID is not in the view, FrontTailor searches the view’s own fragments (one level deep). If it does not find it, the link opens the view at the top.
• Fiori elements views belong to the framework; there is no own source file for them. The app’s Component.js and manifest.json are linked anyway.
• The mapping stays in this browser: not in sync, not in exports or team packages, because local paths differ per device.
• FrontTailor reads the view source only from the app’s own server (same-origin); nothing goes to third parties.

Check the deployment

The Deployment card answers the question after every transport: is the browser running the version that is on the server? A click on Check deploy compares the app and UI5 version in the browser with the deployed version, and the cache-buster tokens of the loaded files with the current index.

1. The verdict.
2. Per app component and for UI5: version Running and Server with a state.
3. Cache buster: counters for files with a token, app files without a token and stale tokens, below them the list – stale ones first – and the ETag check of Component.js.

The check only reads: after the click it requests manifest.json, sap-ui-cachebuster-info.json and sap-ui-version.json from the app’s own server, without cache and without changing the cache. It does not request other origins. Administrators who roll FrontTailor out in a company have their own page: Enterprise deployment.

Flex & adaptations

The card shows whether SAPUI5 flexibility is active for the app, which connectors are configured and how many changes and views sit on which layer (USER, CUSTOMER, VENDOR …), plus every variant management with its current and default view and, as far as UI5 keeps them in memory, the key-user versions. Reading sends no requests.

• Check again reads the state again.
• Reset deletes only your own personalization in the USER layer. Next to it, Reset control resets the changes to one control and Reset views your own views of one variant management. Key-user and public views stay.
• Every reset asks twice and lists the affected objects first.

If the app does not load sap.ui.fl – like the freestyle demo app – the card header says sap.ui.fl not loaded.

UI5 version from the CDN

The UI5 version (CDN) card loads the app with another UI5 version from the official SAP CDN – in this tab only and without a deployment. Your own libraries outside sap/ and the app itself stay on the server.

1. Enter the version. Load version list fetches the list from the CDN – only on click, with the address shown next to it.
2. Click Switch on and reload. The dialog shows exactly which addresses are redirected where and warns about limits such as the page’s content security policy. If the app already loads UI5 from the CDN, the browser also asks for access to that address.
3. After the reload a banner above the tabs shows the active version. Switch override off restores the original version; that always works, on PROD too.

Closing the tab and restarting the browser also end the override. With a strict content security policy on the page, UI5 does not start with the redirected version; the banner shows that.

More tools, palette and UI5 log

Many of the tab’s actions are also in the palette and the extension popup (cache reset, debug on/off, URL profiles). They go through the same checks.

On PROD

Typical problems