Run any Skill in Manus with one click

ui5-best-practices-mdc

Stars28

Forks7

UpdatedJuly 3, 2026 at 08:25

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

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-smart-controls

UI5/plugins-coding-agents

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 Smar

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-mdc

description

UI5 MDC Controls Best Practices

Apply these guidelines whenever generating, reviewing, or troubleshooting MDC control code in freestyle applications using OData V4 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.mdc.FilterBar`	`references/mdc-filter-bar.md`
Working on or planning a `sap.ui.mdc.Chart`	`references/mdc-chart.md`
Working on or planning a `sap.ui.mdc.Field`	`references/mdc-field.md`
Working on or planning a `sap.ui.mdc.FilterField`	`references/mdc-filter-field.md`
Working on or planning a `sap.ui.mdc.ValueHelp`	`references/mdc-value-help.md`
Working on or planning a `sap.ui.mdc.Link`	`references/mdc-link.md`
Working on or planning a `sap.ui.mdc.MultiValueField`	`references/mdc-multi-value-field.md`
Using MDC controls with JSON model (non-OData)	`references/mdc-json-delegates.md`
Working on or planning a `sap.ui.mdc.Table`	See `ui5-best-practices-tables` skill, `references/mdc-table.md`

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

The Delegate Pattern

All MDC controls use a delegate to decouple the control from data-source-specific logic. App developers must:

Specify the delegate in XML: delegate="{name: 'my/app/delegate/MyDelegate', payload: {entitySet: 'Products'}}"
Implement the delegate module extending the appropriate base delegate
Override key methods (at minimum fetchProperties)

Base delegates for OData V4:

Control	Base Delegate
Table	`sap/ui/mdc/odata/v4/TableDelegate`
FilterBar	`sap/ui/mdc/odata/v4/FilterBarDelegate`
Chart	`sap/ui/mdc/odata/v4/vizChart/Delegate`
ValueHelp	`sap/ui/mdc/ValueHelpDelegate`
Link	`sap/ui/mdc/LinkDelegate`
MultiValueField	`sap/ui/mdc/field/MultiValueFieldDelegate`

JSON model usage: MDC controls also work with JSON models. Extend the base delegates directly (sap/ui/mdc/TableDelegate, sap/ui/mdc/FilterBarDelegate) — not the OData V4 variants. See references/mdc-json-delegates.md for details.

PropertyInfo — the core metadata format returned by fetchProperties:

{
    key: "propertyName",        // Unique identifier (required)
    label: "Display Label",     // User-visible label (required)
    dataType: "sap.ui.model.odata.v4.type.String"  // Data type (required)
}

Core Rules

Mandatory

Every MDC control requires a delegate property pointing to a valid module path.
Implement fetchProperties in the delegate returning PropertyInfo[] with at minimum: key, label, dataType.
Extend the appropriate OData V4 base delegate (see table above) for OData V4 services. For JSON/other models, extend the generic base delegate directly.
Use p13nMode to enable personalization (Column, Sort, Filter, Group for Table; Item, Sort, Filter, Type for Chart; Item for FilterBar).
Use sap.ui.mdc.condition.Condition.createCondition() to construct conditions programmatically.
Use sap.ui.model.odata.v4.type.* types in PropertyInfo dataType field for OData V4 models. Use sap.ui.model.type.* with JSON models. Register types in the TypeMap.
Set ariaLabelledBy on FilterBar and Chart for accessibility.
Prefer Fiori elements building blocks over freestyle MDC. Use MDC only when Fiori elements is out of scope.
Use get_api_reference MCP tool to verify control APIs. Use run_ui5_linter to validate code.

Prohibitions

Do not use MDC controls with OData V2 models. Use Smart controls (sap.ui.comp) instead. MDC works with OData V4 and JSON models.
Do not access inner controls directly (e.g., inner sap.chart.Chart or sap.m.Table). Use the delegate or MDC control's public API.
Do not omit key from PropertyInfo objects (formerly name, now deprecated).
Do not construct condition objects manually as plain JSON. Always use Condition.createCondition(operator, values).
Do not skip delegate implementation for production code (built-in defaults are for demos only).
Do not use inline styles or scripts (CSP compliance).
Do not use global access (sap.ui.mdc.FilterBar). Use sap.ui.define or ES6 imports.

Selection Matrix

Control	Use when	Do not use when
`MDC FilterBar`	OData V4 or JSON model, delegate-driven filter UI, MDC Table/Chart	OData V2 (use SmartFilterBar), simple search bar
`MDC Chart`	OData V4, delegate-driven chart visualization, drill-down	OData V2 (use SmartChart), simple static charts, no analytical data
`MDC Field`	OData V4 or JSON, single field with auto-rendering by data type	OData V2 (use SmartField), purely custom rendering needed
`MDC FilterField`	Inside MDC FilterBar for individual filter conditions	Standalone filtering outside FilterBar context
`MDC ValueHelp`	OData V4 or JSON, type-ahead + dialog value selection	OData V2 (use ValueHelpDialog), simple dropdowns without search
`MDC Link`	OData V4, semantic object navigation, delegate-driven link targets	OData V2 (use SmartLink), simple static links
`MDC MultiValueField`	OData V4 or JSON, multi-value token entry via items aggregation	OData V2 (use SmartMultiInput), simple single-value fields

Common Errors

Symptom	Cause	Fix
"Delegate module could not be loaded"	Wrong path in `delegate` property	Verify module path matches actual file location in project.
Chart shows no data	`fetchProperties` returns wrong PropertyInfo (missing `groupable`/`aggregatable`)	Ensure dimensions have `groupable: true`, measures have `aggregatable: true`.
FilterBar fields not appearing	PropertyInfo missing or `hiddenFilter: true`	Check delegate `fetchProperties` returns properties with correct visibility.
Field shows wrong inner control	`dataType` in PropertyInfo doesn't match expected format	Verify `dataType` uses full qualified type name (e.g., `sap.ui.model.odata.v4.type.String`).
Personalization dialog empty	`p13nMode` not set or PropertyInfo incomplete	Add `p13nMode="Column,Sort,Filter"` and ensure PropertyInfo has `sortable`/`filterable` flags.
ValueHelp not opening	ValueHelp not connected to Field or containers missing	Verify `valueHelp` association on Field and that Popover/Dialog containers are defined.
Conditions not applied to binding	`updateBindingInfo` not implemented in delegate	Implement `updateBindingInfo` to apply filter conditions to the OData binding.
Link always rendered as text	`fetchLinkType` returns `LinkType.Text` or fails	Implement `fetchLinkType` returning `Popup` or `DirectLink` type.

Performance & Accessibility

Anti-patterns to avoid

Loading all PropertyInfo eagerly when only a subset is needed (return minimal set from fetchProperties).
Not implementing updateBindingInfo (conditions are never applied to the data binding).
Skipping p13nMode configuration (personalization features are disabled by default).
Creating large delegate modules (split complex logic into helper modules loaded on demand).
Using synchronous operations in delegate methods (all delegate methods should return Promises).

Accessibility checklist

Set ariaLabelledBy on FilterBar referencing a visible title.
Set ariaLabelledBy on Chart referencing a visible title.
Verify keyboard navigation works for personalization dialogs.
Test ValueHelp type-ahead and dialog with screen reader.
Ensure all FilterFields have meaningful labels via PropertyInfo label.