Fiori Guidelines

How the validator works

In DevTools (F12) open the FrontTailor panel or the side panel and choose the Fiori Guidelines tab. On opening, the tab only fetches the page’s last report; the analysis runs after your click. What counts is what is visible: the controls of the open view with class, position, properties, labels and columns. The check makes no request; exports are created locally.

The UI5 Support Assistant checks technical rules. The validator checks the design guidelines: floorplan, placement and order of actions, titles, tables, forms, messages, navigation and visuals.

Check a view

1. Open the view you want to check in the app – the detail page of an object, for example. Open dialogs or tabs that should be included.
2. Choose the Fiori Guidelines tab in the panel and click Check view.
3. Read score and detected floorplan, then the Score per category and the Improvements.
4. After a change or in another view, click Check again.

1. Check view, after the first run Check again.
2. The score from 0 to 100: green from 90, orange from 70, red below.
3. The detected floorplan with technology: Freestyle, Fiori elements (OData V4) or Fiori elements (OData V2).
4. Recognised by: the evidence, below it Contains: the parts, e.g. the columns of a layout.
5. Highlight in the page frames the root control of the floorplan.
6. Floorplan guideline opens the page in the SAP Fiori design guidelines.
7. The score again in the card header.

The command palette (Alt+Shift+K, on a Mac ⌥+Shift+K) starts the check too, with the command Check Fiori design guidelines. In the launchpad only the app is checked, not the shell.

Floorplan detection

FrontTailor detects the floorplan in this order and names its evidence:

Score per category

1. A category with score, progress bar, “5 checked · 1 findings”.
2. not applicable: the view had nothing to check; the category does not count towards the score.

Per category: 100 minus 25 per violation, 10 per warning and 3 per hint, at least 0. Identical findings (same rule, same control, e.g. clones of a list template) count once. The total score is the weighted, rounded mean of the categories with a score. The Check manually checklist does not count.

Improvements

1. Severity filter: All, Violation, Warning, Hint.
2. All categories or one category.
3. Filter by text, control or rule.
4. Why the guideline asks for it.
5. Improvement with the values from your app.
6. Do and Don’t for this rule.
7. Example as an XML view snippet.
8. Open guideline: the rule’s page in the SAP Fiori design guidelines.
9. Show in Inspector selects the control in the Inspector.
10. Highlight in the page frames the control for four seconds.
11. Copy as Markdown takes the finding along, e.g. for a ticket.

If the control comes from a Fiori elements template, the finding says “Fiori elements: change the annotations or the manifest, not the generated controls.” instead of showing an XML example. For findings about labels and tooltips, Check in the Quality tab leads to the i18n and accessibility check.

1. Control guideline: the guideline page of the control class, if it differs from the rule’s page.
2. CSV: UTF-8 with BOM and CRLF, protected against formulas.
3. Markdown: report as a file.
4. Copy all as Markdown: the same report to the clipboard.

With the AI bar and your own key there is Review floorplan in the check’s header and Explain finding on every finding. Nothing is sent before preview and click.

The rules

The validator only checks rules that can be read reliably at runtime. It does not check texts linguistically (verbs, tone, terminology).

Dos & don’ts and “Check manually”

1. Do: three points of the guideline for the detected floorplan, otherwise general ones.
2. Don’t.
3. An item of the Check manually checklist with the affected controls and Open guideline.

Typical problems

The rules have been tried on FrontTailor’s three demo apps. A score does not replace a design review, but it quickly shows where one pays off.