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-api
MyController.js:20:5 error Use of deprecated property 'blocked' of class 'sap.m.Button'  no-deprecated-api
MyView.view.xml:10:5 error Use of deprecated class 'sap.m.DateTimeInput'  no-deprecated-api
Component.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-api
sap.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 instead
sap.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 deprecated
sap.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' instead
sap.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 interface
sap.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 interface
sap.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 type
metadata: {
    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:

   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.* framework
   Reason: 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