• Projects
  • Service
  • About
  • branding.bz
  • Podcast
  • Tips
  • FAQ
  • Recruit
  • Download
  • Contact
  • branding.bz(ブランド構築SaaS)
  • DESIGN NOW(デザインメディア)
  • X
  • LinkedIn
  • Spotify
  • Facebook

213-0011 神奈川県川崎市高津区久本3-6-7-303

© 2026 ID INC. All rights reserved

claude-skills/スキル
SKILLOfficialdevelopment

fix-deprecated-controls

プラグイン
ui5-modernization
ソース
GitHub で見る ↗
説明

UI5リンター(コード品質チェック機能)が報告するものの自動修正できない、廃止予定のコントロール・クラス・インターフェース・型に関する問題を修正します。 **次のような場合に使用:** - リンターが以下の出力を表示している場合 - `no-deprecated-api` で廃止予定のクラス、インターフェース、型、プロパティ(属性)に関するメッセージ - 「廃止予定のクラス '...' を使用しています」「廃止予定のインターフェース '...' を使用しています」「廃止予定のプロパティ '...' を使用しています」といったメッセージ **対応する問題:** - JavaScriptコード内の `new` 式における廃止予定のコントロール使用 - コンストラクタ設定における廃止予定のプロパティ - メタデータ内の廃止予定のインターフェース・型 - XMLビュー(画面定義ファイル)内の廃止予定のコントロール・プロパティ - sap.m.MessagePage から IllustratedMessage への近代化 リンターの出力に「廃止予定のクラス」「廃止予定のプロパティ」「廃止予定のインターフェース」「廃止予定の型」という表現が含まれていれば、ユーザーが明示的に廃止について言及していない場合でも、このスキルを使用してください。 廃止予定のUI5コントロールおよびそのプロパティの代替案を提案します。

原文を表示

Fix deprecated control/class/interface/type issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs: - `no-deprecated-api` with messages about deprecated class, interface, type, property, or property of class - Messages like "Use of deprecated class '...'", "Use of deprecated interface '...'", "Use of deprecated property '...'" Trigger on: deprecated control usage in JS `new` expressions, deprecated properties in constructor settings, deprecated interfaces/types in metadata, deprecated controls/properties in XML views, sap.m.MessagePage modernization to IllustratedMessage. Use this skill whenever you see 'deprecated class', 'deprecated property', 'deprecated interface', or 'deprecated type' in linter output, even if the user doesn't explicitly mention deprecation. Provides replacement guidance for deprecated UI5 controls and their properties.

ユースケース
  • リンターが廃止予定APIの警告を出している
  • JavaScriptで廃止予定のコントロールを使用している
  • XMLビューで廃止予定のプロパティを指定している
  • メタデータに廃止予定のインターフェースがある
  • MessagePageをIllustratedMessageに近代化する
本文

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

Rule ID Message Pattern This Skill's Action
no-deprecated-api Use of deprecated class '...' Replace with new class
no-deprecated-api Use of deprecated interface '...' Replace with new interface
no-deprecated-api Use of deprecated type '...' Replace with new type
no-deprecated-api Use of deprecated property '...' Remove or replace property
no-deprecated-api Use of deprecated property '...' of class '...' Replace with new property/API

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:

Deprecated Class Replacement
sap.ui.commons.* sap.m.* equivalents
sap.ui.ux3.* sap.m.* or sap.f.*
sap.ui.commons.TextField sap.m.Input
sap.ui.commons.Button sap.m.Button
sap.ui.commons.Label sap.m.Label
sap.ui.commons.CheckBox sap.m.CheckBox
sap.ui.commons.DropdownBox sap.m.Select or sap.m.ComboBox
sap.ui.model.odata.ODataModel sap.ui.model.odata.v2.ODataModel
sap.m.MessagePage sap.m.IllustratedMessage (see section 8)
sap.viz.ui5.controls.VizFrame (old) Check sap.viz documentation

