claude-skills/

Anthropic公式スキル・プラグインの日本語ディレクトリ

last sync 22h ago
スキルOfficialdevelopment

🔧fix-table-row-mode

プラグイン
ui5-modernization

説明

UI5 linterが検出しても自動修正できない、非推奨の `sap.ui.table.Table` 行プロパティを修正します。 次のような場合に使用: - linterが `no-deprecated-api` を出力し、`visibleRowCountMode`、`visibleRowCount`、`rowHeight`、`fixedRowCount`、`fixedBottomRowCount`、または `minAutoRowCount` に関するメッセージが表示されている場合 トリガー条件: - JS または XML における `sap.ui.table.Table` の非推奨な行関連プロパティの検出 - `rowMode` aggregation への現代化対応 非推奨のフラットプロパティを、`sap.ui.table.rowmodes.Fixed`、`Interactive`、または `Auto` を使用した構造化された `rowMode` aggregation へと変換します。

原文を表示

Fix deprecated `sap.ui.table.Table` row properties that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs: - `no-deprecated-api` with messages about `visibleRowCountMode`, `visibleRowCount`, `rowHeight`, `fixedRowCount`, `fixedBottomRowCount`, or `minAutoRowCount` Trigger on: deprecated row-related properties on sap.ui.table.Table in JS or XML, modernization to rowMode aggregation. Converts deprecated flat properties to a structured `rowMode` aggregation using `sap.ui.table.rowmodes.Fixed`, `Interactive`, or `Auto`.

ユースケース

  • linterが非推奨APIを検出した場合
  • 行プロパティの自動修正が必要なとき
  • rowModeの現代化対応をするとき

本文(日本語訳)

テーブル行モードの修正(no-deprecated-api)

このスキルは、UI5 linter が検出するが自動修正できない sap.ui.table.Table の非推奨行関連プロパティを修正します。 モダナイゼーションでは、フラットなプロパティを構造化された rowMode aggregation に置き換えます。

重要: sap.ui.table.Tablesap.m.Table にモダナイズしないでください — 両者は同等ではありません。


Linter ルール

ルール ID メッセージパターン
no-deprecated-api Use of deprecated property 'visibleRowCountMode' of class 'sap.ui.table.Table'
no-deprecated-api Use of deprecated property 'visibleRowCount' of class 'sap.ui.table.Table'
no-deprecated-api Use of deprecated property 'rowHeight' of class 'sap.ui.table.Table'
no-deprecated-api Use of deprecated property 'fixedRowCount' of class 'sap.ui.table.Table'
no-deprecated-api Use of deprecated property 'fixedBottomRowCount' of class 'sap.ui.table.Table'
no-deprecated-api Use of deprecated property 'minAutoRowCount' of class 'sap.ui.table.Table'

プロパティのマッピング

Table 上の非推奨プロパティ RowMode 上の新プロパティ 備考
visibleRowCountMode (RowMode クラスを決定) "Fixed"rowmodes:Fixed"Interactive"rowmodes:Interactive"Auto"rowmodes:Auto
visibleRowCount rowCount Fixed モードと Interactive モードで使用
minAutoRowCount minRowCount Auto モードでのみ使用
rowHeight rowContentHeight 名前変更
fixedRowCount fixedTopRowCount 名前変更(Top が追加)
fixedBottomRowCount fixedBottomRowCount 変更なし

RowMode クラスの選択

visibleRowCountMode の値に基づいて選択します:

  • "Fixed"(または未設定 — これがデフォルト)→ rowmodes:Fixed
  • "Interactive"rowmodes:Interactive
  • "Auto"rowmodes:Auto

モダナイゼーション前の安全確認

Table に設定されたプロパティが選択した RowMode クラスに存在しない場合 (例: Fixed モードのテーブルに minAutoRowCount が設定されている場合)、 動的な行モード切り替えが行われている可能性があります。 該当テーブルのモダナイゼーションを中止し、手動レビューが必要なものとしてフラグを立ててください。


修正戦略 — XML ビュー

ステップ 1: XML 名前空間の追加

ルートの <mvc:View> タグに以下を追加します:

xmlns:rowmodes="sap.ui.table.rowmodes"

ステップ 2: 非推奨プロパティの削除と rowMode Aggregation の追加

修正前(Fixed モード):

<table:Table
    rows="{/Products}"
    visibleRowCountMode="Fixed"
    visibleRowCount="5"
    fixedRowCount="1"
    fixedBottomRowCount="2"
    rowHeight="30">
    <table:columns>...</table:columns>
</table:Table>

修正後:

<table:Table
    rows="{/Products}">
    <table:rowMode>
        <rowmodes:Fixed
            rowCount="5"
            fixedTopRowCount="1"
            fixedBottomRowCount="2"
            rowContentHeight="30"/>
    </table:rowMode>
    <table:columns>...</table:columns>
</table:Table>

修正前(Interactive モード):

<table:Table
    rows="{/Products}"
    visibleRowCountMode="Interactive"
    visibleRowCount="10"
    rowHeight="25">

修正後:

