Fix Deprecated Controls

Fix Deprecated Controls, Classes, Interfaces, and Types

This skill fixes deprecated control/class/interface/type issues that the UI5 linter detects but cannot auto-fix because they require understanding the specific replacement APIs.

Linter Rules Handled

When to Use

Apply this skill when you see linter output like:

MyController.js:15:5 error Use of deprecated class 'sap.ui.commons.Button'  no-deprecated-apiMyController.js:20:5 error Use of deprecated property 'blocked' of class 'sap.m.Button'  no-deprecated-apiMyView.view.xml:10:5 error Use of deprecated class 'sap.m.DateTimeInput'  no-deprecated-apiComponent.js:25:5 error Use of deprecated interface 'sap.ui.core.IFormContent'  no-deprecated-api

Getting Replacement Information

Run the linter with --details flag to get links to API documentation with replacement guidance:

npx @ui5/linter --details

Use the UI5 MCP Server's get_api_reference tool to check deprecation status and find replacements:

• Query: sap.ui.commons.Button or sap.m.Button#blocked

Fix Strategy

1. Deprecated Class in new Expression

Problem: Using a deprecated control class.

// Before - triggers no-deprecated-apisap.ui.define([    "sap/ui/core/mvc/Controller",    "sap/ui/commons/Button"  // Deprecated library!], function(Controller, Button) {    "use strict";
    return Controller.extend("my.app.controller.Main", {        onInit: function() {            var oButton = new Button({                text: "Click me"            });        }    });});

Fix Strategy: Replace with the modern equivalent class.

// After - use sap.m.Button insteadsap.ui.define([    "sap/ui/core/mvc/Controller",    "sap/m/Button"], function(Controller, Button) {    "use strict";
    return Controller.extend("my.app.controller.Main", {        onInit: function() {            var oButton = new Button({                text: "Click me"            });        }    });});

Common Deprecated Class Replacements:

sap.m Deprecated Controls:

sap.f Deprecated Controls:

sap.ui.table Deprecated Controls:

sap.ui.unified Deprecated Controls:

sap.ui.layout Deprecated Controls:

sap.ui.comp Deprecated Controls:

sap.ui.mdc Deprecated/Changed APIs:

2. Deprecated Property in Constructor

Problem: Using a deprecated property when creating a control.

