Run any Skill in Manus with one click

ui5-best-practices-smart-controls

Stars28

Forks7

UpdatedJuly 3, 2026 at 08:25

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

UI5

UI5/plugins-coding-agents

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

9 files

SKILL.md

readonly

More from this repository

same repository

ui5-best-practices-mdc

UI5/plugins-coding-agents

UI5 MDC (Model-Driven Controls) best practices and authoritative development guidelines for OData V4 delegate-based controls. Use when the user asks to "create an MDC FilterBar", "implement MDC Chart", "add MDC Field", "use MDC FilterField", "implement ValueHelp", "add MDC Link", "MDC MultiValueField", "sap.ui.mdc", "delegate pattern", "fetchProperties", "OData V4 freestyle controls", "MDC personalization", "p13nMode", "PropertyInfo", "MDC delegate", "FilterBarDelegate", "ChartDelegate", "ValueHelpDelegate", "LinkDelegate", "MDC field not rendering", "MDC chart not binding", "MDC conditions", "Condition.createCondition", "MDC Table delegate", or is writing any UI5 freestyle application using OData V4 with model-driven controls from sap.ui.mdc. Covers: delegate pattern, PropertyInfo structure, mandatory rules, common error patterns, and per-control API reference for FilterBar, Chart, Field, FilterField, ValueHelp, Link, and MultiValueField. Keywords: sap.ui.mdc, MDC, FilterBar, Chart, Field, FilterField, Valu

2026-07-0328

ui5-best-practices-accessibility

UI5/plugins-coding-agents

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.

2026-07-0328

fix-control-renderer

UI5/plugins-coding-agents

Fix Control renderer issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs these rules: - `no-deprecated-control-renderer-declaration` - For missing renderer declaration, string-based renderer declaration, implicit renderer auto-discovery (removed in modern UI5) - `no-deprecated-api` - For missing apiVersion:2 in renderer objects, missing IconPool import when using oRm.icon(), deprecated rerender() override. NOTE: For Library.init() apiVersion errors, use fix-library-init instead. - `ui5-class-declaration` - For non-static renderer property in ES6 classes Trigger on: "missing a renderer declaration", "Deprecated declaration of renderer", "deprecated renderer", "apiVersion" (in renderer context), "IconPool", "rerender", "renderer must be a static property" Converts legacy renderer patterns to modern apiVersion: 2 format with proper module imports.

2026-06-2528

fix-js-globals

UI5/plugins-coding-agents

Fix JavaScript `no-globals` errors that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs: - `no-globals` rule with message "Access of global variable '...' (...)" in JS files Cases handled (linter CANNOT auto-fix): - Assignments to global namespaces: `sap.myNamespace = {...}` - Global namespace assignment/read inside sap.ui.define - Delete expressions: `delete sap.something` - sap.ui.core.Core direct access (class vs singleton) - jQuery/$ globals: add `sap/ui/thirdparty/jquery` — do NOT replace jQuery API calls - jQuery.sap.* utilities: replace with dedicated modules - Conditional/probing access: `if (sap.ui.something)` - Custom namespace definitions that aren't UI5 modules - sap.ui.controller() factory → Controller.extend (NOT Fiori Elements extensions) - jQuery.sap.declare/require: legacy modules without sap.ui.define Trigger when: "fix no-globals", "global variable error", "sap.ui.getCore", "jQuery.sap" Converts global namespace access to proper sap.ui.define module imports.

2026-06-2528

fix-linter-blind-spots

UI5/plugins-coding-agents

Fix runtime-breaking patterns in JS files that the UI5 linter does NOT report. Use this skill when: - Tests fail after modernization with "ReferenceError", "TypeError: Cannot read properties of undefined", or "X is not defined" - The linter shows zero remaining errors but tests still crash at runtime - Phase 3, Step 3.2 of the modernize-ui5-app workflow (runs after the parallel globals batch, before fix-cyclic-deps) - User mentions "runtime errors after modernization", "test failures after modernization", "global namespace still used" - After running fix-js-globals and fix-cyclic-deps, but tests STILL fail - User sees "X is not a constructor" or module loading errors in test output The linter only checks sap.* globals in JS. App-specific namespace patterns (e.g., com.example.app.utils.Module) are invisible to it. This skill detects and fixes those across ALL JS files — app source AND test. NOTE: App-namespace globals in XML files are handled by `fix-xml-globals` — NOT by this skill.

2026-06-2528

fix-xml-globals

UI5/plugins-coding-agents

