🔧fix-table-row-mode
- プラグイン
- ui5-modernization
- ソース
- GitHub で見る ↗
説明
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.Table を sap.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
}));
実装手順
--detailsオプションを付けて linter を実行し、影響を受けるすべての Table インスタンスを特定する- 各 Table に対して、
visibleRowCountModeから RowMode クラスを判定する(デフォルト:"Fixed") - 安全確認: 非推奨プロパティがすべて選択した RowMode クラスと互換性があることを確認する
- XML ビュー:
xmlns:rowmodes="sap.ui.table.rowmodes"名前空間を追加し、非推奨プロパティを削除して<rowMode>aggregation を追加する - JavaScript: RowMode インポートを追加し、マッピングされたプロパティで RowMode インスタンスを生成し、コンストラクターまたは
setRowMode()経由で設定する - linter を再実行して確認する
RowMode プロパティリファレンス
| モード | 使用可能なプロパティ |
|---|---|
Fixed |
rowCount、fixedTopRowCount、fixedBottomRowCount、rowContentHeight |
Interactive |
rowCount、rowContentHeight |
Auto |
minRowCount、fixedTopRowCount、fixedBottomRowCount、rowContentHeight |
注意事項
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
- Run linter with --details to identify all affected Table instances
- For each Table, determine the RowMode class from
visibleRowCountMode(default:"Fixed") - Safety check: Verify all deprecated properties are compatible with the chosen RowMode class
- XML views: Add
xmlns:rowmodes="sap.ui.table.rowmodes"namespace, remove deprecated properties, add<rowMode>aggregation - JavaScript: Add RowMode import, create RowMode instance with mapped properties, set via constructor or
setRowMode() - 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
visibleRowCountModeis not set, the default was"Fixed"— userowmodes: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-apierrors onsap.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 による自動翻訳です。