<table:Table
    rows="{/Products}">
    <table:rowMode>
        <rowmodes:Interactive
            rowCount="10"
            rowContentHeight="25"/>
    </table:rowMode>

修正前(Auto モード):

<table:Table
    rows="{/Items}"
    visibleRowCountMode="Auto"
    minAutoRowCount="3">

修正後:

<table:Table
    rows="{/Items}">
    <table:rowMode>
        <rowmodes:Auto minRowCount="3"/>
    </table:rowMode>

修正戦略 — JavaScript

ステップ 1: RowMode インポートの追加

sap.ui.define に適切なクラスを追加します:

  • Fixed モードの場合: "sap/ui/table/rowmodes/Fixed"
  • Interactive モードの場合: "sap/ui/table/rowmodes/Interactive"
  • Auto モードの場合: "sap/ui/table/rowmodes/Auto"

ステップ 2: プロパティを rowMode に置き換える

修正前:

sap.ui.define([
    "sap/ui/table/Table"
], function(Table) {
    var oTable = new Table({
        visibleRowCountMode: "Interactive",
        visibleRowCount: 10,
        rowHeight: 25
    });
});

修正後:

sap.ui.define([
    "sap/ui/table/Table",
    "sap/ui/table/rowmodes/Interactive"
], function(Table, InteractiveRowMode) {
    var oTable = new Table({
        rowMode: new InteractiveRowMode({
            rowCount: 10,
            rowContentHeight: 25
        })
    });
});

セッターベースのパターンも同様に対応します:

修正前:

oTable.setVisibleRowCountMode("Fixed");
oTable.setVisibleRowCount(8);
oTable.setFixedRowCount(2);
oTable.setRowHeight(40);

修正後:

// インポート: "sap/ui/table/rowmodes/Fixed"
oTable.setRowMode(new FixedRowMode({
    rowCount: 8,
    fixedTopRowCount: 2,
    rowContentHeight: 40
}));

