Using the UX Consistency Scanner

Decorative image only
Resources / UX Consistency Scanner / Using the UX Consistency Scanner
information

The UX consistency scanner is in its final rollout phase. We plan to make it available to all users by the end of September.

Interested in trying it earlier? Contact sap_uxconsistency_scanner@global.corp.sap to request pilot access.

Intro

This page explains how to prepare for and run the scan and how to interpret the results.

Procedure

warning
You can only run one scan at a time. If you start a new scan in the same browser window, the results from the previous scan are overwritten.

Step 1: Prepare your UI

  1. Open a web application page built with SAPUI5 or SAP Web Components (React).
  2. Ensure that the content you want to scan has loaded.
    Important: The scanner only analyzes what is currently rendered. If content is loaded later or appears after user interaction, it must be visible before running a scan.

Step 2: Run the scan

  1. Click the UX consistency scanner extension in the Chrome browser toolbar.
    The scanner automatically checks the UI framework. If the UI framework is supported, the Scan Page button appears.
  2. Click Scan Page. Your scan report is displayed.

Dialog of the UX consistency scanner extension, with a message indicating that the technical context was detected successfully and the "Scan Page" button active.

Running the UX consistency scanner browser extension

Scan Results

The scan provides a report with the following information:

  1. Warnings about framework version limitations
  2. Summary of the check results (KPIs)
  3. Detailed findings and recommended fixes, filterable by UX consistency product standard

In addition, you can:

Scan report - framework limitations

For SAPUI5 applications, the scanner checks the framework version. If the version is not the latest patch level of a supported LTS version (currently SAPUI5 1.136 or 1.148), the scanner displays a warning message.

For details, see Supported Frameworks on SharePoint.

Scan report – header

UX consistency scan report header showing application name, framework, version, scan KPIs, and an Export button. KPIs include elements analyzed, checks performed, and counts of passed, failed, and warning results.

Header area of the UX consistency scan report

  1. Framework warning: Indicates if the framework version is not fully supported by the scanner.
  2. 'Export' button: Exports the scan summary and details to a CSV file.
  3. Scan summary: Displays the total number of elements checked and the number of elements that passed, failed, or have warnings. Clicking on a KPI displays a description for each value.
  4. Scan data: Displays the scan parameters, including the app, framework version, the supported UX consistency product standard release (UXC Batch), and the supported theme.

Scan report – details

Scan details page with KPI metrics, product standard summaries, filters, and expandable findings organized by component, standard, and issue. Includes actions to view issues in the application and copy issue details to Jira.

Detail findings in the UX consistency scan report

  1. KPI summary: KPIs for the scan results. Adapts to applied filters.
  2. 'View Findings in App' button: Opens the app with annotations from the UX consistency scan. Hovering over a highlighted area opens a popover with a description of the issue, the expected value, and the current value.
  3. 'More' button (:icon-overflow ): Additional menu options to sort and expand or collapse the findings.
  4. Product standard summary: Cards with the results for each supported UX consistency product standard.
  5. Selected product standard: By default, the findings are shown for all supported product standards. Selecting individual product standards filters the results.
  6. Filter information bar: Displays the applied filters.
  7. Component: Summary of findings for a component. Can be expanded to display a summary for each product standard. If filters have been applied, only selected product standards are shown.
  8. UX consistency product standard: Summary of findings for a product standard. Can be expanded to show the individual check results.
  9. Individual check result: Contains a description of the issue, the expected value, and the current value.
  10. Issue count for the component
  11. 'View Issue in App' button: Opens the app with the issue highlighted. Hovering over the highlighted area opens a popover with a description of the issue, the expected value, and the current value.
  12. 'More' button (:icon-overflow ): Additional menu options to copy the issue details to your clipboard to paste them to Jira. You can do this for all issues relating to a product standard (Copy all for Jira), or for individual issues (Copy for Jira).

For more information on the scan results, see Understanding the Scanner Results on SharePoint.

Support & Feedback

You can use one of the channels below to report bugs and share your feedback and ideas:

Your feedback will help us to continue optimizing the UX consistency scanner.

Other Internal Resources