Fix Partially Deprecated Apis

Fix Partially Deprecated APIs

This skill fixes partially deprecated API usage that the UI5 linter detects but cannot auto-fix because they require understanding the specific deprecated variant being used.

Quick Reference

Linter Rules Handled

When to Use

Apply this skill when you see linter output like:

MyController.js:15:5 error Usage of deprecated variant of 'sap/ui/core/theming/Parameters.get'  no-deprecated-api
MyController.js:20:5 error Usage of deprecated value for parameter 'bAsync' of 'sap/ui/model/json/JSONModel#loadData'  no-deprecated-api
MyController.js:25:5 error Usage of deprecated parameter 'batchGroupId' in 'sap/ui/model/odata/v2/ODataModel#createEntry'  no-deprecated-api
MyController.js:30:5 error Do not use strings for 'formatter' values in JavaScript  unsupported-api-usage

Fix Strategies

1. Parameters.get - Old Variant

Problem: Calling Parameters.get() without an object parameter.

// Before - all these variants are deprecated
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/theming/Parameters"
], function(Controller, Parameters) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            // Deprecated: no arguments
            var allParams = Parameters.get();

            // Deprecated: string argument
            var singleParam = Parameters.get("sapUiBaseColor");

            // Deprecated: array argument
            var multiParams = Parameters.get(["sapUiBaseColor", "sapUiBaseBG"]);
        }
    });
});

Fix Strategy: Use object parameter with callback.

// After - use object parameter
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/theming/Parameters"
], function(Controller, Parameters) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            // Correct: object parameter with name and callback
            Parameters.get({
                name: "sapUiBaseColor",
                callback: function(sValue) {
                    // Use the parameter value
                    console.log("Color:", sValue);
                }
            });

            // Correct: multiple parameters
            Parameters.get({
                name: ["sapUiBaseColor", "sapUiBaseBG"],
                callback: function(mParams) {
                    // mParams is an object with parameter values
                    console.log("Base color:", mParams.sapUiBaseColor);
                    console.log("Base BG:", mParams.sapUiBaseBG);
                }
            });
        }
    });
});

2. JSONModel.loadData - Deprecated Parameters

Problem: Using bAsync=false or bCache=false in loadData().

// Before - bAsync=false is deprecated (3rd parameter)
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            var oModel = new JSONModel();

            // Deprecated: bAsync=false (synchronous loading)
            oModel.loadData("/api/data", null, false);

            // Deprecated: bCache=false (6th parameter)
            oModel.loadData("/api/data", null, true, "GET", false, false);
        }
    });
});

Fix Strategy: Use async loading (default) and remove cache parameter.

// After - use async loading
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            var oModel = new JSONModel();

            // Correct: async loading (default or true)
            oModel.loadData("/api/data").then(function() {
                // Handle loaded data
            });

            // Or with parameters, omitting deprecated ones
            oModel.loadData("/api/data", null, true, "GET");
        }
    });
});

3. Mobile.init - Deprecated Parameters

Problem: Using homeIcon or homeIconPrecomposed in Mobile.init().

// Before - homeIcon and homeIconPrecomposed are deprecated
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/util/Mobile"
], function(Controller, Mobile) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            Mobile.init({
                homeIcon: "icons/icon.png",              // Deprecated
                homeIconPrecomposed: true,              // Deprecated
                statusBar: "default"
            });
        }
    });
});

Fix Strategy: Remove the deprecated parameters.

// After - remove homeIcon and homeIconPrecomposed
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/util/Mobile"
], function(Controller, Mobile) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            Mobile.init({
                statusBar: "default"
            });

            // Note: Use web app manifest (manifest.json) for home screen icons instead
        }
    });
});

Alternative: Define home screen icons in your web app manifest:

{
    "icons": [
        {
            "src": "icons/icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

4. ODataModel.v2.createEntry - Deprecated Parameters

Problem: Using batchGroupId or properties as array in createEntry().

// Before - batchGroupId and properties array are deprecated
sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onCreate: function() {
            var oModel = this.getView().getModel();

            var oContext = oModel.createEntry("/Products", {
                batchGroupId: "myBatch",                      // Deprecated: use groupId
                properties: ["Name", "Price", "Category"]    // Deprecated: use object
            });
        }
    });
});