Fix XML view/fragment issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs these rules: - `no-globals` - For ALL global variable access in XML views — sap.*, jQuery.*, AND app-namespace globals (e.g., com.example.app.utils.Handler.onPress, my.app.formatter.method) - `no-ambiguous-event-handler` - For event handlers without dot prefix or local name - `no-deprecated-api` - For legacy template:require syntax (space-separated) Trigger on XML view/fragment files with errors about global variables, event handlers, formatters, type references in bindings, factory functions, or template:require. Automatically adds core:require declarations, fixes event handler prefixes, and handles .bind($control) for functions that use 'this'. IMPORTANT: The linter reports app-namespace globals in XML under `no-globals` — these MUST be fixed by this skill, NOT deferred to fix-linter-blind-spots. For native HTML or SVG in XML views, use the fix-xml-native-html skill instead.

2026-06-2528

name

ui5-best-practices-smart-controls

description

UI5 smart controls best practices and authoritative development guidelines for OData V2 annotation-driven controls. Use when the user asks to "create a SmartField", "add a SmartForm", "implement SmartFilterBar", "create SmartChart", "add SmartLink navigation", "use SmartMultiInput", "smart control annotations", "OData V2 metadata-driven controls", "sap.ui.comp", "field control annotation", "value help annotations", "ValueList annotation", "smart form layout", "smart filter bar configuration", "chart annotations", "semantic object navigation", "smart link popover", "SmartField edit mode", "SmartField display mode", "SmartFilterBar liveMode", "SmartChart drill-down", "SmartMultiInput tokens", "SmartTable configuration", or is writing any UI5 freestyle application using OData V2 annotation-driven controls from sap.ui.comp. Covers: control selection, mandatory rules, common error patterns, annotation guidance, and per-control API reference for SmartField, SmartForm, SmartFilterBar, SmartChart, SmartLink, and SmartMultiInput. Keywords: sap.ui.comp, SmartField, SmartForm, SmartFilterBar, SmartChart, SmartLink, SmartMultiInput, SmartTable, FilterBar, sap.ui.comp.filterbar, ValueHelpDialog, sap.ui.comp.valuehelpdialog, FilterGroupItem, token selection, ranges, conditions tab, OData V2, annotations, UI.LineItem, UI.Chart, ValueList, FieldControl, SemanticObject, entitySet, ControlConfiguration, GroupConfiguration, textArrangement, value help, FilterProvider, initialise event, beforeRebindChart, navigationTargetsObtained

UI5 Smart Controls Best Practices

Apply these guidelines whenever generating, reviewing, or troubleshooting UI5 smart control code in freestyle applications using OData V2 services.

UI5 version baseline: SAPUI5 1.136+ LTS. All features mentioned are available from this version unless noted.

When to load each reference

Trigger	Load
Working on or planning a `sap.ui.comp.smartfield.SmartField`	`references/smart-field.md`
Working on or planning a `sap.ui.comp.smartform.SmartForm`	`references/smart-form.md`
Working on or planning a `sap.ui.comp.smartfilterbar.SmartFilterBar`	`references/smart-filter-bar.md`
Working on or planning a `sap.ui.comp.smartchart.SmartChart`	`references/smart-chart.md`
Working on or planning a `sap.ui.comp.navpopover.SmartLink`	`references/smart-link.md`
Working on or planning a `sap.ui.comp.smartmultiinput.SmartMultiInput`	`references/smart-multi-input.md`
Working on or planning a `sap.ui.comp.filterbar.FilterBar`	`references/filter-bar.md`
Working on or planning a `sap.ui.comp.valuehelpdialog.ValueHelpDialog`	`references/value-help-dialog.md`
Working on or planning a `sap.ui.comp.smarttable.SmartTable`	See `ui5-best-practices-tables` skill, `references/smart-table.md`

Load before producing any output. Do not work from memory.

Core Rules

Mandatory

Always specify entitySet on Smart controls or ensure the control inherits a binding context that resolves the entity type.
Use ControlConfiguration in XML for SmartFilterBar field overrides (control type, filter type, index). Only visible, label, and visibleInAdvancedArea can be changed at runtime.
Use the correct hierarchy: SmartForm > Group > GroupElement > SmartField. Never place SmartFields directly in a SmartForm.
Wait for the initialise event before programmatically accessing inner controls (e.g., getInnerControl(), getChart()).
Use sap.ui.model.odata.type.* types in bindings alongside OData V2 models. Never use sap.ui.model.type.* with OData V2.
Set ariaLabelledBy on SmartFilterBar and SmartChart referencing a visible title for accessibility.
Use check() on SmartForm for client-side mandatory field validation before submitting data.
Use get_api_reference MCP tool to verify control APIs. Use run_ui5_linter to validate code.

