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

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

@@ -1,5 +1,7 @@
 sap.ui.define([
     "sap/ui/comp/smartfield/SmartField",
+    "sap/m/GenericTag",
+    "sap/m/MessageStrip",
     "sap/m/Text",
     "sap/m/Title",
     "sap/m/Table",
@@ -7,69 +9,157 @@ sap.ui.define([
     "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, Text, Title, Table, Column, ColumnListItem, VBox, HBox, SegmentedButton, SegmentedButtonItem, FeLogger, 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.
+     * 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. Provides reset logic to discard staged values if the user cancels.
+     * 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.
      *
-     * The table preview container (VBox#EasyFillTablePreviewContainer) in the dialog XML is populated
-     * programmatically — no table rows are declared in the fragment XML.
+     * 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 into the EasyFillTablePreviewContainer VBox.
-         * For each collection with AI-suggested updates:
-         * - Creates transient staging contexts for the preview rows
-         * - Creates a Previous/New table pair with a toggle SegmentedButton
-         * - Appends the section to the container
+         * 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 container)
+         * @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 }
-         * @param {object} oTableStagingState - mutable table staging state { mStagedRows }
+         * @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) {
-            var oTablePreviewContainer = oController.byId("EasyFillTablePreviewContainer");
-            if (!oTablePreviewContainer) {
-                oLogger.warning("renderCollectionPreviews: EasyFillTablePreviewContainer not found");
+        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 all previously rendered table sections
-            oTablePreviewContainer.destroyItems();
+            // 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;
+                }
+            });
 
-            this._initializeStagedCollectionRows(
-                mCollectionUpdates,
-                mFieldMapping,
-                mCollectionState,
-                oTableStagingState,
-                oObjectPageModel
-            );
+            // 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) {
@@ -83,12 +173,22 @@ sap.ui.define([
                 var aPreviewRows = (oTableStagingState.mStagedRows[sCollectionName] || []).filter(function(oStagedRow) {
                     return oStagedRow.isPreviewVisible;
                 });
-
-                if (!aPreviewRows.length) {
+                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;
                 }
 
-                // Previous values table (read-only, initially hidden)
+                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);
                 });