Fix Strategy: Use groupId and pass properties as object with initial values.

// After - use groupId and properties object
sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onCreate: function() {
            var oModel = this.getView().getModel();

            var oContext = oModel.createEntry("/Products", {
                groupId: "myBatch",                          // Correct: groupId
                properties: {                                // Correct: object with initial values
                    Name: "",
                    Price: 0,
                    Category: ""
                }
            });
        }
    });
});

5. View.create - Deprecated View Types

Problem: Creating views with deprecated types (JS, JSON, HTML, Template).

// Before - non-XML view types are deprecated
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/mvc/View"
], function(Controller, View) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            View.create({
                viewName: "my.app.view.Detail",
                type: "JS"          // Deprecated: JS, JSON, HTML, Template
            }).then(function(oView) {
                // Use view
            });
        }
    });
});

Fix Strategy: Convert to XML view type.

// After - use XML type (or omit type, XML is default)
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/mvc/View"
], function(Controller, View) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            View.create({
                viewName: "my.app.view.Detail",
                type: "XML"         // Or omit - XML is default
            }).then(function(oView) {
                // Use view
            });
        }
    });
});

Note: This requires converting your JS/JSON/HTML view file to an XML view file.

6. Fragment.load - Deprecated Fragment Type

Problem: Loading fragments with HTML type.

// Before - HTML fragment type is deprecated
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/Fragment"
], function(Controller, Fragment) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onOpenDialog: function() {
            Fragment.load({
                name: "my.app.fragment.Dialog",
                type: "HTML"        // Deprecated
            }).then(function(oFragment) {
                // Use fragment
            });
        }
    });
});

Fix Strategy: Convert to XML fragment.

// After - use XML type (or omit, XML is default)
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/Fragment"
], function(Controller, Fragment) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onOpenDialog: function() {
            Fragment.load({
                name: "my.app.fragment.Dialog",
                type: "XML"         // Or omit - XML is default
            }).then(function(oFragment) {
                // Use fragment
            });
        }
    });
});

7. Router Constructor - Missing async Flag

Problem: Creating Router without async: true.

// Before - missing or false async flag is deprecated
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/routing/Router"
], function(Controller, Router) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            // Deprecated: no config
            var oRouter1 = new Router([]);

            // Deprecated: async not set or false
            var oRouter2 = new Router([], {
                async: false
            });
        }
    });
});

Fix Strategy: Set async: true in the config.

// After - set async: true
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/routing/Router"
], function(Controller, Router) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            var oRouter = new Router([], {
                async: true         // Required
            });
        }
    });
});

Note: Most apps use the Component's built-in router via manifest.json, which handles this automatically when IAsyncContentCreation is implemented in Component.js (see fix-component-async skill).

8. String Formatter in JS Bindings

Problem: Using string value for formatter in JavaScript.

// Before - string formatter doesn't work in JS
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/Input",
    "../model/formatter"
], function(Controller, Input, formatter) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        formatter: formatter,

        onInit: function() {
            var oInput = new Input({
                value: {
                    path: "/status",
                    formatter: "formatter.statusText"   // Error: string won't work
                }
            });
        }
    });
});

Fix Strategy: Use function reference.

// After - use function reference
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/Input",
    "../model/formatter"
], function(Controller, Input, formatter) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        formatter: formatter,

        onInit: function() {
            var oInput = new Input({
                value: {
                    path: "/status",
                    formatter: formatter.statusText    // Correct: function reference
                }
            });
        }
    });
});

Note: String formatters work in XML views (resolved at runtime) but not in JS where you have direct access to the function.

Notes

• These are "partially" deprecated because only specific usage patterns are deprecated, not the entire API
• Always check npx @ui5/linter --details for links to modernization documentation
• View/Fragment type changes require converting the actual view/fragment files to XML
• The Router async: true is automatically handled when using IAsyncContentCreation in Component.js (see fix-component-async skill for correct placement)