pleasefixai/ui5
Guides for SAPUI5 best practices: tests, accessibility, tables, smart controls and cards.
UI5 development best practices and coding standards derived exclusively from official SAP UI5 guidelines. Use when writing UI5 applications to ensure modern, maintainable code following SAP standards. Covers: async module loading (sap.ui.define, ES6 imports, core:require), ComponentSupport initialization, data binding with OData types, i18n management, CSP compliance (no inline scripts), TypeScript event types (UI5 >= 1.115.0), MCP tooling (get_api_reference, run_ui5_linter), CAP integration patterns, and form creation rules (never SimpleForm, always Form with ColumnLayout). Keywords: ui5 coding standards, async loading, sap.ui.define, data binding, odata types, i18n translation, CSP no inline scripts, TypeScript event handlers, Button$PressEvent, ui5 linter, API reference, ComponentSupport, form layout, ColumnLayout, CAP integration, cds watch
This skill should be used when the user asks to audit, fix, check, review, or improve accessibility, a11y, ARIA, WCAG compliance, landmarks, labeling, heading levels, focus handling, keyboard navigation, keyboard shortcuts, screen reader support, invisible messaging, reading order, or touch / target size in UI5 application files (views, fragments, controllers). Also use when the user creates a new UI5 view, fragment, or controller and wants it to be accessible, or asks whether a specific control (Dialog, Table, Panel, etc.) meets accessibility requirements. Keywords: accessibility, a11y, ARIA, WCAG, screen reader, NVDA, JAWS, VoiceOver, landmark, landmarkInfo, accessibleRole, ariaLabelledBy, ariaDescribedBy, labelFor, tooltip, alt text, decorative, heading level, initialFocus, F6, fast nav, fastnavgroup, tabindex, CommandExecution, keyboard shortcut, InvisibleMessage, announce, reading order, reactiveAreaMode, target size.
MUST be loaded before any UI Integration Cards (also called UI5 Integration Cards) task — creating, modifying, validating, previewing, or reviewing a card, its manifest.json, its Configuration Editor (dt/Configuration.js), or any analytical chart configuration. Provides the official guidelines, validation rules, supported chart types, and Configuration Editor patterns.
UI5 MDC (sap.ui.mdc) best practices for OData V4 delegate-based controls. Use when creating/troubleshooting MDC FilterBar, Chart, Field, FilterField, ValueHelp, Link, MultiValueField, or Table. Covers delegate pattern, fetchProperties, PropertyInfo, p13nMode, updateBindingInfo, Condition.createCondition, and common errors (delegate not loaded, chart no data, fields not appearing). Also applies to JSON model (non-OData) MDC usage. Triggers: "MDC", "sap.ui.mdc", "delegate pattern", "fetchProperties", "PropertyInfo", "MDC personalization", "p13nMode", "MDC field not rendering", "MDC chart not binding", "MDC conditions", OData V4 freestyle with model-driven controls. Keywords: sap.ui.mdc, FilterBar, Chart, Field, FilterField, ValueHelp, Link, MultiValueField, delegate, fetchProperties, updateBindingInfo, PropertyInfo, OData V4, JSON model, TypeMap, p13nMode, conditions, FilterBarDelegate, ChartDelegate, ValueHelpDelegate, LinkDelegate, Condition.createCondition
This skill should be used in any OPA5 task - creating, modifying, extending, debugging, fixing or reviewing an integration test. Use when the user asks to "write an OPA5 test", "add an OPA5 journey", "fix the OPA5 test failure" or mentions OPA5 or its components - opaTest, page object, journey, waitFor.
Use when the user asks to "write a QUnit test", "fix a failing QUnit test", "add a QUnit module", "modernize QUnit tests", "migrate from QUnit 1", or mentions QUnit-specific constructs such as assert.async, nextUIUpdate, Core.applyChanges, sinon sandbox, asyncTest, or QUnit.module. Covers coding standards for OpenUI5/SAPUI5 unit test files: const/let over var, arrow functions over .bind(this), async/await over assert.async(), assert.expect() in every async test, sinon.createSandbox(), descriptive test names, beforeEach/afterEach module isolation, nextUIUpdate vs Core.applyChanges rules, try/finally teardown in helpers, QUnit 1 to QUnit 2 globals migration, and non-ASCII character avoidance.
UI5 smart controls (sap.ui.comp) best practices for OData V2 annotation-driven controls. Use when creating/troubleshooting SmartField, SmartForm, SmartFilterBar, SmartChart, SmartLink, SmartMultiInput, or SmartTable. Covers control selection, annotations (ValueList, FieldControl, SemanticObject, UI.LineItem, UI.Chart), mandatory rules, common errors, and per-control API reference. Triggers: "SmartField", "SmartForm", "SmartFilterBar", "SmartChart", "SmartLink", "SmartMultiInput", "sap.ui.comp", "smart control annotations", "OData V2 metadata-driven", "value help annotations", "ValueList annotation", "field control annotation", "semantic object navigation". Keywords: sap.ui.comp, SmartField, SmartForm, SmartFilterBar, SmartChart, SmartLink, SmartMultiInput, SmartTable, ValueHelpDialog, OData V2, annotations, ValueList, FieldControl, SemanticObject, entitySet, ControlConfiguration, GroupConfiguration, textArrangement, FilterProvider, initialise, beforeRebindChart, navigationTargetsObtained
UI5 table best practices for freestyle applications. Use when creating/troubleshooting any table: sap.m.Table (ResponsiveTable), sap.ui.table.Table (GridTable), TreeTable, SmartTable, or sap.ui.mdc.Table. Covers control selection matrix, mandatory rules, common errors, and per-control API guidance. Triggers: "create a table", "which table should I use", "GridTable", "ResponsiveTable", "TreeTable", "SmartTable", "MDC table", "sap.ui.mdc.Table", "table not showing data", "table binding", "table selection", "drag and drop table", "table personalization", "table growing", "table pop-in", "table performance", "table export", "table sticky header". Keywords: sap.m.Table, sap.ui.table, GridTable, ResponsiveTable, TreeTable, SmartTable, sap.ui.mdc.Table, rows, items, rowMode, growing, sticky, personalization, p13n.Engine, DragDropInfo, OData V4, OData V2, ariaLabelledBy, cell templates