実装手順

  1. --details オプションを付けて linter を実行し、影響を受けるすべての Table インスタンスを特定する
  2. 各 Table に対してvisibleRowCountMode から RowMode クラスを判定する(デフォルト: "Fixed"
  3. 安全確認: 非推奨プロパティがすべて選択した RowMode クラスと互換性があることを確認する
  4. XML ビュー: xmlns:rowmodes="sap.ui.table.rowmodes" 名前空間を追加し、非推奨プロパティを削除して <rowMode> aggregation を追加する
  5. JavaScript: RowMode インポートを追加し、マッピングされたプロパティで RowMode インスタンスを生成し、コンストラクターまたは setRowMode() 経由で設定する
  6. linter を再実行して確認する

RowMode プロパティリファレンス

モード 使用可能なプロパティ
Fixed rowCountfixedTopRowCountfixedBottomRowCountrowContentHeight
Interactive rowCountrowContentHeight
Auto minRowCountfixedTopRowCountfixedBottomRowCountrowContentHeight

注意事項

  • visibleRowCountMode が設定されていない場合、デフォルトは "Fixed" だったため rowmodes:Fixed を使用する
  • <table:rowMode> aggregation は <table:Table> 内に、<table:columns> と並べて配置する
  • XML では、RowMode 要素には常に rowmodes: 名前空間プレフィックスを使用する
  • 旧 API・新 API ともに同期的であるため、非同期処理は不要

関連スキル

  • fix-deprecated-controls: sap.ui.table.Table に対する他の no-deprecated-api エラー(行モードに関連しない非推奨クラスやプロパティなど)には、fix-deprecated-controls を使用する
  • fix-js-globals: Table がグローバルアクセス(例: new sap.ui.table.Table())で instantiate されている場合、fix-js-globals が適切なモジュールインポートへの変換を処理する
原文(English)を表示

Fix Table Row Mode (no-deprecated-api)

This skill fixes deprecated row-related properties on sap.ui.table.Table that the UI5 linter detects but cannot auto-fix. The modernization replaces flat properties with a structured rowMode aggregation.

IMPORTANT: Do NOT modernize sap.ui.table.Table to sap.m.Table — they are not equivalent.

Linter Rule

Rule ID Message Pattern
no-deprecated-api Use of deprecated property 'visibleRowCountMode' of class 'sap.ui.table.Table'
no-deprecated-api Use of deprecated property 'visibleRowCount' of class 'sap.ui.table.Table'
no-deprecated-api Use of deprecated property 'rowHeight' of class 'sap.ui.table.Table'
no-deprecated-api Use of deprecated property 'fixedRowCount' of class 'sap.ui.table.Table'
no-deprecated-api Use of deprecated property 'fixedBottomRowCount' of class 'sap.ui.table.Table'
no-deprecated-api Use of deprecated property 'minAutoRowCount' of class 'sap.ui.table.Table'

Property Mapping

Deprecated Property on Table New Property on RowMode Notes
visibleRowCountMode (Determines RowMode class) "Fixed"rowmodes:Fixed, "Interactive"rowmodes:Interactive, "Auto"rowmodes:Auto
visibleRowCount rowCount Used in Fixed and Interactive mode
minAutoRowCount minRowCount Used only in Auto mode
rowHeight rowContentHeight Name change
fixedRowCount fixedTopRowCount Name change (Top added)
fixedBottomRowCount fixedBottomRowCount No change

RowMode Class Selection

Choose based on the old visibleRowCountMode value:

  • "Fixed" (or not set — this is the default) → rowmodes:Fixed
  • "Interactive"rowmodes:Interactive
  • "Auto"rowmodes:Auto

Pre-Modernization Safety Check

If a property set on the Table doesn't exist on the selected RowMode class (e.g., minAutoRowCount on a Fixed mode table), this indicates possible dynamic row mode switching. Abort modernization for that table and flag for manual review.

Fix Strategy — XML Views

Step 1: Add XML Namespace

Add to the root <mvc:View> tag:

xmlns:rowmodes="sap.ui.table.rowmodes"

Step 2: Remove Deprecated Properties and Add rowMode Aggregation

Before (Fixed mode):

<table:Table
    rows="{/Products}"
    visibleRowCountMode="Fixed"
    visibleRowCount="5"
    fixedRowCount="1"
    fixedBottomRowCount="2"
    rowHeight="30">
    <table:columns>...</table:columns>
</table:Table>

After:

<table:Table
    rows="{/Products}">
    <table:rowMode>
        <rowmodes:Fixed
            rowCount="5"
            fixedTopRowCount="1"
            fixedBottomRowCount="2"
            rowContentHeight="30"/>
    </table:rowMode>
    <table:columns>...</table:columns>
</table:Table>

Before (Interactive mode):

<table:Table
    rows="{/Products}"
    visibleRowCountMode="Interactive"
    visibleRowCount="10"
    rowHeight="25">

After:

<table:Table
    rows="{/Products}">
    <table:rowMode>
        <rowmodes:Interactive
            rowCount="10"
            rowContentHeight="25"/>
    </table:rowMode>

Before (Auto mode):

<table:Table
    rows="{/Items}"
    visibleRowCountMode="Auto"
    minAutoRowCount="3">

After:

<table:Table
    rows="{/Items}">
    <table:rowMode>
        <rowmodes:Auto minRowCount="3"/>
    </table:rowMode>

Fix Strategy — JavaScript

Step 1: Add RowMode Import

Add the appropriate class to sap.ui.define:

  • "sap/ui/table/rowmodes/Fixed" for Fixed mode
  • "sap/ui/table/rowmodes/Interactive" for Interactive mode
  • "sap/ui/table/rowmodes/Auto" for Auto mode

Step 2: Replace Properties with rowMode

Before:

sap.ui.define([
    "sap/ui/table/Table"
], function(Table) {
    var oTable = new Table({
        visibleRowCountMode: "Interactive",
        visibleRowCount: 10,
        rowHeight: 25
    });
});

After:

sap.ui.define([
    "sap/ui/table/Table",
    "sap/ui/table/rowmodes/Interactive"
], function(Table, InteractiveRowMode) {
    var oTable = new Table({
        rowMode: new InteractiveRowMode({
            rowCount: 10,
            rowContentHeight: 25
        })
    });
});

Also handle setter-based patterns:

Before:

oTable.setVisibleRowCountMode("Fixed");
oTable.setVisibleRowCount(8);
oTable.setFixedRowCount(2);
oTable.setRowHeight(40);

After:

// Import: "sap/ui/table/rowmodes/Fixed"
oTable.setRowMode(new FixedRowMode({
    rowCount: 8,
    fixedTopRowCount: 2,
    rowContentHeight: 40
}));

Implementation Steps

  1. Run linter with --details to identify all affected Table instances
  2. For each Table, determine the RowMode class from visibleRowCountMode (default: "Fixed")
  3. Safety check: Verify all deprecated properties are compatible with the chosen RowMode class
  4. XML views: Add xmlns:rowmodes="sap.ui.table.rowmodes" namespace, remove deprecated properties, add <rowMode> aggregation
  5. JavaScript: Add RowMode import, create RowMode instance with mapped properties, set via constructor or setRowMode()
  6. Verify by re-running the linter

RowMode Properties Reference

Mode Available Properties
Fixed rowCount, fixedTopRowCount, fixedBottomRowCount, rowContentHeight
Interactive rowCount, rowContentHeight
Auto minRowCount, fixedTopRowCount, fixedBottomRowCount, rowContentHeight

Notes

  • If visibleRowCountMode is not set, the default was "Fixed" — use rowmodes:Fixed
  • The <table:rowMode> aggregation goes inside <table:Table>, alongside <table:columns>
  • In XML, always use the rowmodes: namespace prefix for RowMode elements
  • Both old and new APIs are synchronous — no async handling needed

Related Skills

  • fix-deprecated-controls: For other no-deprecated-api errors on sap.ui.table.Table (e.g., deprecated classes, properties not related to row mode), use fix-deprecated-controls
  • fix-js-globals: If the Table is instantiated via global access (e.g., new sap.ui.table.Table()), fix-js-globals handles converting to proper module imports

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