sap.m Deprecated Controls:

Deprecated Class Replacement Notes
sap.m.UploadCollection sap.m.upload.UploadSet or sap.m.plugins.UploadSetwithTable UploadSetwithTable for table-based layouts
sap.m.TablePersoDialog sap.m.p13n.* Do not auto-modernize — report for manual modernization
sap.m.TablePersoController sap.m.p13n.* Do not auto-modernize — report for manual modernization
sap.m.TablePersoProvider sap.m.p13n.* Do not auto-modernize — report for manual modernization
sap.m.P13nDialog sap.m.p13n.Popup Do not auto-modernize — report for manual modernization
sap.m.P13nColumnsPanel sap.m.p13n.SelectionPanel Do not auto-modernize — report for manual modernization
sap.m.P13nSortPanel sap.m.p13n.SortPanel Do not auto-modernize — report for manual modernization
sap.m.P13nGroupPanel sap.m.p13n.GroupPanel Do not auto-modernize — report for manual modernization
sap.m.P13nFilterPanel sap.m.p13n.FilterPanel Do not auto-modernize — report for manual modernization
sap.m.DateTimeInput sap.m.DatePicker + sap.m.TimePicker Split into separate controls
sap.m.MultiEditField — No direct replacement, custom implementation required
sap.m.RouteMatchedHandler sap.m.routing.RouteMatchedHandler Use the routing module

sap.f Deprecated Controls:

Deprecated Class Replacement Notes
sap.f.Avatar sap.m.Avatar Moved to sap.m
sap.f.IllustratedMessage sap.m.IllustratedMessage Moved to sap.m
sap.f.Illustration sap.m.Illustration Moved to sap.m

sap.ui.table Deprecated Controls:

Deprecated Class Replacement Notes
sap.ui.table.ColumnMenu sap.m.table.columnmenu.Menu New column menu framework
sap.ui.table.AnalyticalColumnMenu sap.m.table.columnmenu.Menu New column menu framework
sap.ui.table.TablePersoController sap.m.p13n.* Do not auto-modernize — report for manual modernization

sap.ui.unified Deprecated Controls:

Deprecated Class Replacement Notes
sap.ui.unified.Shell — No replacement — redesign using sap.f.ShellBar or sap.tnt.ToolPage
sap.ui.unified.ShellOverlay — No replacement
sap.ui.unified.ShellLayout — No replacement
sap.ui.unified.SplitContainer sap.m.SplitContainer or sap.f.FlexibleColumnLayout Use responsive layout
sap.ui.unified.ContentSwitcher — No replacement — use NavContainer or custom logic

sap.ui.layout Deprecated Controls:

Deprecated Class Replacement Notes
sap.ui.layout.form.GridLayout sap.ui.layout.form.ColumnLayout or sap.ui.layout.form.ResponsiveGridLayout GridLayout was removed

sap.ui.comp Deprecated Controls:

Deprecated Class Replacement Notes
sap.ui.comp.variants.VariantManagement sap.m.VariantManagement See section 9 for property mapping

sap.ui.mdc Deprecated/Changed APIs:

Deprecated Replacement Notes
sap.ui.mdc.enum.* enums sap.ui.mdc.enums.* Namespace renamed (enum → enums)
sap.ui.mdc.FilterBar old API sap.ui.mdc.FilterBar refactored Check API for changed properties
sap.ui.mdc.Link FLP integration Decoupled from FLP Check new API for direct usage

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:

Control Deprecated Property Replacement
sap.m.Button blocked enabled (inverted logic)
sap.m.Button tap (event) press
sap.ui.table.Table visibleRowCountMode rowMode aggregation
sap.ui.table.Table visibleRowCount rowMode aggregation
sap.ui.table.Table fixedRowCount rowMode aggregation
sap.ui.comp.smarttable.SmartTable useExportToExcel enableExport
sap.ui.layout.form.SimpleForm minWidth Remove (only for ResponsiveLayout)

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

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。