@sapui5/sap.suite.ui.generic.template 1.151.1 → 1.152.1

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

@@ -16,8 +16,8 @@ sap.ui.define([
     "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) {
+    "sap/suite/ui/generic/template/lib/ai/EasyFill/EasyFillFieldCollector"
+], function(SmartField, GenericTag, MessageStrip, Text, Title, Table, Column, ColumnListItem, VBox, HBox, ScrollContainer, SegmentedButton, SegmentedButtonItem, ObjectPageSection, ObjectPageSubSection, CustomData, FeLogger, EasyFillFieldCollector) {
     "use strict";
 
     var sClassName = "lib.ai.EasyFill.EasyFillTableRenderer";
@@ -39,14 +39,8 @@ sap.ui.define([
      * 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.
+     * 4. Injects each collection as an ObjectPageSection into the shared EasyFillObjectPageLayout.
      * 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).
      */
@@ -78,10 +72,6 @@ sap.ui.define([
                 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);
             }
@@ -108,7 +98,7 @@ sap.ui.define([
             // 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
+            var oUnfilledFieldsSection  = null;  // OP mode: insert standalone section before this
             oObjectPageLayout.getSections().forEach(function(oSection) {
                 var oCtx = oSection.getBindingContext("easyFillDialogModel");
                 if (!oCtx) { return; }
@@ -127,32 +117,26 @@ sap.ui.define([
 
             // iInsertOffset keeps multiple consecutive tables in the correct order when
             // inserting standalone sections before the Unfilled Fields section (OP mode).
+            // iBaseInsertIndex is captured ONCE before any insertions so it does not shift
+            // as tables are added — each table is inserted at base + offset, not re-queried.
+            var iBaseInsertIndex = oUnfilledFieldsSection
+                ? oObjectPageLayout.indexOfSection(oUnfilledFieldsSection) : -1;
             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
-                }
+                if (oRejected[sCollectionName] !== "all") { return; }
                 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 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);
+                if (iBaseInsertIndex >= 0) {
+                    oObjectPageLayout.insertSection(oNotifSection, iBaseInsertIndex + iInsertOffset);
                     iInsertOffset++;
                 } else {
                     oObjectPageLayout.addSection(oNotifSection);
@@ -162,100 +146,56 @@ sap.ui.define([
 
             Object.keys(mCollectionUpdates).forEach(function(sCollectionName) {
                 var oCollectionMeta = mFieldMapping[sCollectionName];
-                if (!oCollectionMeta || !oCollectionMeta.itemProperties) {
-                    return;
-                }
-
+                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;
-                });
+                if (!aPropertyNames.length) { return; }
+
+                var aPreviewRows = (oTableStagingState.mStagedRows[sCollectionName] || []).filter(function(r) { return r.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);
+                    return oPreviewRow.update && that._hasUneditableCollectionChanges(oPreviewRow.update, sCollectionName, { context: oPreviewRow.realContext, rowIndex: oPreviewRow.rowIndex }, mCollectionState);
                 });
-                if (!aPreviewRows.length && !aNewRows.length) {
-                    return;
-                }
+                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 aPreviousRows = aPreviewRows.map(function(r) { return that._buildCollectionPreviewRowFromContext(aPropertyNames, r.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 oNewTable = that._createEditableNewTable(aPropertyNames, oCollectionMeta.itemProperties, aPreviewRows, aNewRows, sCollectionName, mCollectionState, fnOnTableFieldChange);
 
-                var sCollectionName_label = oCollectionMeta.description || sCollectionName;
-                var oTitleControl = new Title({ text: sCollectionName_label + " (" + iTotalCount + ")", titleStyle: "H4" });
+                var oReadonlyTag = bHasUneditableChanges ? new GenericTag({ text: oRb.getText("EASYFILL_TABLE_READONLY_TAG"), status: "Warning" }).addStyleClass("sapUiTinyMarginBegin") : null;
+                var sLabel = oCollectionMeta.description || sCollectionName;
+                var oTitleControl = new Title({ text: sLabel + " (" + iTotalCount + ")", titleStyle: "H4" });
 
-                // Toggle button between "Previous" and "New" views
                 var oSegmentedButton = new SegmentedButton({
-                    selectedKey: "new",
-                    width: "auto",
+                    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" })
+                        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) + ")");
+                        if (oReadonlyTag) { oReadonlyTag.setVisible(sKey === "new"); }
+                        oTitleControl.setText(sLabel + " (" + (sKey === "previous" ? iExistingRowCount : iTotalCount) + ")");
                     }
                 });
-                var aRightItems = oReadonlyTag ? [oReadonlyTag, oSegmentedButton] : [oSegmentedButton];
+
                 var oHeader = new HBox({
-                    justifyContent: "SpaceBetween",
-                    alignItems: "Center",
-                    wrap: "Wrap",
-                    items: [oTitleControl].concat(aRightItems)
+                    justifyContent: "SpaceBetween", alignItems: "Center", wrap: "Wrap",
+                    items: [oTitleControl].concat(oReadonlyTag ? [oReadonlyTag, oSegmentedButton] : [oSegmentedButton])
                 }).addStyleClass("sapUiSmallMarginTop sapUiSmallMarginBottom");
 
-                var oTableVBox = new VBox({
-                    items: [oHeader, oPreviousTable, oNewTable]
-                }).addStyleClass("sapSmartTemplatesObjectPageEasyFillTableSection");
+                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
+                    oTableVBox.insertItem(new MessageStrip({ text: oRb.getText("EASY_FILL_TABLE_NEW_ROW_NOT_ALLOWED"), type: "Warning", showIcon: true }), 1);
                 }
 
                 if (bIsCondensedMode && oFilledFieldsSubSection) {
@@ -269,12 +209,9 @@ sap.ui.define([
 
                     // 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;
-                        });
+                    var oExistingWrapper = aExistingBlocks.find(function(b) {
+                        return b.getCustomData && b.getCustomData().some(function(d) { return d.getKey() === sCondensedWrapperMarker; });
                     });
-
                     if (oExistingWrapper) {
                         // Append the new table VBox to the already-created wrapper
                         oExistingWrapper.addItem(oTableVBox);
@@ -283,13 +220,8 @@ sap.ui.define([
                         // 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])
-                        });
+                        aOriginalBlocks.forEach(function(b) { oFilledFieldsSubSection.removeBlock(b); });
+                        var oWrapper = new VBox({ width: "100%", items: aOriginalBlocks.concat([oTableVBox]) });
                         oWrapper.addCustomData(new CustomData({ key: sCondensedWrapperMarker, value: "true" }));
                         oFilledFieldsSubSection.addBlock(oWrapper);
                     }
@@ -298,24 +230,14 @@ sap.ui.define([
                     // 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]
-                    });
+                    var oSubSection = new ObjectPageSubSection({ title: sLabel, titleUppercase: false, showTitle: false, blocks: [oTableVBox] });
+                    var oOpSection  = new ObjectPageSection({ title: sLabel, 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);
+                    if (iBaseInsertIndex >= 0) {
+                        // Use the base index captured before any insertions — not re-queried.
+                        // This prevents the second+ table from overshooting past Unfilled Fields
+                        // because indexOfSection(oUnfilledFieldsSection) shifts as tables are added.
+                        oObjectPageLayout.insertSection(oOpSection, iBaseInsertIndex + iInsertOffset);
                         iInsertOffset++;
                     } else {
                         oObjectPageLayout.addSection(oOpSection);
@@ -374,17 +296,16 @@ sap.ui.define([
         // ─── Private Helpers ─────────────────────────────────────────────────────
 
         /**
-         * Removes all ObjectPageSections that were dynamically added by renderCollectionPreviews.
-         * Identified by the custom data marker key set during creation.
+         * Removes all ObjectPageSections and condensed-mode wrapper VBoxes that were
+         * dynamically added by renderCollectionPreviews. Identified by the custom data
+         * marker keys 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;
-                });
+                return oSection.getCustomData().some(function(oData) { return oData.getKey() === sTableSectionMarker; });
             }).forEach(function(oSection) {
                 oObjectPageLayout.removeSection(oSection);
                 oSection.destroy();
@@ -395,22 +316,14 @@ sap.ui.define([
             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;
-                        });
+                        return oBlock.getCustomData && oBlock.getCustomData().some(function(d) { return d.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;
-                            });
+                            var bIsTableVBox = oItem.getCustomData && oItem.getCustomData().some(function(d) { return d.getKey() === sTableSectionMarker; });
                             oWrapper.removeItem(oItem);
-                            if (bIsTableVBox) {
-                                oItem.destroy();
-                            } else {
-                                oSubSec.addBlock(oItem); // restore SmartForm
-                            }
+                            if (bIsTableVBox) { oItem.destroy(); } else { oSubSec.addBlock(oItem); } // restore SmartForm
                         });
                         oSubSec.removeBlock(oWrapper);
                         oWrapper.destroy();
@@ -860,63 +773,16 @@ sap.ui.define([
         },
 
         /**
-         * 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).
+         * Delegates property editability check to EasyFillFieldCollector.isEditableByContextObject —
+         * the single authoritative implementation shared across all EasyFill modules.
          *
          * @param {object} oPropertyMeta - OData property metadata
          * @param {object} oRowObject - plain row data object
+         * @param {object} oEntitySet - OData entity set metadata
          * @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;
+            return EasyFillFieldCollector.isEditableByContextObject(oPropertyMeta, oRowObject, oEntitySet);
         },
 
         /**

package/src/sap/suite/ui/generic/template/lib/ai/EasyFill/fragments/EasyFillDialog.fragment.xml

@@ -1,11 +1,7 @@
 <core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core"
 xmlns:smartForm="sap.ui.comp.smartform"
-xmlns:smartField="sap.ui.comp.smartfield"
 xmlns:uxap="sap.uxap"
 xmlns:layout="sap.ui.layout"
-xmlns:template="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1"
-template:require="{AH: 'sap/suite/ui/generic/template/js/AnnotationHelper',
-AHModel: 'sap/ui/model/odata/AnnotationHelper'}"
 xmlns:fesr="http://schemas.sap.com/sapui5/extension/sap.ui.core.FESR/1">
 
     <Dialog id="EasyFillDialog" contentWidth="72.25rem" class="sapSmartTemplatesObjectPageEasyFill" contentHeight="49.3125rem" title="{i18n>EASY_FILL_TITLE}" titleAlignment="Start" horizontalScrolling="false" verticalScrolling="false" draggable="true" resizable="true">
@@ -66,92 +62,78 @@ xmlns:fesr="http://schemas.sap.com/sapui5/extension/sap.ui.core.FESR/1">
                                         visible="{easyFillDialogModel>/isIllustrationVisible}"
                                         title="{path: 'easyFillDialogModel>/stateType', formatter: '.formatIllustrationTitle'}"
                                         description="{path: 'easyFillDialogModel>/stateType', formatter: '.formatIllustrationDescription'}"/>
-                                    <!-- <ScrollContainer height="100%"  horizontal = "true"> -->
-                                        <uxap:ObjectPageLayout visible="{easyFillDialogModel>/isFormVisible}" id="EasyFillObjectPageLayout" sections="{path: 'easyFillDialogModel>/sections', templateShareable: false}" alwaysShowContentHeader="true" upperCaseAnchorBar="false">
-                                            <uxap:headerTitle>
-                                                 <uxap:ObjectPageDynamicHeaderTitle>
-                                                    <uxap:heading>
-                                                        <Title text="{i18n>EASY_FILL_FILLED_FIELDS}" wrapping="true" level="H2"/>
-                                                    </uxap:heading>
-                                                    <uxap:actions>
-                                                        <SegmentedButton selectedKey="{easyFillDialogModel>/easyFillMode}" selectionChange=".onSelectionChange">
-                                                            <items>
-                                                                <SegmentedButtonItem icon="sap-icon://increase-line-height" key="ObjectPageMode" tooltip="{i18n>EASY_FILL_DETAILED_VIEW_TOOLTIP}"/>
-                                                                <SegmentedButtonItem icon="sap-icon://decrease-line-height" key="CondensedMode" tooltip="{i18n>EASY_FILL_CONDENSED_VIEW_TOOLTIP}"/>
-                                                            </items>
-                                                        </SegmentedButton>
-                                                        <Button
-                                                            icon="{= ${easyFillDialogModel>/isFullScreen} ?  'sap-icon://full-screen' : 'sap-icon://exit-full-screen'}"
-                                                            tooltip="{= ${easyFillDialogModel>/isFullScreen} ? ${i18n>EASY_FILL_ENTER_FULL_SCREEN_TOOLTIP} : ${i18n>EASY_FILL_EXIT_FULL_SCREEN_TOOLTIP}}"
-                                                            type="Transparent"
-                                                            visible="{= !${easyFillDialogModel>/isSplitterPageMode} }"
-                                                            press=".onToggleFullScreen"/>
-                                                    </uxap:actions>
-                                                </uxap:ObjectPageDynamicHeaderTitle>
-                                            </uxap:headerTitle>
-                                            <uxap:headerContent>
-                                                <VBox width="100%">
-                                                    <HBox gap="0.5rem" justifyContent="Start" alignItems="Center" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillReviewAreaBanner">
-                                                        <Link text="{i18n>AI_LINK_NOTICE_TITLE}" press=".onLinkPress"/>
-                                                        <ToggleButton icon = "sap-icon://thumb-up" type = "Transparent" fesr:press="fe2:ef:thumbsup" pressed="{easyFillDialogModel>/feedbackPressedUp}" enabled="{easyFillDialogModel>/feedbackEnabled}" press=".onFeedbackPress"/>
-                                                        <ToggleButton icon = "sap-icon://thumb-down" type = "Transparent" fesr:press="fe2:ef:thumbsdown" pressed="{easyFillDialogModel>/feedbackPressedDown}" enabled="{easyFillDialogModel>/feedbackEnabled}" press=".onFeedbackPress"/>
-                                                    </HBox>
-                                                    <MessageStrip
-                                                        visible="{easyFillDialogModel>/hasNonUpdatableFields}"
-                                                        text="{i18n>EASY_FILL_READ_ONLY_WARNING}"
-                                                        showIcon="true"
-                                                        type="Warning"
-                                                        class="sapUiSmallMarginBottom"/>
-                                                </VBox>
-                                            </uxap:headerContent>
-                                            <uxap:ObjectPageSection title="{path: 'easyFillDialogModel>title', formatter: '.formatSectionTitle'}" titleUppercase="false"
-                                                visible="{
-                                                    parts: [
-                                                        {path: 'easyFillDialogModel>fields'},
-                                                        {path: 'easyFillDialogModel>children'}
-                                                    ],
-                                                    formatter: '.hasSectionFields'
-                                                }">
-                                                <uxap:ObjectPageSubSection>
-                                                    <smartForm:SmartForm  editable="true" id="EasyFillSmartForm" validationMode="Async" groups="{path: 'easyFillDialogModel>children', templateShareable: false}">
+                                    <uxap:ObjectPageLayout
+                                        visible="{easyFillDialogModel>/isFormVisible}"
+                                        id="EasyFillObjectPageLayout"
+                                        sections="{path: 'easyFillDialogModel>/sections', templateShareable: false}"
+                                        alwaysShowContentHeader="true"
+                                        upperCaseAnchorBar="false">
+                                        <uxap:headerTitle>
+                                            <uxap:ObjectPageDynamicHeaderTitle>
+                                                <uxap:heading>
+                                                    <Title text="{i18n>EASY_FILL_FILLED_FIELDS}" wrapping="true" level="H2"/>
+                                                </uxap:heading>
+                                                <uxap:actions>
+                                                    <SegmentedButton selectedKey="{easyFillDialogModel>/easyFillMode}" selectionChange=".onSelectionChange">
+                                                        <items>
+                                                            <SegmentedButtonItem icon="sap-icon://increase-line-height" key="ObjectPageMode" tooltip="{i18n>EASY_FILL_DETAILED_VIEW_TOOLTIP}"/>
+                                                            <SegmentedButtonItem icon="sap-icon://decrease-line-height" key="CondensedMode" tooltip="{i18n>EASY_FILL_CONDENSED_VIEW_TOOLTIP}"/>
+                                                        </items>
+                                                    </SegmentedButton>
+                                                    <Button
+                                                        icon="{= ${easyFillDialogModel>/isFullScreen} ? 'sap-icon://full-screen' : 'sap-icon://exit-full-screen'}"
+                                                        tooltip="{= ${easyFillDialogModel>/isFullScreen} ? ${i18n>EASY_FILL_ENTER_FULL_SCREEN_TOOLTIP} : ${i18n>EASY_FILL_EXIT_FULL_SCREEN_TOOLTIP}}"
+                                                        type="Transparent"
+                                                        visible="{= !${easyFillDialogModel>/isSplitterPageMode} }"
+                                                        press=".onToggleFullScreen"/>
+                                                </uxap:actions>
+                                            </uxap:ObjectPageDynamicHeaderTitle>
+                                        </uxap:headerTitle>
+                                        <uxap:headerContent>
+                                            <VBox width="100%">
+                                                <HBox gap="0.5rem" justifyContent="Start" alignItems="Center" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillReviewAreaBanner">
+                                                    <Link text="{i18n>AI_LINK_NOTICE_TITLE}" press=".onLinkPress"/>
+                                                    <ToggleButton icon="sap-icon://thumb-up" type="Transparent" fesr:press="fe2:ef:thumbsup" pressed="{easyFillDialogModel>/feedbackPressedUp}" enabled="{easyFillDialogModel>/feedbackEnabled}" press=".onFeedbackPress"/>
+                                                    <ToggleButton icon="sap-icon://thumb-down" type="Transparent" fesr:press="fe2:ef:thumbsdown" pressed="{easyFillDialogModel>/feedbackPressedDown}" enabled="{easyFillDialogModel>/feedbackEnabled}" press=".onFeedbackPress"/>
+                                                </HBox>
+                                                <MessageStrip
+                                                    visible="{easyFillDialogModel>/hasNonUpdatableFields}"
+                                                    text="{i18n>EASY_FILL_READ_ONLY_WARNING}"
+                                                    showIcon="true"
+                                                    type="Warning"
+                                                    class="sapUiSmallMarginBottom"/>
+                                            </VBox>
+                                        </uxap:headerContent>
+                                        <uxap:ObjectPageSection
+                                            title="{path: 'easyFillDialogModel>title', formatter: '.formatSectionTitle'}"
+                                            titleUppercase="false"
+                                            visible="{easyFillDialogModel>visible}">
+                                            <uxap:ObjectPageSubSection>
+                                                <smartForm:SmartForm editable="true" validationMode="Async" groups="{path: 'easyFillDialogModel>children', templateShareable: false}">
+                                                    <smartForm:customData>
+                                                        <core:CustomData key="defaultInputFieldDisplayBehaviour" value="descriptionAndId"/>
+                                                        <core:CustomData key="defaultDropDownDisplayBehaviour" value="descriptionOnly"/>
+                                                        <core:CustomData key="defaultTextInEditModeSource" value="ValueList"/>
+                                                        <core:CustomData key="dateFormatSettings" value='\{"UTC":true,"style":"medium"\}'/>
+                                                    </smartForm:customData>
+                                                    <smartForm:layout>
+                                                        <smartForm:ColumnLayout columnsXL="3" columnsL="3" columnsM="2" labelCellsLarge="2"/>
+                                                    </smartForm:layout>
+                                                    <smartForm:Group
+                                                        title="{path: 'easyFillDialogModel>title', formatter: '.formatSectionTitle'}"
+                                                        visible="{easyFillDialogModel>visible}">
                                                         <smartForm:customData>
-                                                            <core:CustomData key="defaultInputFieldDisplayBehaviour" value="descriptionAndId"/>
-                                                            <core:CustomData key="defaultDropDownDisplayBehaviour" value="descriptionOnly"/>
-                                                            <core:CustomData key="defaultTextInEditModeSource" value="ValueList"/>
-                                                            <core:CustomData key="dateFormatSettings" value='\{"UTC":true,"style":"medium"\}'/>
+                                                            <core:CustomData key="id" value="{easyFillDialogModel>id}"/>
                                                         </smartForm:customData>
-                                                        <smartForm:layout>
-                                                            <smartForm:ColumnLayout
-                                                                columnsXL="3"
-                                                                columnsL="3"
-                                                                columnsM="2"
-                                                                labelCellsLarge="2"/>
-                                                        </smartForm:layout>
-                                                        <smartForm:Group
-                                                            title="{path: 'easyFillDialogModel>title', formatter: '.formatSectionTitle'}"
-                                                            visible="{
-                                                                parts: [
-                                                                    {path: 'easyFillDialogModel>id'},
-                                                                    {path: 'easyFillDialogModel>fields'},
-                                                                    {path: 'easyFillDialogModel>/easyFillMode'}
-                                                                ],
-                                                                formatter: '.populateSmartFields'
-                                                            }">
-                                                            <smartForm:customData>
-                                                                <core:CustomData key="id" value="{easyFillDialogModel>id}"/>
-                                                            </smartForm:customData>
-                                                        </smartForm:Group>
-                                                    </smartForm:SmartForm>
-                                                </uxap:ObjectPageSubSection>
-                                            </uxap:ObjectPageSection>
-                                        </uxap:ObjectPageLayout>
+                                                    </smartForm:Group>
+                                                </smartForm:SmartForm>
+                                            </uxap:ObjectPageSubSection>
+                                        </uxap:ObjectPageSection>
+                                    </uxap:ObjectPageLayout>
                                 </FlexBox>
                             </layout:SplitPane>
-
                         </layout:PaneContainer>
-
                     </layout:PaneContainer>
-
                 </layout:ResponsiveSplitter>
             </FlexBox>
         </content>
@@ -162,4 +144,4 @@ xmlns:fesr="http://schemas.sap.com/sapui5/extension/sap.ui.core.FESR/1">
             <Button text="{i18n>CANCEL}" press=".onCancelEasyFillDialog" fesr:press="fe2:ef:cancel"/>
         </endButton>
     </Dialog>
-</core:FragmentDefinition>
+</core:FragmentDefinition>