Prohibitions

Do not use Smart controls with OData V4 services. Use MDC controls (sap.ui.mdc) instead.
Do not set custom formatters on SmartField value property. SmartField manages its own rendering based on metadata. Use annotations to influence behavior.
Do not use composite binding syntax (parts: [...]) on SmartField. It manages its own composite bindings for unit/currency fields.
Do not call getChart() synchronously during initialization. Use the initialise event or getChartAsync().
Do not directly modify inner controls of SmartChart or SmartTable (e.g., the inner sap.chart.Chart). Use the smart control's public API.
Do not hardcode field labels. Use sap:label or @Common.Label annotations in OData metadata.
Do not use inline styles or scripts in HTML (CSP compliance).
Do not use global access (sap.ui.comp.smartfield.SmartField). Use sap.ui.define or ES6 imports.

Selection Matrix

Control	Use when	Do not use when
`SmartField`	OData V2, single property display/edit, auto-rendering by Edm type and annotations	OData V4, JSON models, custom rendering required, composite/multi-property fields
`SmartForm`	OData V2, entity editing with multiple SmartFields, auto-labels from annotations	OData V4, complex custom layouts, non-OData data
`SmartFilterBar`	OData V2, annotation-driven filter UI, integration with SmartTable/SmartChart	OData V4 (use MDC FilterBar), JSON-only, purely custom filter logic
`SmartChart`	OData V2, annotation-driven chart visualization, drill-down, variant management	OData V4 (use MDC Chart), non-analytical data, custom chart JS
`SmartLink`	OData V2, semantic object navigation, cross-app navigation via FLP	OData V4 (use MDC Link), simple static links, no FLP available
`SmartMultiInput`	OData V2, multi-value entry with tokens, value help with ranges	OData V4, simple single-value input, JSON-only
`FilterBar`	Manual filter UI without OData annotations, inside ValueHelpDialog, custom filters	OData V2 with annotations (use SmartFilterBar), OData V4 (use MDC FilterBar)
`ValueHelpDialog`	Complex value selection with table + conditions tabs, token-based multi-select	Simple dropdowns, single-value selection, OData V4 (use MDC ValueHelp)

Common Errors

Symptom	Cause	Fix
SmartField renders as plain text in edit mode	Missing binding context or wrong `entitySet`	Verify `value="{PropertyName}"` and entity context resolution.
SmartField shows Input instead of DatePicker	Missing `sap:display-format="Date"` on property	Add annotation or use `controlType` in ControlConfiguration.
SmartForm labels missing	`sap:label` annotation not set in OData metadata	Add `sap:label` to property or set `label` on GroupElement.
SmartFilterBar type-ahead not working	Missing `ValueList` annotation with correct target path	Verify target: `{Namespace}.{EntityName}/{FieldName}`.
SmartFilterBar default values ignored	Setting ControlConfiguration dynamically after `initialise`	Set values statically in XML or use `setFilterData()` API.
SmartChart height is 0 / not visible	Container does not provide explicit height	Set height on parent container (e.g., `height="50vh"`).
SmartChart missing dimensions/measures	Wrong or missing `UI.Chart` annotation	Verify `MeasureAttributes` and `DimensionAttributes` in annotation.
SmartLink popover shows "No content available"	No navigation targets for semantic object in FLP	Verify FLP configuration and user authorizations.
SmartLink rendered as text (not clickable)	No `SemanticObject` annotation on property	Add `@Common.SemanticObject` annotation to OData property.
SmartMultiInput tokens not persisting	Missing ValueList or incorrect binding	Verify ValueList annotation and navigation property binding.

Performance & Accessibility

Anti-patterns to avoid

Requesting all value lists eagerly (use lazy loading; value lists load on-demand by default).
Using liveMode="true" on SmartFilterBar with expensive backend queries (causes rapid re-fetching).
Deep nesting of SmartForm groups (keep hierarchy flat: Form > Group > GroupElement).
Bypassing SmartChart API to modify inner chart directly (breaks personalization and variant management).
Not setting ignoredChartTypes when certain chart types are irrelevant (unnecessary UI options).

Accessibility checklist

Set ariaLabelledBy on SmartFilterBar referencing a visible title.
Set ariaLabelledBy on SmartChart referencing a visible title.
SmartForm automatically propagates labels to SmartFields via annotations.
Verify keyboard navigation works for SmartFilterBar "Adapt Filters" dialog.
Test SmartLink popover with screen reader (navigation targets must be announced).