// Before - 'blocked' property is deprecatedsap.ui.define([    "sap/ui/core/mvc/Controller",    "sap/m/Button"], function(Controller, Button) {    "use strict";
    return Controller.extend("my.app.controller.Main", {        onInit: function() {            var oButton = new Button({                text: "Submit",                blocked: true  // Deprecated!            });        }    });});

Fix Strategy: Use the replacement property or API.

// After - use 'enabled' insteadsap.ui.define([    "sap/ui/core/mvc/Controller",    "sap/m/Button"], function(Controller, Button) {    "use strict";
    return Controller.extend("my.app.controller.Main", {        onInit: function() {            var oButton = new Button({                text: "Submit",                enabled: false  // Use enabled: false instead of blocked: true            });        }    });});

Common Deprecated Property Replacements:

3. Deprecated Interface in Metadata

Problem: Using a deprecated interface in control/component metadata.

// Before - deprecated interfacesap.ui.define([    "sap/ui/core/Control"], function(Control) {    "use strict";
    return Control.extend("my.app.control.MyControl", {        metadata: {            interfaces: ["sap.ui.core.IFormContent"]  // Check if deprecated        }    });});

Fix Strategy: Replace with the current interface or remove if no longer needed.

// After - use current interfacesap.ui.define([    "sap/ui/core/Control"], function(Control) {    "use strict";
    return Control.extend("my.app.control.MyControl", {        metadata: {            interfaces: ["sap.ui.core.ISemanticFormContent"]  // Updated interface        }    });});

4. Deprecated Type in Metadata

Problem: Using a deprecated type in property definition.

// Before - deprecated typemetadata: {    properties: {        size: { type: "sap.ui.core.CSSSize" }  // May be deprecated    }}

Fix Strategy: Check the API reference and use the current type.

5. Deprecated Controls in XML Views

Problem: Using deprecated controls in XML views.

<!-- Before - DateTimeInput is deprecated --><mvc:View    xmlns:mvc="sap.ui.core.mvc"    xmlns="sap.m">    <DateTimeInput value="{/date}" /></mvc:View>

Fix Strategy: Replace with the modern equivalent controls.

<!-- After - use DatePicker and TimePicker --><mvc:View    xmlns:mvc="sap.ui.core.mvc"    xmlns="sap.m">    <DatePicker value="{/date}" />    <TimePicker value="{/time}" /></mvc:View>

6. Deprecated Properties in XML Views

Problem: Using deprecated properties on controls in XML.

<!-- Before - blocked property deprecated --><Button text="Submit" blocked="true" />

Fix Strategy: Replace with the current property.

<!-- After - use enabled with inverted logic --><Button text="Submit" enabled="false" />

7. Deprecated Aggregations in XML Views

Problem: Using deprecated aggregations.

<!-- Before - plugins aggregation may be deprecated in some contexts --><table:Table>    <table:plugins>        <table:MultiSelectionPlugin />    </table:plugins></table:Table>

Fix Strategy: Check API reference for the current aggregation name or approach.

8. sap.m.MessagePage → sap.m.IllustratedMessage

sap.m.MessagePage is deprecated in favor of sap.m.IllustratedMessage. Key changes: text+description → single description, icon → illustrationType enum, showNavButton/navButtonPress → Button in additionalContent aggregation.

For the full property mapping table, XML/JS examples, and illustration type list, read references/control-modernization-details.md.

9. sap.ui.comp.variants.VariantManagement → sap.m.VariantManagement

Key changes: variantItems → items, VariantItem.text → .title, showExecuteOnSelection → supportApplyAutomatically, showShare → supportPublic. The standard variant must be explicitly created with rename="false" and remove="false".

For the full property mapping table and standard variant XML example, read references/control-modernization-details.md.

10. Deprecated Core Classes

Key replacements: MessageManager → sap/ui/core/Messaging, Export* → sap/ui/export/Spreadsheet, LocalBusyIndicator → Control.setBusy(true). SearchProvider, OpenSearchProvider, and ScrollBar have no replacement.

For the full table and MessageManager→Messaging code example, read references/control-modernization-details.md.

Implementation Steps

1. Run linter with --details to get replacement documentation links:

   bash

   npx @ui5/linter --details

2. Identify the deprecated item from the error message (class, property, interface, type)

3. Check if this is a p13n/personalization control — if the deprecated class is any of:

   • sap.m.P13nDialog, sap.m.P13nColumnsPanel, sap.m.P13nSortPanel, sap.m.P13nGroupPanel, sap.m.P13nFilterPanel
   • sap.m.TablePersoDialog, sap.m.TablePersoController, sap.m.TablePersoProvider
   • sap.ui.table.TablePersoController

   Do NOT attempt to auto-modernize these. The p13n framework modernization requires significant architectural changes (different initialization patterns, state persistence models, and panel configurations) that cannot be reliably automated. Instead, report them to the user:

   ⚠️ Manual modernization required: <ClassName> at <file>:<line>Replacement: sap.m.p13n.* frameworkReason: p13n modernization requires architectural changes — see UI5 documentation for sap.m.p13n

4. Look up the replacement (for non-p13n controls) in:

   • The details link from npx @ui5/linter --details
   • UI5 API Reference using the get_api_reference tool
   • The deprecation tables above

5. Apply the fix:

   • For classes: Change import and class name
   • For properties: Change property name or use new API
   • For interfaces/types: Update metadata
   • For XML: Update element names and attributes

6. Verify by re-running the linter

Example Fix Session

Given linter output:

npx @ui5/linter --details
MyController.js:15:5 error Use of deprecated class 'sap.m.DateTimeInput'  no-deprecated-api  Details: {@link sap.m.DateTimeInput}MyController.js:25:5 error Use of deprecated property 'blocked' of class 'sap.m.Button'  no-deprecated-api  Details: {@link sap.m.Button#blocked}

Before:

sap.ui.define([    "sap/ui/core/mvc/Controller",    "sap/m/DateTimeInput",    "sap/m/Button"], function(Controller, DateTimeInput, Button) {    "use strict";
    return Controller.extend("my.app.controller.Main", {        onInit: function() {            var oDateTimeInput = new DateTimeInput({                value: "{/date}"            });
            var oButton = new Button({                text: "Submit",                blocked: true            });        }    });});

After:

sap.ui.define([    "sap/ui/core/mvc/Controller",    "sap/m/DatePicker",    "sap/m/TimePicker",    "sap/m/Button"], function(Controller, DatePicker, TimePicker, Button) {    "use strict";
    return Controller.extend("my.app.controller.Main", {        onInit: function() {            // DateTimeInput replaced with separate DatePicker and TimePicker            var oDatePicker = new DatePicker({                value: "{/date}"            });            var oTimePicker = new TimePicker({                value: "{/time}"            });
            var oButton = new Button({                text: "Submit",                enabled: false  // blocked: true → enabled: false            });        }    });});

Notes

• Always check the UI5 API Reference for the specific replacement guidance
• Some deprecated controls may have multiple possible replacements depending on your use case
• When replacing deprecated libraries (sap.ui.commons, sap.ui.ux3), the replacement controls may have different APIs
• Property replacements may have inverted logic (e.g., blocked: true → enabled: false)
• Consider using npx @ui5/linter --details to get direct links to modernization documentation
• sap.f.IllustratedMessage and sap.f.Illustration are deprecated in favor of sap.m.IllustratedMessage and sap.m.Illustration — this is a simple namespace move with the same API
• When modernizing sap.ui.comp.variants.VariantManagement, the standard variant must be explicitly created (see section 9)

Related Skills

• fix-table-row-mode: For deprecated row-related properties on sap.ui.table.Table (visibleRowCountMode, visibleRowCount, rowHeight, etc.), use fix-table-row-mode — it handles the modernization to the rowMode aggregation
• fix-partially-deprecated-apis: For partially deprecated API signatures (e.g., Parameters.get, View.create), use fix-partially-deprecated-apis instead of this skill