@@ -96,20 +196,26 @@ sap.ui.define([
                 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
                 );
 
-                // Section title showing collection label and row count
-                var oSectionTitle = new Title({
-                    level: "H5",
-                    text: (oCollectionMeta.description || sCollectionName) + " (" + aPreviewRows.length + ")"
-                });
+                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({
@@ -123,27 +229,115 @@ sap.ui.define([
                         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",
-                    items: [oSectionTitle, oSegmentedButton]
-                }).addStyleClass("sapUiSmallMarginTop");
+                    alignItems: "Center",
+                    wrap: "Wrap",
+                    items: [oTitleControl].concat(aRightItems)
+                }).addStyleClass("sapUiSmallMarginTop sapUiSmallMarginBottom");
 
-                var oSection = new VBox({
+                var oTableVBox = new VBox({
                     items: [oHeader, oPreviousTable, oNewTable]
                 }).addStyleClass("sapSmartTemplatesObjectPageEasyFillTableSection");
 
-                oTablePreviewContainer.addItem(oSection);
-                oLogger.debug("renderCollectionPreviews: rendered collection '" + sCollectionName + "' with " + aPreviewRows.length + " rows");
+                // "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 }
+         * @param {object} oTableStagingState - table staging state { mStagedRows, mPendingNewRowContexts }
          * @param {object} oObjectPageModel - the OData model
          */
         resetStagedCollectionContexts: function(oTableStagingState, oObjectPageModel) {
@@ -159,6 +353,16 @@ sap.ui.define([
                 });
             });
 
+            // 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);
             }
@@ -169,6 +373,52 @@ sap.ui.define([
 
         // ─── 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);
@@ -178,14 +428,27 @@ sap.ui.define([
                 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);
-                aRowUpdates.forEach(function(oRowUpdate, iUpdateIndex) {
+                aExistingRowUpdates.forEach(function(oRowUpdate, iUpdateIndex) {
                     var oResolvedUpdate = that._resolveCollectionRowContext(sCollectionName, oRowUpdate, mCollectionState);
                     mUpdatesByIdentity[that._getCollectionRowIdentity(oResolvedUpdate, oRowUpdate, iUpdateIndex)] = oRowUpdate;
                 });
@@ -209,28 +472,53 @@ sap.ui.define([
 
                     var oRealRowObject = oRealContext.getObject && oRealContext.getObject();
                     that._seedTransientContextFromRowObject(oTransientContext, oRealRowObject);
-                    that._applyRowUpdateToTransientContext(oTransientContext, oRowUpdate, mCollectionPropertyMap, 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.Table}
+         * @returns {sap.m.ScrollContainer} ScrollContainer wrapping the table with horizontal scrolling enabled
          */
         _createPreviewTable: function(aPropertyNames, oItemProperties, aRows, fnCellFormatter) {
             var aColumns = aPropertyNames.map(function(sPropertyName) {
@@ -252,27 +540,40 @@ sap.ui.define([
                 });
             }.bind(this));
 
-            return new Table({
+            var oTable = new Table({
                 columns: aColumns,
                 items: aItems,
                 fixedLayout: false,
-                autoPopinMode: true
+                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.
+         * @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)
-         * @returns {sap.m.Table}
+         * @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, sCollectionName, mCollectionState, fnOnTableFieldChange) {
+        _createEditableNewTable: function(aPropertyNames, oItemProperties, aPreviewRows, aNewRowContexts, sCollectionName, mCollectionState, fnOnTableFieldChange) {
             var aColumns = aPropertyNames.map(function(sPropName) {
                 return new Column({
                     header: new Text({
@@ -282,9 +583,11 @@ sap.ui.define([
             });
 
             var mCollectionPropertyMap = mCollectionState.mCollectionProperties[sCollectionName] || Object.create(null);
+            var oEntitySet = mCollectionState.mCollectionEntitySets && mCollectionState.mCollectionEntitySets[sCollectionName];
             var that = this;
 
-            var aItems = aPreviewRows.map(function(oPreviewRow) {
+            // 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();
 
@@ -294,9 +597,12 @@ sap.ui.define([
                     }
 
                     var oPropertyMeta = mCollectionPropertyMap[sPropName];
-                    var bEditable = that._isEditableProperty(oPropertyMeta, oRowObject);
-
-                    // Use a SmartField so value-help and type-specific rendering are supported
+                    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,
@@ -308,13 +614,16 @@ sap.ui.define([
                             }
                         },
                         editableChanged: function(oEvent) {
-                            // Keep table SmartField editability deterministic during preview
                             if (oEvent.getParameter("editable") !== bEditable) {
                                 oEvent.getSource().setEditable(bEditable);
                             }
                         }
                     });
 
+                    if (bHasUneditableAiProp) {
+                        that._markSmartFieldAsWarning(oSmartField);
+                    }
+
                     return oSmartField;
                 });
 
@@ -325,12 +634,61 @@ sap.ui.define([
                 return oItem;
             });
 
-            return new Table({
+            // 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: aItems,
+                items: aExistingItems.concat(aNewItems),
                 fixedLayout: false,
-                autoPopinMode: true
+                autoPopinMode: false
             }).addStyleClass("sapSmartTemplatesObjectPageEasyFillTablePreview");
+
+            return new ScrollContainer({
+                horizontal: true,
+                vertical: false,
+                width: "100%",
+                content: [oTable]
+            });
         },
 
         /**
@@ -370,7 +728,7 @@ sap.ui.define([
             });
         },
 
-        _applyRowUpdateToTransientContext: function(oTransientContext, oRowUpdate, mCollectionPropertyMap, oRealRowObject) {
+        _applyRowUpdateToTransientContext: function(oTransientContext, oRowUpdate, mCollectionPropertyMap, oRealRowObject, oEntitySet) {
             var that = this;
             Object.keys(oRowUpdate || {}).forEach(function(sPropertyName) {
                 if (sPropertyName === "_rowIndex" || sPropertyName === "_contextPath") {
@@ -378,7 +736,7 @@ sap.ui.define([
                 }
 
                 var oPropertyMeta = mCollectionPropertyMap[sPropertyName];
-                if (!that._isEditableProperty(oPropertyMeta, oRealRowObject)) {
+                if (!that._isEditableProperty(oPropertyMeta, oRealRowObject, oEntitySet)) {
                     return;
                 }
 
@@ -390,6 +748,9 @@ sap.ui.define([
             Object.keys((oTableStagingState && oTableStagingState.mStagedRows) || {}).forEach(function(sCollectionName) {
                 delete oTableStagingState.mStagedRows[sCollectionName];
             });
+            Object.keys((oTableStagingState && oTableStagingState.mPendingNewRowContexts) || {}).forEach(function(sCollectionName) {
+                delete oTableStagingState.mPendingNewRowContexts[sCollectionName];
+            });
         },
 
         /**
@@ -459,6 +820,45 @@ sap.ui.define([
             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.
@@ -468,10 +868,27 @@ sap.ui.define([
          * @param {object} oRowObject - plain row data object
          * @returns {boolean}
          */
-        _isEditableProperty: function(oPropertyMeta, oRowObject) {
+        _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";
@@ -480,12 +897,44 @@ sap.ui.define([
             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) {
-                var iFieldControlValue = oRowObject && oRowObject[sFieldControl];
-                return iFieldControlValue !== 1;
+                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";
+                }));
         }
     };
-});
+});