@sapui5/sap.suite.ui.generic.template 1.148.0 → 1.148.2

package/src/sap/suite/ui/generic/template/lib/ai/EasyFill/EasyFillTableRenderer.js

@@ -0,0 +1,940 @@
+sap.ui.define([
+    "sap/ui/comp/smartfield/SmartField",
+    "sap/m/GenericTag",
+    "sap/m/MessageStrip",
+    "sap/m/Text",
+    "sap/m/Title",
+    "sap/m/Table",
+    "sap/m/Column",
+    "sap/m/ColumnListItem",
+    "sap/m/VBox",
+    "sap/m/HBox",
+    "sap/m/ScrollContainer",
+    "sap/m/SegmentedButton",
+    "sap/m/SegmentedButtonItem",
+    "sap/uxap/ObjectPageSection",
+    "sap/uxap/ObjectPageSubSection",
+    "sap/ui/core/CustomData",
+    "sap/suite/ui/generic/template/genericUtilities/FeLogger",
+    "sap/suite/ui/generic/template/genericUtilities/FeError"
+], function(SmartField, GenericTag, MessageStrip, Text, Title, Table, Column, ColumnListItem, VBox, HBox, ScrollContainer, SegmentedButton, SegmentedButtonItem, ObjectPageSection, ObjectPageSubSection, CustomData, FeLogger, FeError) {
+    "use strict";
+
+    var sClassName = "lib.ai.EasyFill.EasyFillTableRenderer";
+    var oLogger = new FeLogger(sClassName).getLogger();
+    var iMaxPreviewRows = 20;
+
+    /** CustomData key used to identify dynamically-added table sections in the ObjectPageLayout. */
+    var sTableSectionMarker = "easyfillTableSection";
+
+    /** CustomData key used to identify the condensed-mode wrapper VBox in the Filled Fields SubSection. */
+    var sCondensedWrapperMarker = "easyfillCondensedWrapper";
+
+    /**
+     * EasyFillTableRenderer
+     *
+     * Responsible for rendering the SmartTable collection preview in the EasyFill dialog.
+     * For each collection (navigation property) with LLM-suggested row updates, this module:
+     *
+     * 1. Creates transient OData row contexts for preview rendering.
+     * 2. Creates a "Previous Values" read-only table and a "New Values" editable SmartField table.
+     * 3. Renders a SegmentedButton toggle between the two views.
+     * 4. Injects each collection as an ObjectPageSection into the shared EasyFillObjectPageLayout
+     *    so the OPL header and anchor bar remain visible while scrolling through table content.
+     * 5. Provides reset logic to discard staged values if the user cancels.
+     *
+     * Create mode:
+     * - Rows without _rowIndex or _contextPath are treated as new rows.
+     * - New rows are rendered as editable SmartField rows highlighted with "Information" row highlight.
+     * - Transient contexts for new rows are stored in oTableStagingState.mPendingNewRowContexts.
+     * - On confirm, EasyFillApplyHandler activates these contexts via submitChanges.
+     * - Only one new row per table is created (extra new rows are suppressed upstream).
+     */
+    return {
+
+        /**
+         * Renders collection (SmartTable) previews as ObjectPageSections appended to the
+         * EasyFillObjectPageLayout. Each collection becomes its own anchored section so that
+         * the OPL header stays visible when the user edits table fields.
+         *
+         * @param {object} mCollectionUpdates - map of { navProperty: [ rowUpdate ] } from AI response
+         * @param {object} mFieldMapping - full LLM field mapping (used to get item properties and descriptions)
+         * @param {Array} aTableValidationErrors - validation errors from value-help checks
+         * @param {object} oController - MVC controller (used to byId the ObjectPageLayout)
+         * @param {object} oRb - i18n resource bundle
+         * @param {object} mCollectionState - collection tracking state { mCollectionRowContexts, mCollectionRowContextsByPath, mCollectionProperties, mCollectionAllowsCreation }
+         * @param {object} oTableStagingState - mutable table staging state { mStagedRows, mPendingNewRowContexts }
+         * @param {object} oObjectPageModel - the OData model used to create transient staging contexts
+         * @param {function} fnOnTableFieldChange - callback invoked when a preview table cell changes
+         * @param {boolean} [bReuseStaging=false] - when true, skip re-initializing transient contexts (preserves user edits on mode switch)
+         * @param {object} [mCollectionsWithRejectedNewRows] - map of { navProperty: "all" | "mixed" } where
+         *   AI proposed new rows for a non-creatable table. "all" = only new rows proposed (no diff table shown);
+         *   "mixed" = some existing-row updates plus rejected new rows.
+         */
+        renderCollectionPreviews: function(mCollectionUpdates, mFieldMapping, aTableValidationErrors, oController, oRb, mCollectionState, oTableStagingState, oObjectPageModel, fnOnTableFieldChange, bReuseStaging, mCollectionsWithRejectedNewRows) {
+            var oObjectPageLayout = oController.byId("EasyFillObjectPageLayout");
+            if (!oObjectPageLayout) {
+                oLogger.warning("renderCollectionPreviews: EasyFillObjectPageLayout not found");
+                return;
+            }
+
+            // Remove previously injected table content before re-rendering.
+            // On mode switch (bReuseStaging=true) cleanup is done BEFORE the model update
+            // in onSelectionChange, so we skip it here to avoid operating on the already-fresh OPL.
+            // On first render (bReuseStaging=false) we do the cleanup here.
+            if (!bReuseStaging) {
+                this._removeTableSections(oObjectPageLayout);
+            }
+
+            if (!bReuseStaging) {
+                this._initializeStagedCollectionRows(
+                    mCollectionUpdates,
+                    mFieldMapping,
+                    mCollectionState,
+                    oTableStagingState,
+                    oObjectPageModel
+                );
+            }
+
+            // Determine mode from the dialog model.
+            var oDialogModel = oController.getView().getModel("easyFillDialogModel");
+            var sMode = oDialogModel ? oDialogModel.getProperty("/easyFillMode") : "";
+            var bIsCondensedMode = sMode === "CondensedMode";
+
+            // Find the target sections by inspecting the binding context of each live OPL section.
+            // This is the only reliable approach: model-index ↔ getSections()-index mapping is
+            // broken whenever manually-added sections (OP table sections) are still present in the
+            // aggregation alongside newly-created bound sections.
+            // Bound sections always have a "easyFillDialogModel" binding context; manually-added
+            // ones never do, so there is no ambiguity.
+            var oFilledFieldsSubSection = null;  // condensed mode: add table as block inside here
+            var oUnfilledFieldsSection   = null;  // OP mode: insert standalone section before this
+            oObjectPageLayout.getSections().forEach(function(oSection) {
+                var oCtx = oSection.getBindingContext("easyFillDialogModel");
+                if (!oCtx) { return; }
+                var sTitle = oCtx.getProperty("title");
+                if (bIsCondensedMode && sTitle === "{@i18n>EASY_FILL_FILLED_FIELDS}") {
+                    oFilledFieldsSubSection = oSection.getSubSections()[0] || null;
+                }
+                // Keep a handle to the Unfilled Fields section in both modes.
+                // In condensed mode with only non-updatable fields, there is no
+                // Filled Fields section; table previews are rendered as standalone
+                // sections and must still be inserted BEFORE Unfilled Fields.
+                if (sTitle === "{@i18n>EASY_FILL_UNFILLED_FIELDS}") {
+                    oUnfilledFieldsSection = oSection;
+                }
+            });
+
+            // iInsertOffset keeps multiple consecutive tables in the correct order when
+            // inserting standalone sections before the Unfilled Fields section (OP mode).
+            var iInsertOffset = 0;
+
+            var that = this;
+            var oRejected = mCollectionsWithRejectedNewRows || {};
+
+            // Render "all rejected" tables: AI only proposed new rows, creation not allowed.
+            // These collections have no entry in mCollectionUpdates so they need their own loop.
+            Object.keys(oRejected).forEach(function(sCollectionName) {
+                if (oRejected[sCollectionName] !== "all") {
+                    return; // "mixed" is handled below alongside the diff table
+                }
+                var oCollectionMeta = mFieldMapping[sCollectionName];
+                var sTitle = (oCollectionMeta && oCollectionMeta.description) || sCollectionName;
+                var oStrip = new MessageStrip({
+                    text: oRb.getText("EASY_FILL_TABLE_NEW_ROW_NOT_ALLOWED"),
+                    type: "Warning",
+                    showIcon: true
+                });
+                var oNotifVBox = new VBox({ items: [oStrip] });
+                oNotifVBox.addCustomData(new CustomData({ key: sTableSectionMarker, value: "true" }));
+                var oNotifSubSection = new ObjectPageSubSection({ title: sTitle, titleUppercase: false, blocks: [oNotifVBox] });
+                var oNotifSection = new ObjectPageSection({ title: sTitle, titleUppercase: false, subSections: [oNotifSubSection] });
+                oNotifSection.addCustomData(new CustomData({ key: sTableSectionMarker, value: "true" }));
+                if (oUnfilledFieldsSection) {
+                    var iRejectedAt = oObjectPageLayout.indexOfSection(oUnfilledFieldsSection);
+                    oObjectPageLayout.insertSection(oNotifSection, iRejectedAt + iInsertOffset);
+                    iInsertOffset++;
+                } else {
+                    oObjectPageLayout.addSection(oNotifSection);
+                }
+                oLogger.debug("renderCollectionPreviews: rejected-all new rows for '" + sCollectionName + "'");
+            });
+
+            Object.keys(mCollectionUpdates).forEach(function(sCollectionName) {
+                var oCollectionMeta = mFieldMapping[sCollectionName];
+                if (!oCollectionMeta || !oCollectionMeta.itemProperties) {
+                    return;
+                }
+
+                var aPropertyNames = Object.keys(oCollectionMeta.itemProperties || {});
+                if (!aPropertyNames.length) {
+                    return;
+                }
+                var aPreviewRows = (oTableStagingState.mStagedRows[sCollectionName] || []).filter(function(oStagedRow) {
+                    return oStagedRow.isPreviewVisible;
+                });
+                var aNewRows = oTableStagingState.mPendingNewRowContexts[sCollectionName] || [];
+                var bHasUneditableChanges = aPreviewRows.some(function(oPreviewRow) {
+                    return oPreviewRow.update && that._hasUneditableCollectionChanges(oPreviewRow.update, sCollectionName, {
+                        context: oPreviewRow.realContext,
+                        rowIndex: oPreviewRow.rowIndex
+                    }, mCollectionState);
+                });
+                if (!aPreviewRows.length && !aNewRows.length) {
+                    return;
+                }
+
+                var iExistingRowCount = aPreviewRows.length;
+                var iNewRowCount = aNewRows.length;
+                var iTotalCount = iExistingRowCount + iNewRowCount;
+
+                // Previous values table (read-only, initially hidden) — only existing rows
+                var aPreviousRows = aPreviewRows.map(function(oPreviewRow) {
+                    return that._buildCollectionPreviewRowFromContext(aPropertyNames, oPreviewRow.realContext);
+                });
+                var oPreviousTable = that._createPreviewTable(aPropertyNames, oCollectionMeta.itemProperties, aPreviousRows);
+                oPreviousTable.setVisible(false);
+
+                // New values table (editable SmartFields, initially visible)
+                // Includes both updated existing rows and new rows
+                var oNewTable = that._createEditableNewTable(
+                    aPropertyNames,
+                    oCollectionMeta.itemProperties,
+                    aPreviewRows,
+                    aNewRows,
+                    sCollectionName,
+                    mCollectionState,
+                    fnOnTableFieldChange
+                );
+
+                var oReadonlyTag = bHasUneditableChanges
+                    ? new GenericTag({
+                        text: oRb.getText("EASYFILL_TABLE_READONLY_TAG"),
+                        status: "Warning"
+                    }).addStyleClass("sapUiTinyMarginBegin")
+                    : null;
+
+                var sCollectionName_label = oCollectionMeta.description || sCollectionName;
+                var oTitleControl = new Title({ text: sCollectionName_label + " (" + iTotalCount + ")", titleStyle: "H4" });
+
+                // Toggle button between "Previous" and "New" views
+                var oSegmentedButton = new SegmentedButton({
+                    selectedKey: "new",
+                    width: "auto",
+                    items: [
+                        new SegmentedButtonItem({ key: "previous", text: oRb.getText("EASY_FILL_TABLE_VIEW_PREVIOUS"), width: "auto" }),
+                        new SegmentedButtonItem({ key: "new", text: oRb.getText("EASY_FILL_TABLE_VIEW_NEW"), width: "auto" })
+                    ],
+                    selectionChange: function() {
+                        var sKey = oSegmentedButton.getSelectedKey();
+                        oPreviousTable.setVisible(sKey === "previous");
+                        oNewTable.setVisible(sKey === "new");
+                        if (oReadonlyTag) {
+                            oReadonlyTag.setVisible(sKey === "new");
+                        }
+                        oTitleControl.setText(sCollectionName_label + " (" + (sKey === "previous" ? iExistingRowCount : iTotalCount) + ")");
+                    }
+                });
+                var aRightItems = oReadonlyTag ? [oReadonlyTag, oSegmentedButton] : [oSegmentedButton];
+                var oHeader = new HBox({
+                    justifyContent: "SpaceBetween",
+                    alignItems: "Center",
+                    wrap: "Wrap",
+                    items: [oTitleControl].concat(aRightItems)
+                }).addStyleClass("sapUiSmallMarginTop sapUiSmallMarginBottom");
+
+                var oTableVBox = new VBox({
+                    items: [oHeader, oPreviousTable, oNewTable]
+                }).addStyleClass("sapSmartTemplatesObjectPageEasyFillTableSection");
+
+                // "mixed" rejection: AI also proposed new rows but creation is not allowed.
+                // Show a warning strip after the toggle header, before the tables.
+                if (oRejected[sCollectionName] === "mixed") {
+                    var oRejectionStrip = new MessageStrip({
+                        text: oRb.getText("EASY_FILL_TABLE_NEW_ROW_NOT_ALLOWED"),
+                        type: "Warning",
+                        showIcon: true
+                    });
+                    oTableVBox.insertItem(oRejectionStrip, 1); // after toggle header, before tables
+                }
+
+                if (bIsCondensedMode && oFilledFieldsSubSection) {
+                    // ── Condensed mode ────────────────────────────────────────────────────────
+                    // Wrap ALL current SubSection blocks together with the table VBox in a
+                    // single outer VBox, then make that the only block in the SubSection.
+                    // BlockLayout always renders a single block at 100% width, so this prevents
+                    // the table from ever appearing side-by-side with the SmartForm regardless
+                    // of how wide the dialog is resized.
+                    oTableVBox.addCustomData(new CustomData({ key: sTableSectionMarker, value: "true" }));
+
+                    // Check if a wrapper VBox already exists (multiple collections: re-use it)
+                    var aExistingBlocks = oFilledFieldsSubSection.getBlocks();
+                    var oExistingWrapper = aExistingBlocks.find(function(oBlock) {
+                        return oBlock.getCustomData && oBlock.getCustomData().some(function(oData) {
+                            return oData.getKey() === sCondensedWrapperMarker;
+                        });
+                    });
+
+                    if (oExistingWrapper) {
+                        // Append the new table VBox to the already-created wrapper
+                        oExistingWrapper.addItem(oTableVBox);
+                    } else {
+                        // First table: pull all current blocks out of the SubSection,
+                        // place them inside a new wrapper VBox alongside the table VBox,
+                        // and add the wrapper as the sole block.
+                        var aOriginalBlocks = aExistingBlocks.slice();
+                        aOriginalBlocks.forEach(function(oBlock) {
+                            oFilledFieldsSubSection.removeBlock(oBlock);
+                        });
+                        var oWrapper = new VBox({
+                            width: "100%",
+                            items: aOriginalBlocks.concat([oTableVBox])
+                        });
+                        oWrapper.addCustomData(new CustomData({ key: sCondensedWrapperMarker, value: "true" }));
+                        oFilledFieldsSubSection.addBlock(oWrapper);
+                    }
+                } else {
+                    // ── OP mode ───────────────────────────────────────────────────────────────
+                    // Wrap in a standalone ObjectPageSection so the anchor bar shows the table
+                    // name. Insert just before the Unfilled Fields section (if present) so the
+                    // order is: annotation sections → table sections → Unfilled Fields.
+                    var oSubSection = new ObjectPageSubSection({
+                        title: sCollectionName_label,
+                        titleUppercase: false,
+                        showTitle: false,
+                        blocks: [oTableVBox]
+                    });
+                    var oOpSection = new ObjectPageSection({
+                        title: sCollectionName_label,
+                        titleUppercase: false,
+                        subSections: [oSubSection]
+                    });
+                    oOpSection.addCustomData(new CustomData({ key: sTableSectionMarker, value: "true" }));
+
+                    if (oUnfilledFieldsSection) {
+                        // Use indexOfSection on the live control — this is the actual aggregation
+                        // index regardless of how many manually-added sections are mixed in.
+                        var iInsertAt = oObjectPageLayout.indexOfSection(oUnfilledFieldsSection);
+                        oObjectPageLayout.insertSection(oOpSection, iInsertAt + iInsertOffset);
+                        iInsertOffset++;
+                    } else {
+                        oObjectPageLayout.addSection(oOpSection);
+                    }
+                }
+                oLogger.debug("renderCollectionPreviews: rendered collection '" + sCollectionName + "' with " +
+                    iExistingRowCount + " existing row(s) and " + iNewRowCount + " new row(s)");
+            });
+        },
+
+        /**
+         * Public alias for _removeTableSections, called from EasyFillHandler before model update
+         * on mode switch so the OPL aggregation is clean when the sections binding recreates controls.
+         */
+        removeTableSections: function(oObjectPageLayout) {
+            this._removeTableSections(oObjectPageLayout);
+        },
+
+        /**
+         * Resets and clears all transient collection contexts created for table preview staging.
+         *
+         * @param {object} oTableStagingState - table staging state { mStagedRows, mPendingNewRowContexts }
+         * @param {object} oObjectPageModel - the OData model
+         */
+        resetStagedCollectionContexts: function(oTableStagingState, oObjectPageModel) {
+            var aTransientPaths = [];
+
+            Object.keys((oTableStagingState && oTableStagingState.mStagedRows) || {}).forEach(function(sCollectionName) {
+                (oTableStagingState.mStagedRows[sCollectionName] || []).forEach(function(oStagedRow) {
+                    var oTransientContext = oStagedRow.transientContext;
+                    var sTransientPath = oTransientContext && oTransientContext.getPath && oTransientContext.getPath();
+                    if (sTransientPath) {
+                        aTransientPaths.push(sTransientPath);
+                    }
+                });
+            });
+
+            // Also reset pending new-row contexts (these use the same deferred group)
+            Object.keys((oTableStagingState && oTableStagingState.mPendingNewRowContexts) || {}).forEach(function(sCollectionName) {
+                (oTableStagingState.mPendingNewRowContexts[sCollectionName] || []).forEach(function(oNewRowContext) {
+                    var sPath = oNewRowContext && oNewRowContext.getPath && oNewRowContext.getPath();
+                    if (sPath) {
+                        aTransientPaths.push(sPath);
+                    }
+                });
+            });
+
+            if (aTransientPaths.length && oObjectPageModel) {
+                oObjectPageModel.resetChanges(aTransientPaths, false, true);
+            }
+
+            this._clearStagedCollectionState(oTableStagingState);
+            oLogger.debug("resetStagedCollectionContexts: transient table contexts reset");
+        },
+
+        // ─── Private Helpers ─────────────────────────────────────────────────────
+
+        /**
+         * Removes all ObjectPageSections that were dynamically added by renderCollectionPreviews.
+         * Identified by the custom data marker key set during creation.
+         *
+         * @param {sap.uxap.ObjectPageLayout} oObjectPageLayout
+         */
+        _removeTableSections: function(oObjectPageLayout) {
+            // OP mode: remove marked standalone ObjectPageSections.
+            oObjectPageLayout.getSections().filter(function(oSection) {
+                return oSection.getCustomData().some(function(oData) {
+                    return oData.getKey() === sTableSectionMarker;
+                });
+            }).forEach(function(oSection) {
+                oObjectPageLayout.removeSection(oSection);
+                oSection.destroy();
+            });
+
+            // Condensed mode: find and unwrap the wrapper VBox, restoring the original
+            // SmartForm block(s) directly into their SubSection, then destroy the wrapper.
+            oObjectPageLayout.getSections().forEach(function(oSection) {
+                oSection.getSubSections().forEach(function(oSubSec) {
+                    oSubSec.getBlocks().filter(function(oBlock) {
+                        return oBlock.getCustomData && oBlock.getCustomData().some(function(oData) {
+                            return oData.getKey() === sCondensedWrapperMarker;
+                        });
+                    }).forEach(function(oWrapper) {
+                        // Separate original (non-table) items from table VBox items
+                        var aItems = oWrapper.getItems().slice();
+                        aItems.forEach(function(oItem) {
+                            var bIsTableVBox = oItem.getCustomData && oItem.getCustomData().some(function(oData) {
+                                return oData.getKey() === sTableSectionMarker;
+                            });
+                            oWrapper.removeItem(oItem);
+                            if (bIsTableVBox) {
+                                oItem.destroy();
+                            } else {
+                                oSubSec.addBlock(oItem); // restore SmartForm
+                            }
+                        });
+                        oSubSec.removeBlock(oWrapper);
+                        oWrapper.destroy();
+                    });
+                });
+            });
+        },
+
+        _initializeStagedCollectionRows: function(mCollectionUpdates, mFieldMapping, mCollectionState, oTableStagingState, oObjectPageModel) {
+            var that = this;
+            this._clearStagedCollectionState(oTableStagingState);
+
+            Object.keys(mCollectionUpdates || {}).forEach(function(sCollectionName) {
+                var oCollectionMeta = mFieldMapping[sCollectionName];
+                var aRowUpdates = mCollectionUpdates[sCollectionName] || [];
+                var aCollectionRowContexts = mCollectionState.mCollectionRowContexts[sCollectionName] || [];
+                var mCollectionPropertyMap = mCollectionState.mCollectionProperties[sCollectionName] || Object.create(null);
+                var oEntitySet = mCollectionState.mCollectionEntitySets && mCollectionState.mCollectionEntitySets[sCollectionName];
+                var aPropertyNames = Object.keys((oCollectionMeta && oCollectionMeta.itemProperties) || {});
+                var bAllowsCreation = !!(mCollectionState.mCollectionAllowsCreation &&
+                    mCollectionState.mCollectionAllowsCreation[sCollectionName]);
+
+                if (!oCollectionMeta || !oCollectionMeta.entitySet || !aPropertyNames.length) {
+                    return;
+                }
+
+                // Separate existing-row updates from new-row creates
+                var aExistingRowUpdates = aRowUpdates.filter(function(oRow) {
+                    return typeof oRow._contextPath === "string" || typeof oRow._rowIndex === "number";
+                });
+                var aNewRowData = bAllowsCreation
+                    ? aRowUpdates.filter(function(oRow) {
+                        return typeof oRow._contextPath !== "string" && typeof oRow._rowIndex !== "number";
+                      })
+                    : [];
+
+                var mUpdatesByIdentity = Object.create(null);
+                aExistingRowUpdates.forEach(function(oRowUpdate, iUpdateIndex) {
+                    var oResolvedUpdate = that._resolveCollectionRowContext(sCollectionName, oRowUpdate, mCollectionState);
+                    mUpdatesByIdentity[that._getCollectionRowIdentity(oResolvedUpdate, oRowUpdate, iUpdateIndex)] = oRowUpdate;
+                });
+
+                oTableStagingState.mStagedRows[sCollectionName] = [];
+
+                aCollectionRowContexts.forEach(function(oRealContext, iRowIndex) {
+                    var oResolvedRow = { context: oRealContext, rowIndex: iRowIndex };
+                    var sIdentity = that._getCollectionRowIdentity(oResolvedRow, null, iRowIndex);
+                    var oRowUpdate = mUpdatesByIdentity[sIdentity];
+                    var bIsPreviewVisible = iRowIndex < iMaxPreviewRows;
+
+                    if (!bIsPreviewVisible && !oRowUpdate) {
+                        return;
+                    }
+
+                    var oTransientContext = that._createTransientCollectionContext(oCollectionMeta.entitySet, oObjectPageModel);
+                    if (!oTransientContext) {
+                        return;
+                    }
+
+                    var oRealRowObject = oRealContext.getObject && oRealContext.getObject();
+                    that._seedTransientContextFromRowObject(oTransientContext, oRealRowObject);
+                    that._applyRowUpdateToTransientContext(oTransientContext, oRowUpdate, mCollectionPropertyMap, oRealRowObject, oEntitySet);
+
+                    oTableStagingState.mStagedRows[sCollectionName].push({
+                        realContext: oRealContext,
+                        transientContext: oTransientContext,
+                        update: oRowUpdate,
+                        rowIndex: iRowIndex,
+                        propertyNames: aPropertyNames,
+                        isPreviewVisible: bIsPreviewVisible
+                    });
+                });
+
+                // Create and seed transient contexts for new rows
+                oTableStagingState.mPendingNewRowContexts[sCollectionName] = [];
+                aNewRowData.forEach(function(oNewRow) {
+                    var oNewContext = that._createTransientCollectionContext(oCollectionMeta.entitySet, oObjectPageModel);
+                    if (!oNewContext) {
+                        return;
+                    }
+                    // Seed only editable (non-key, non-computed) properties from the AI data
+                    Object.keys(oNewRow).forEach(function(sPropName) {
+                        if (sPropName === "_rowIndex" || sPropName === "_contextPath") {
+                            return;
+                        }
+                        var oPropertyMeta = mCollectionPropertyMap[sPropName];
+                        if (oPropertyMeta && !that._isKeyProperty(oPropertyMeta) &&
+                                typeof oNewRow[sPropName] !== "object") {
+                            oNewContext.setProperty(sPropName, oNewRow[sPropName]);
+                        }
+                    });
+                    oTableStagingState.mPendingNewRowContexts[sCollectionName].push(oNewContext);
+                });
+            });
+        },
+
+        /**
+         * Creates a read-only sap.m.Table for displaying table row data (used for "Previous Values" view).
+         * All cells are rendered as plain Text controls.
+         * The table is wrapped in a sap.m.ScrollContainer to enable horizontal scrolling when the
+         * dialog is narrower than the table content (autoPopinMode is disabled to prevent columns
+         * from collapsing instead of scrolling).
+         *
+         * @param {Array<string>} aPropertyNames - ordered list of property names to show as columns
+         * @param {object} oItemProperties - map of { propName: { description, dataType } }
+         * @param {Array<object>} aRows - array of plain row value objects
+         * @param {function} [fnCellFormatter] - optional custom cell formatter (oRow, sPropName, sRawValue) → string
+         * @returns {sap.m.ScrollContainer} ScrollContainer wrapping the table with horizontal scrolling enabled
+         */
+        _createPreviewTable: function(aPropertyNames, oItemProperties, aRows, fnCellFormatter) {
+            var aColumns = aPropertyNames.map(function(sPropertyName) {
+                return new Column({
+                    header: new Text({
+                        text: (oItemProperties[sPropertyName] && oItemProperties[sPropertyName].description) || sPropertyName
+                    })
+                });
+            });
+
+            var aItems = aRows.map(function(oRow) {
+                return new ColumnListItem({
+                    cells: aPropertyNames.map(function(sPropertyName) {
+                        var sText = fnCellFormatter
+                            ? fnCellFormatter(oRow, sPropertyName, this._stringifyCellValue(oRow[sPropertyName]))
+                            : this._stringifyCellValue(oRow[sPropertyName]);
+                        return new Text({ text: sText });
+                    }.bind(this))
+                });
+            }.bind(this));
+
+            var oTable = new Table({
+                columns: aColumns,
+                items: aItems,
+                fixedLayout: false,
+                autoPopinMode: false
+            }).addStyleClass("sapSmartTemplatesObjectPageEasyFillTablePreview");
+
+            return new ScrollContainer({
+                horizontal: true,
+                vertical: false,
+                width: "100%",
+                content: [oTable]
+            });
+        },
+
+        /**
+         * Creates an editable sap.m.Table for displaying AI-suggested row updates.
+         * Editable cells are rendered as SmartField controls bound to the OData row context.
+         * Non-editable cells are rendered as plain Text controls.
+         * New rows (proposed by the AI for creation) are highlighted with "Information" row color.
+         * The table is wrapped in a sap.m.ScrollContainer to enable horizontal scrolling when the
+         * dialog is narrower than the table content (autoPopinMode is disabled to prevent columns
+         * from collapsing instead of scrolling).
+         *
+         * @param {Array<string>} aPropertyNames - ordered list of property names to show as columns
+         * @param {object} oItemProperties - map of { propName: { description, dataType } }
+         * @param {Array<object>} aPreviewRows - enriched row objects with context, newValues, etc. (existing rows)
+         * @param {Array<object>} aNewRowContexts - transient OData contexts for AI-proposed new rows
+         * @param {string} sCollectionName - navigation property name (used to look up property metadata)
+         * @param {object} mCollectionState - collection tracking state (used to get property metadata)
+         * @param {function} fnOnTableFieldChange - callback when a cell value changes
+         * @returns {sap.m.ScrollContainer} ScrollContainer wrapping the table with horizontal scrolling enabled
+         */
+        _createEditableNewTable: function(aPropertyNames, oItemProperties, aPreviewRows, aNewRowContexts, sCollectionName, mCollectionState, fnOnTableFieldChange) {
+            var aColumns = aPropertyNames.map(function(sPropName) {
+                return new Column({
+                    header: new Text({
+                        text: (oItemProperties[sPropName] && oItemProperties[sPropName].description) || sPropName
+                    })
+                });
+            });
+
+            var mCollectionPropertyMap = mCollectionState.mCollectionProperties[sCollectionName] || Object.create(null);
+            var oEntitySet = mCollectionState.mCollectionEntitySets && mCollectionState.mCollectionEntitySets[sCollectionName];
+            var that = this;
+
+            // Rows for existing rows with AI-proposed updates
+            var aExistingItems = aPreviewRows.map(function(oPreviewRow) {
+                var oContext = oPreviewRow.transientContext;
+                var oRowObject = oPreviewRow.realContext && oPreviewRow.realContext.getObject && oPreviewRow.realContext.getObject();
+
+                var aCells = aPropertyNames.map(function(sPropName) {
+                    if (!oContext) {
+                        return new Text({ text: "" });
+                    }
+
+                    var oPropertyMeta = mCollectionPropertyMap[sPropName];
+                    var bEditable = that._isEditableProperty(oPropertyMeta, oRowObject, oEntitySet);
+                    var bHasUneditableAiProp = !!(
+                        oPreviewRow.update &&
+                        Object.prototype.hasOwnProperty.call(oPreviewRow.update, sPropName) &&
+                        !bEditable
+                    );
+                    var oSmartField = new SmartField({
+                        value: "{" + sPropName + "}",
+                        editable: bEditable,
+                        enabled: bEditable,
+                        contextEditable: bEditable,
+                        change: function() {
+                            if (typeof fnOnTableFieldChange === "function") {
+                                fnOnTableFieldChange();
+                            }
+                        },
+                        editableChanged: function(oEvent) {
+                            if (oEvent.getParameter("editable") !== bEditable) {
+                                oEvent.getSource().setEditable(bEditable);
+                            }
+                        }
+                    });
+
+                    if (bHasUneditableAiProp) {
+                        that._markSmartFieldAsWarning(oSmartField);
+                    }
+
+                    return oSmartField;
+                });
+
+                var oItem = new ColumnListItem({ cells: aCells });
+                if (oContext) {
+                    oItem.setBindingContext(oContext);
+                }
+                return oItem;
+            });
+
+            // Rows for AI-proposed new entries — all non-key properties are editable
+            // sEntitySetName is set explicitly on SmartField so it can resolve OData metadata
+            // even though it lives inside a plain sap.m.Table (not a SmartTable).
+            var sEntitySetName = (oEntitySet && oEntitySet.name) || sCollectionName;
+            var aNewItems = (aNewRowContexts || []).map(function(oNewContext) {
+                var aCells = aPropertyNames.map(function(sPropName) {
+                    if (!oNewContext) {
+                        return new Text({ text: "" });
+                    }
+                    var oPropertyMeta = mCollectionPropertyMap[sPropName];
+                    // On a new row: key fields and computed fields are not user-editable;
+                    // all other fields are editable so the user can review and adjust.
+                    var bEditable = oPropertyMeta
+                        ? !that._isKeyProperty(oPropertyMeta) && that._isEditableProperty(oPropertyMeta, {}, oEntitySet)
+                        : false;
+                    var oSmartField = new SmartField({
+                        value: "{" + sPropName + "}",
+                        entitySet: sEntitySetName,
+                        editable: bEditable,
+                        enabled: bEditable,
+                        contextEditable: bEditable,
+                        change: function() {
+                            if (typeof fnOnTableFieldChange === "function") {
+                                fnOnTableFieldChange();
+                            }
+                        },
+                        editableChanged: function(oEvent) {
+                            if (oEvent.getParameter("editable") !== bEditable) {
+                                oEvent.getSource().setEditable(bEditable);
+                            }
+                        }
+                    });
+                    return oSmartField;
+                });
+                var oItem = new ColumnListItem({
+                    cells: aCells,
+                    highlight: "Information"
+                });
+                oItem.setBindingContext(oNewContext);
+                return oItem;
+            });
+
+            var oTable = new Table({
+                columns: aColumns,
+                items: aExistingItems.concat(aNewItems),
+                fixedLayout: false,
+                autoPopinMode: false
+            }).addStyleClass("sapSmartTemplatesObjectPageEasyFillTablePreview");
+
+            return new ScrollContainer({
+                horizontal: true,
+                vertical: false,
+                width: "100%",
+                content: [oTable]
+            });
+        },
+
+        /**
+         * Builds a plain preview row object from a given OData context.
+         *
+         * @param {Array<string>} aPropertyNames - property names to include
+         * @param {object} oContext - OData context providing the property values
+         * @returns {object} plain row data object
+         */
+        _buildCollectionPreviewRowFromContext: function(aPropertyNames, oContext) {
+            var oPreviewRow = {};
+
+            aPropertyNames.forEach(function(sPropertyName) {
+                oPreviewRow[sPropertyName] = oContext ? oContext.getProperty(sPropertyName) : "";
+            });
+
+            return oPreviewRow;
+        },
+
+        _createTransientCollectionContext: function(sEntitySetName, oObjectPageModel) {
+            if (!sEntitySetName || !oObjectPageModel) {
+                return null;
+            }
+
+            return oObjectPageModel.createEntry("/" + sEntitySetName, {
+                groupId: "EasyFillFETransientChanges",
+                changeSetId: "EasyFillFETransientChanges"
+            });
+        },
+
+        _seedTransientContextFromRowObject: function(oTransientContext, oRowObject) {
+            Object.keys(oRowObject || {}).forEach(function(sPropertyName) {
+                var vValue = oRowObject[sPropertyName];
+                if (vValue === null || vValue === undefined || typeof vValue !== "object" || vValue instanceof Date) {
+                    oTransientContext.setProperty(sPropertyName, vValue);
+                }
+            });
+        },
+
+        _applyRowUpdateToTransientContext: function(oTransientContext, oRowUpdate, mCollectionPropertyMap, oRealRowObject, oEntitySet) {
+            var that = this;
+            Object.keys(oRowUpdate || {}).forEach(function(sPropertyName) {
+                if (sPropertyName === "_rowIndex" || sPropertyName === "_contextPath") {
+                    return;
+                }
+
+                var oPropertyMeta = mCollectionPropertyMap[sPropertyName];
+                if (!that._isEditableProperty(oPropertyMeta, oRealRowObject, oEntitySet)) {
+                    return;
+                }
+
+                oTransientContext.setProperty(sPropertyName, oRowUpdate[sPropertyName]);
+            });
+        },
+
+        _clearStagedCollectionState: function(oTableStagingState) {
+            Object.keys((oTableStagingState && oTableStagingState.mStagedRows) || {}).forEach(function(sCollectionName) {
+                delete oTableStagingState.mStagedRows[sCollectionName];
+            });
+            Object.keys((oTableStagingState && oTableStagingState.mPendingNewRowContexts) || {}).forEach(function(sCollectionName) {
+                delete oTableStagingState.mPendingNewRowContexts[sCollectionName];
+            });
+        },
+
+        /**
+         * Resolves an OData row context for a given collection row update.
+         * Prefers context path lookup; falls back to row index.
+         *
+         * @param {string} sCollectionName - navigation property name
+         * @param {object} oRowUpdate - the AI row update object ({ _contextPath?, _rowIndex? })
+         * @param {object} mCollectionState - collection tracking state
+         * @returns {{ context, rowIndex }|null}
+         */
+        _resolveCollectionRowContext: function(sCollectionName, oRowUpdate, mCollectionState) {
+            var mByPath = mCollectionState.mCollectionRowContextsByPath[sCollectionName] || Object.create(null);
+            var sContextPath = oRowUpdate && oRowUpdate._contextPath;
+
+            // Prefer context path (more stable across refreshes)
+            if (typeof sContextPath === "string" && mByPath[sContextPath]) {
+                return mByPath[sContextPath];
+            }
+
+            // Fallback to row index
+            var iRowIndex = oRowUpdate && oRowUpdate._rowIndex;
+            var aRowContexts = mCollectionState.mCollectionRowContexts[sCollectionName] || [];
+            if (typeof iRowIndex === "number" && aRowContexts[iRowIndex]) {
+                return { context: aRowContexts[iRowIndex], rowIndex: iRowIndex };
+            }
+
+            return null;
+        },
+
+        /**
+         * Returns a stable string identity for a collection row, used as a map key.
+         * Priority: context path → _contextPath from update → _rowIndex → fallback index string.
+         *
+         * @param {object} oResolvedRow - { context, rowIndex } or null
+         * @param {object} oRowUpdate - the AI row update object
+         * @param {number} iFallbackIndex - fallback numeric index
+         * @returns {string}
+         */
+        _getCollectionRowIdentity: function(oResolvedRow, oRowUpdate, iFallbackIndex) {
+            if (oResolvedRow && oResolvedRow.context && oResolvedRow.context.getPath) {
+                return oResolvedRow.context.getPath();
+            }
+            if (oRowUpdate && typeof oRowUpdate._contextPath === "string") {
+                return oRowUpdate._contextPath;
+            }
+            if (oRowUpdate && typeof oRowUpdate._rowIndex === "number") {
+                return "index:" + String(oRowUpdate._rowIndex);
+            }
+            return "row:" + String(iFallbackIndex);
+        },
+
+        /**
+         * Converts a raw cell value to a display string for read-only table cells.
+         * Handles null/undefined, Date objects, and primitives.
+         *
+         * @param {*} vValue
+         * @returns {string}
+         */
+        _stringifyCellValue: function(vValue) {
+            if (vValue === null || vValue === undefined) {
+                return "";
+            }
+            if (vValue instanceof Date) {
+                return vValue.toISOString();
+            }
+            return String(vValue);
+        },
+
+        _markSmartFieldAsWarning: function(oSmartField) {
+            if (!oSmartField) {
+                return;
+            }
+            /*Adding the style class 'sapMInputBaseContentWrapper' to make the uneditable field,
+             in the table appear visually like an input field */
+            oSmartField.addStyleClass("sapUiEasyFillWarningCell sapMInputBaseContentWrapper");
+        },
+
+        /**
+         * Checks whether the AI proposed at least one change for the row that cannot be applied
+         * because the target property is not editable in the current row context.
+         *
+         * @param {object} oRowUpdate - AI row update object
+         * @param {string} sCollectionName - navigation property name
+         * @param {object} oResolvedRow - resolved row context metadata
+         * @param {object} mCollectionState - collection tracking state
+         * @returns {boolean}
+         */
+        _hasUneditableCollectionChanges: function(oRowUpdate, sCollectionName, oResolvedRow, mCollectionState) {
+            if (!oRowUpdate) {
+                return false;
+            }
+
+            var mCollectionPropertyMap = mCollectionState.mCollectionProperties[sCollectionName] || Object.create(null);
+            var oEntitySet = mCollectionState.mCollectionEntitySets && mCollectionState.mCollectionEntitySets[sCollectionName];
+            var oContext = oResolvedRow && oResolvedRow.context;
+            var oRowObject = oContext && oContext.getObject && oContext.getObject();
+            var that = this;
+
+            return Object.keys(oRowUpdate).some(function(sPropName) {
+                if (sPropName === "_rowIndex" || sPropName === "_contextPath") {
+                    return false;
+                }
+
+                return !that._isEditableProperty(mCollectionPropertyMap[sPropName], oRowObject, oEntitySet);
+            });
+        },
+
+        /**
+         * Checks whether a collection property is editable given the current row data object.
+         * Delegates to the same annotation checks used in EasyFillFieldCollector.isEditableByContextObject.
+         * Duplicated here to keep TableRenderer self-contained (no circular dependency).
+         *
+         * @param {object} oPropertyMeta - OData property metadata
+         * @param {object} oRowObject - plain row data object
+         * @returns {boolean}
+         */
+        _isEditableProperty: function(oPropertyMeta, oRowObject, oEntitySet) {
+            if (!oPropertyMeta) {
+                return false;
+            }
+
+            // Check entity-set-level sap:updatable (entire entity set is read-only)
+            if (oEntitySet) {
+                var sEntitySetUpdatable = oEntitySet["sap:updatable"];
+                if (sEntitySetUpdatable === "false") {
+                    return false;
+                }
+                // sap:updatable-path: resolved against the row context object (boolean property)
+                var sEntitySetUpdatablePath = oEntitySet["sap:updatable-path"];
+                if (sEntitySetUpdatablePath && oRowObject) {
+                    var bUpdatableFromPath = oRowObject[sEntitySetUpdatablePath];
+                    if (bUpdatableFromPath === false || bUpdatableFromPath === "false") {
+                        return false;
+                    }
+                }
+            }
+
+            var sUpdatable = oPropertyMeta["sap:updatable"];
+            if (sUpdatable) {
+                return sUpdatable !== "false";
+            }
+            var oAnnotation = oPropertyMeta["com.sap.vocabularies.Common.v1.FieldControl"];
+            if (oAnnotation && oAnnotation["EnumMember"]) {
+                return oAnnotation["EnumMember"] !== "com.sap.vocabularies.Common.v1.FieldControlType/ReadOnly";
+            }
+            // Dynamic FieldControl via Path (e.g. { "Path": "SomeField_fc" })
+            // FieldControl values: 0=Hidden, 1=ReadOnly, 3=Optional, 7=Mandatory
+            if (oAnnotation && oAnnotation["Path"]) {
+                var iDynamicFieldControl = oRowObject && oRowObject[oAnnotation["Path"]];
+                if (iDynamicFieldControl !== undefined && iDynamicFieldControl !== null) {
+                    return iDynamicFieldControl !== 0 && iDynamicFieldControl !== 1;
+                }
+            }
+            // Check "sap:field-control" dynamic path (value 1 = read-only)
+            // If the _fc property is defined in metadata but its runtime value is absent from
+            // the row object (not fetched / not in $select), treat as non-editable (safe fallback).
+            var sFieldControl = oPropertyMeta["sap:field-control"];
+            if (sFieldControl) {
+                if (!oRowObject || !(sFieldControl in oRowObject)) {
+                    return false;
+                }
+                var iFieldControlValue = oRowObject[sFieldControl];
+                return iFieldControlValue !== 0 && iFieldControlValue !== 1;
+            }
+            return true;
+        },
+
+        /**
+         * Returns true if an OData property is a key field (sap:key="true" or isKey: true).
+         * Key fields are not user-editable when creating new rows.
+         *
+         * @param {object} oPropertyMeta - OData property metadata
+         * @returns {boolean}
+         */
+        _isKeyProperty: function(oPropertyMeta) {
+            if (!oPropertyMeta) {
+                return false;
+            }
+            return oPropertyMeta.isKey === true ||
+                oPropertyMeta["sap:key"] === "true" ||
+                !!(oPropertyMeta.extensions && oPropertyMeta.extensions.some(function(ext) {
+                    return ext.name === "key" && ext.value === "true";
+                }));
+        }
+    };
+});