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

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

@@ -0,0 +1,282 @@
+sap.ui.define([
+],function(){
+    "use strict";
+    /**
+	 * This class extracts the what sections are present according to the property from the manifest and EntityType and show it in objectpage
+     * Currently it only supports the default annotations from the ObjectPage, In future we should make sure to add Custom Sections and Reusable Components to integrate in it
+	 * @namespace suite.ui.generic.template.lib.ai.EasyFill.ObjectPageSectionHandler.js
+	 * @private
+	 */
+    return {
+        getSectionsForObjectPageView: function (oEntityType,oLLMResult,oRb) {
+            let aSections = [];
+            //Extract the Header Information,Section and SubObject table information
+            aSections = aSections.concat(this.getSectionsForHeader(oEntityType,oRb))
+            .concat(this.getSectionsForObjectPageFacets(oEntityType));
+            const aTree =  this.transformToTree(aSections,oEntityType);
+            // return aTree;
+            return this.filterTreeByLLMResult(aTree,oLLMResult);
+        },
+
+        getSectionsForCondensedView: function (oLLMResult) {
+            return this.transformToTreeExpanded(oLLMResult);
+        },
+
+        getSectionsForObjectPageFacets: function (oEntityType) {
+            const aSectionFacets = oEntityType["com.sap.vocabularies.UI.v1.Facets"];
+            if (aSectionFacets && aSectionFacets.length > 0) {
+                return this.extractFacetInfoRecursively(oEntityType,aSectionFacets,[]);
+            }
+            return [];
+        },
+
+        //We have to write a recursive code, as there might be nested CollectionFacets
+        extractFacetInfoRecursively: function(oEntityType,aFacets,aTitle) {
+            let aRes = [];
+            aFacets.forEach((oFacet) => {
+                if (oFacet.RecordType === "com.sap.vocabularies.UI.v1.CollectionFacet") {
+                    const aInnerFacets = oFacet.Facets;
+                    if (aInnerFacets && aInnerFacets.length > 0) {
+                        aRes = aRes.concat(this.extractFacetInfoRecursively(oEntityType,aInnerFacets,aTitle.concat(oFacet.Label.String ? oFacet.Label.String : [])));
+                    }
+                } else {
+                    aRes = aRes.concat(this.extractSectionInfoFromReferenceFacet(oEntityType,[oFacet],aTitle));
+                }
+            });
+            return aRes;
+        },
+
+        //For HeaderFacets we only have one section and the rest of the fields will be part of it, currently we are not supporting multiple subsections in the header
+        getSectionsForHeader: function (oEntityType,oRb) {
+            let aRes = [];
+            //Fetch the HeaderInfo and HeaderFacets, if not present return empty array, as we will not be able to find any section without it
+            const oHeaderInfo = oEntityType["com.sap.vocabularies.UI.v1.HeaderInfo"];
+            const aHeaderFacets = oEntityType["com.sap.vocabularies.UI.v1.HeaderFacets"];
+
+            if (oHeaderInfo && Object.keys(oHeaderInfo).length > 0) {
+                const aKeys = Object.keys(oHeaderInfo).filter(sKey => oHeaderInfo[sKey].RecordType === "com.sap.vocabularies.UI.v1.DataField");
+                aKeys?.forEach((sKey) => {
+                    aRes.push({title:[oRb.getText("EASY_FILL_SECTION_HEADER"),oRb.getText("EASY_FILL_SECTION_HEADER")],property: oHeaderInfo[sKey].Value.Path});
+                });
+            }
+
+            if (aHeaderFacets && aHeaderFacets.length > 0) {
+                const aSection = this.extractSectionInfoFromReferenceFacet(oEntityType,aHeaderFacets);
+                aSection.forEach((oSection) => {
+                    oSection.title = [oRb.getText("EASY_FILL_SECTION_HEADER"),oRb.getText("EASY_FILL_SECTION_HEADER")];
+                });
+                aRes.push(...aSection);
+            }
+
+            return aRes;
+        },
+
+        //Use it once you get the reference facets, if the sText is already known then we will give that as priority
+        extractSectionInfoFromReferenceFacet: function(oEntityType,aFacets,aText = []) {
+            // eslint-disable-next-line no-warning-comments
+            //TODO: Handle the LineItem Code here only and SemanticObjects for intentbased Navigation
+            const aRes = [];
+            aFacets.forEach((oFacet) => {
+                //We are skipping the IntentBased Navigation for now, as we will be handling it in a different way, as we need to check the SemanticObject and Action for it,
+               //so we will be doing it in a different method
+                if (oFacet.RecordType === "com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation") {
+                    return;
+                }
+
+                const aTempText = [...aText];
+               const sAnnotationPath = oFacet.Target.AnnotationPath.substring(1);
+               const oAnnotation = oEntityType[sAnnotationPath];
+               let sTitle = null;
+
+               if (oFacet?.Label) {
+                   sTitle = oFacet.Label.String;
+               } else if (oAnnotation?.Label) {
+                   sTitle = oAnnotation.Label.String;
+               } else if (oFacet?.Title) {
+                   sTitle = oFacet.Title.String;
+               } else if (oAnnotation?.Title) {
+                   sTitle = oAnnotation.Title.String;
+               }
+
+
+                // if (oFacet.Label) {
+                //     sTitle = oFacet.Label.String;
+                // }  else if (oFacet.Title) {
+                //     sTitle = oFacet.Title.String;
+                // }
+
+               if (sTitle) {
+                aTempText.push(sTitle);
+               }
+
+                if (oAnnotation) {
+                     if (oAnnotation.Data) {
+                        oAnnotation.Data.forEach((oData) => {
+                            if (!this.isSupportedRecordType(oData.RecordType)) {
+                                return;
+                            }
+                            aRes.push({title:aTempText,property:oData.Value.Path});
+                        });
+                     } else if (Array.isArray(oAnnotation)) {
+                        const aArray = oAnnotation;
+                        aArray.forEach((oAnno) => {
+                            if (!this.isSupportedRecordType(oAnno.RecordType)) {
+                                return;
+                            }
+                            aRes.push({title:aTempText,property:oAnno.Value.Path});
+                        });
+                     } else if (oAnnotation.Value && oAnnotation.Value.Path) {
+                        aRes.push({title:aTempText,property:oAnnotation.Value.Path});
+                     }
+                }
+            });
+            return aRes;
+        },
+
+        //We have to support most of the below annotations in our future waves
+        isSupportedRecordType: function(sRecordType) {
+            if (sRecordType === "com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation" || sRecordType === "com.sap.vocabularies.UI.v1.DataFieldForAnnotation"
+                || sRecordType === "com.sap.vocabularies.UI.v1.DataFieldForAction"
+            ) {
+                return false;
+            }
+            return true;
+        },
+
+        transformToTreeExpanded: function(oLLMRes) {
+            return [
+                {
+                    title: "",
+                    fields: [],
+                    children: [{
+                        title: "",
+                        fields: Object.keys(oLLMRes),
+                        id: this.generateId("", Object.keys(oLLMRes))
+                    }]
+                }
+            ];
+        },
+
+
+        transformToTree: function (data, oEntityType) {
+            const rootMap = {};
+            const seen = new Set();
+            const that = this;
+
+            data.forEach(({ title, property }) => {
+                if (seen.has(property)) {
+                    return;
+                }
+                seen.add(property);
+
+                let currentMap = rootMap;
+                let sTitlePath = "";
+
+                title.forEach((level, index) => {
+                    const isLast = index === title.length - 1;
+
+                    // Build cumulative title path: "Header_Header", "GeneralInformation_SalesOrdertotalamount"
+                    sTitlePath = sTitlePath ? `${sTitlePath}_${level}` : level;
+
+                    if (!currentMap[level]) {
+                        currentMap[level] = {
+                            title: level,
+                            titlePath: sTitlePath,  // ✅ Store full path for ID generation later
+                            fields: [],
+                            _childrenMap: {}
+                        };
+                    }
+
+                    if (isLast) {
+                        currentMap[level].fields.push(property);
+                    } else {
+                        currentMap = currentMap[level]._childrenMap;
+                    }
+                });
+            });
+
+            // ID is generated here - after all fields are collected
+            function convertToArray(oMap) {
+                return Object.values(oMap).map((oNode) => ({
+                    title: oNode.title,
+                    id: that.generateId(oNode.titlePath, oNode.fields),  // ✅ title path + fields combined
+                    fields: oNode.fields,
+                    children: oNode._childrenMap ? convertToArray(oNode._childrenMap) : []
+                }));
+            }
+
+            return convertToArray(rootMap);
+        },
+
+         generateId: function(sTitlePath, aFields) {
+            const sSanitizedTitle = sTitlePath
+                .replace(/\s+/g, "_")
+                .replace(/[^a-zA-Z0-9_]/g, "")
+                .toLowerCase();
+
+            // Join fields to make it unique per section content
+            const sFieldsPart = aFields
+                .join("_")
+                .replace(/[^a-zA-Z0-9_]/g, "")
+                .toLowerCase();
+
+            return "EasyFillSmartForm_" + sSanitizedTitle + (sFieldsPart ? "_" + sFieldsPart : "");
+        },
+
+        filterTreeByLLMResult: function(aTree, oLLMResult) {
+            const aRequestedKeys = Object.keys(oLLMResult);
+            const aMatchedKeys = new Set();
+
+            function generateId(sTitlePath, aFields) {
+                const sSanitizedTitle = sTitlePath
+                    .replace(/\s+/g, "_")
+                    .replace(/[^a-zA-Z0-9_]/g, "")
+                    .toLowerCase();
+                const sFieldsPart = aFields
+                    .join("_")
+                    .replace(/[^a-zA-Z0-9_]/g, "")
+                    .toLowerCase();
+                return "EasyFillSmartForm_" + sSanitizedTitle + (sFieldsPart ? "_" + sFieldsPart : "");
+            }
+
+            function filterNode(oNode, sParentPath) {
+                const sTitlePath = sParentPath ? `${sParentPath}_${oNode.title}` : oNode.title;
+
+                const aFilteredFields = oNode.fields.filter((sField) => {
+                    if (aRequestedKeys.includes(sField)) {
+                        aMatchedKeys.add(sField);
+                        return true;
+                    }
+                    return false;
+                });
+
+                const aFilteredChildren = oNode.children
+                    .map((oChild) => filterNode(oChild, sTitlePath))
+                    .filter((oChild) => oChild.fields.length > 0 || oChild.children.length > 0);
+
+                return {
+                    title: oNode.title,
+                    id: generateId(sTitlePath, aFilteredFields),  // ✅ Regenerate ID with filtered fields
+                    fields: aFilteredFields,
+                    children: aFilteredChildren
+                };
+            }
+
+            const aFilteredTree = aTree
+                .map((oNode) => filterNode(oNode, ""))
+                .filter((oNode) => oNode.fields.length > 0 || oNode.children.length > 0);
+
+            const aUnmatchedKeys = aRequestedKeys.filter((sKey) => !aMatchedKeys.has(sKey));
+            if (aUnmatchedKeys.length > 0) {
+                aFilteredTree.push({
+                    title: "unableToFill",
+                    id: generateId("unableToFill", aUnmatchedKeys),
+                    fields: aUnmatchedKeys,
+                    children: []
+                });
+            }
+
+            return aFilteredTree;
+        }
+    };
+});

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

@@ -1,85 +1,151 @@
 <core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core"
-xmlns:sfo="sap.ui.comp.smartform"
-xmlns:sfi="sap.ui.comp.smartfield"
-xmlns:fesr="http://schemas.sap.com/sapui5/extension/sap.ui.core.FESR/1"
+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" class = "sapSmartTemplatesObjectPageEasyFill" contentHeight="49.3125rem" title="{i18n>EASY_FILL_TITLE}"
-        titleAlignment="Start" horizontalScrolling="false" verticalScrolling="false" draggable="true" resizable="true">
+    <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">
         <content>
             <FlexBox id="EasyFillMainFlex" direction="Row" renderType="Bare" width="100%" height="100%">
-                <FlexBox
-                direction="Column" renderType="Bare" width="40%" class = "sapSmartTemplatesObjectPageEasyFillInputArea"
-                >
-                    <FlexBox id="EasyFillInputArea" direction="Column" renderType="Bare" width="100%" gap="36px">
-                        <VBox gap="22px" class="sapSmartTemplatesObjectPageEasyFillInputAreaLabel">
-                            <Label text="{i18n>EASY_FILL_FIRST_LABEL_TEXT}" wrapping="true"/>
-                            <Label text="{i18n>EASY_FILL_SECOND_LABEL_TEXT}" wrapping="true"/>
-                        </VBox>
-                        <TextArea
-                            id="EasyFillInputTextArea"
-                            growing = "true"
-                            growingMaxLines = "30"
-                            maxLength = "2000"
-                            liveChange=".onLiveChange"
-                            placeholder = "{i18n>EASY_FILL_TEXTAREA_PLACEHOLDER}"
-                            rows = "20"
-                            width="100%"
-                            height="17.5rem"
-                            showExceededText = "true"
-                            ariaLabelledBy="EasyFillInputArea">
-                        </TextArea>
-                    </FlexBox>
-                    <FlexBox direction="Row" justifyContent="End" gap="1rem">
-                    <Button
-                            id="EasyFillSubmitButton"
-                            text="Easy Fill"
-                            type="Default"
-                            icon="sap-icon://ai"
-                            fesr:press="fe2:ef:analyzeText"
-                            enabled="{easyFillDialogModel>/isEasyFillButtonEnabled}"
-                            press=".onEasyFillSubmitInputToAI">
-                        </Button>
-                        <Button
-                            id="EasyFillClearAll"
-                            type = "Transparent"
-                            press=".onEasyFillClearAll"
-                            fesr:press="fe2:ef:clearAll"
-                            text="{i18n>EASYFILL_CLEAR_ALL}">
-                        </Button>
-                    </FlexBox>
-                </FlexBox>
-                <FlexBox  id="EasyFillReviewArea" busy="{easyFillDialogModel>/isBusy}" class = "sapSmartTemplatesObjectPageEasyFillReviewArea" renderType="Bare" width="72%" direction="Column">
-                    <IllustratedMessage
-                        illustrationSize = "Large"
-                        illustrationType="{path: 'easyFillDialogModel>/stateType', formatter: '.formatIllustrationType'}"
-                        visible="{easyFillDialogModel>/isIllustrationVisible}"
-                        title = "{path: 'easyFillDialogModel>/stateType', formatter: '.formatIllustrationTitle'}"
-                        description = "{path: 'easyFillDialogModel>/stateType', formatter: '.formatIllustrationDescription'}"/>
-                    <ScrollContainer vertical = "true" visible="{= ${easyFillDialogModel>/isUpdatableVisible} || ${easyFillDialogModel>/isNonUpdatableVisible} }">
-                        <HBox gap="0.5rem" justifyContent = "End" alignItems = "Center" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillReviewAreaBanner">
-                            <Link text="{i18n>AI_LINK_NOTICE_TITLE}" press=".onLinkPress"/>
-                            <Label text="{i18n>AI_WARNING_TEXT}"/>
-                            <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>
-                        <VBox class="sapSmartTemplatesObjectPageEasyFillReviewAreaSmartFormWrapper" renderType = "Bare" visible="{easyFillDialogModel>/isUpdatableVisible}">
-                            <core:Fragment fragmentName="sap.suite.ui.generic.template.lib.ai.EasyFill.fragments.EasyFillUpdatebleSmartForm" type="XML"/>
-                        </VBox>
+                <layout:ResponsiveSplitter defaultPane="default">
+                    <layout:PaneContainer>
+                        <layout:SplitPane requiredParentWidth="400" id="inputAreaSplitPane">
+                            <layout:layoutData>
+                                <layout:SplitterLayoutData size="40%"/>
+                            </layout:layoutData>
+                            <FlexBox direction="Column" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillInputArea">
+                                <FlexBox id="EasyFillInputArea" direction="Column" renderType="Bare" width="100%" gap="36px">
+                                    <VBox gap="22px" class="sapSmartTemplatesObjectPageEasyFillInputAreaLabel">
+                                        <Label text="{i18n>EASY_FILL_FIRST_LABEL_TEXT}" wrapping="true"/>
+                                        <Label text="{i18n>EASY_FILL_SECOND_LABEL_TEXT}" wrapping="true"/>
+                                    </VBox>
+                                    <TextArea
+                                        id="EasyFillInputTextArea"
+                                        growing="true"
+                                        growingMaxLines="30"
+                                        maxLength="2000"
+                                        liveChange=".onLiveChange"
+                                        placeholder="{i18n>EASY_FILL_TEXTAREA_PLACEHOLDER}"
+                                        rows="20"
+                                        width="100%"
+                                        height="17.5rem"
+                                        showExceededText="true"
+                                        ariaLabelledBy="EasyFillInputArea"/>
+                                </FlexBox>
+                                <FlexBox direction="Row" justifyContent="End" gap="1rem">
+                                    <Button
+                                        id="EasyFillSubmitButton"
+                                        text="Easy Fill"
+                                        type="Default"
+                                        icon="sap-icon://ai"
+                                        fesr:press="fe2:ef:analyzeText"
+                                        enabled="{easyFillDialogModel>/isEasyFillButtonEnabled}"
+                                        press=".onEasyFillSubmitInputToAI"/>
+                                    <Button
+                                        id="EasyFillClearAll"
+                                        type="Transparent"
+                                        press=".onEasyFillClearAll"
+                                        fesr:press="fe2:ef:clearAll"
+                                        text="{i18n>EASYFILL_CLEAR_ALL}"/>
+                                </FlexBox>
+                            </FlexBox>
+                        </layout:SplitPane>
+                        <layout:PaneContainer>
+                            <layout:SplitPane requiredParentWidth="600" id="reviewAreaSplitPane">
+                                <layout:layoutData>
+                                    <layout:SplitterLayoutData size="60%"/>
+                                </layout:layoutData>
+                                <FlexBox id="EasyFillReviewArea" busy="{easyFillDialogModel>/isBusy}" class="sapSmartTemplatesObjectPageEasyFillReviewArea" renderType="Bare" direction="Column">
+                                    <IllustratedMessage
+                                        illustrationSize="Large"
+                                        illustrationType="{path: 'easyFillDialogModel>/stateType', formatter: '.formatIllustrationType'}"
+                                        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}">
+                                            <uxap:headerTitle>
+                                                <uxap:ObjectPageHeader objectTitle="{i18n>EASY_FILL_FILLED_FIELDS}">
+                                                    <uxap:actions>
+                                                        <SegmentedButton selectedKey="{easyFillDialogModel>/easyFillMode}" selectionChange=".onSelectionChange" class="sapUiSmallMarginBottom">
+                                                            <items>
+                                                                <SegmentedButtonItem icon="sap-icon://increase-line-height" key="CondensedMode"/>
+                                                                <SegmentedButtonItem icon="sap-icon://decrease-line-height" key="ObjectPageMode"/>
+                                                            </items>
+                                                        </SegmentedButton>
 
-                        <VBox renderType = "Bare" visible="{easyFillDialogModel>/isNonUpdatableVisible}">
-                            <core:Fragment fragmentName="sap.suite.ui.generic.template.lib.ai.EasyFill.fragments.EasyFillNonUpdatableSmartForm" type="XML"/>
-                        </VBox>
-                    </ScrollContainer>
-                </FlexBox>
+                                                        <Button
+                                                            icon="{= ${easyFillDialogModel>/isFullScreen} ?  'sap-icon://full-screen' : 'sap-icon://exit-full-screen'}"
+                                                            type="Transparent"
+                                                            press=".onToggleFullScreen"/>
+                                                    </uxap:actions>
+                                                </uxap:ObjectPageHeader>
+                                            </uxap:headerTitle>
+                                            <uxap:headerContent>
+                                                <HBox gap="0.5rem" justifyContent="End" alignItems="Center" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillReviewAreaBanner">
+                                                    <Link text="{i18n>AI_LINK_NOTICE_TITLE}" press=".onLinkPress"/>
+                                                    <Label text="{i18n>AI_WARNING_TEXT}"/>
+                                                </HBox>
+                                            </uxap:headerContent>
+                                            <uxap:ObjectPageSection title="{path: 'easyFillDialogModel>title', formatter: '.formatSectionTitle'}">
+                                                <uxap:ObjectPageSubSection>
+                                                    <smartForm:SmartForm  editable="true" id="EasyFillSmartForm" groups="{path: 'easyFillDialogModel>children', templateShareable: false}">
+                                                        <smartForm:layout>
+                                                            <smartForm:ColumnLayout
+                                                                columnsXL="3"
+                                                                columnsL="3"
+                                                                columnsM="2"
+                                                                labelCellsLarge="12"/>
+                                                        </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>
+                                        <VBox id="EasyFillTablePreviewContainer" fitContainer="true" renderType="Bare" visible="{easyFillDialogModel>/hasTableUpdates}"/>
+                                        <MessageStrip
+                                            visible="{easyFillDialogModel>/hasTableUpdates}"
+                                            text="{i18n>EASY_FILL_TABLE_UPDATES_INFO}"
+                                            showIcon="true"
+                                            type="Information"/>
+
+                                        <MessageStrip
+                                            visible="{easyFillDialogModel>/hasTableValidationErrors}"
+                                            text="{easyFillDialogModel>/tableValidationMessage}"
+                                            showIcon="true"
+                                            type="Error"/>
+                                </FlexBox>
+                            </layout:SplitPane>
+
+                        </layout:PaneContainer>
+
+                    </layout:PaneContainer>
+
+                </layout:ResponsiveSplitter>
             </FlexBox>
         </content>
         <beginButton>
-            <Button text="{i18n>EASY_FILL_CONFIRM}"  fesr:press="fe2:ef:confirm" enabled="{easyFillDialogModel>/isSaveEnabled}" press=".onSaveFromEasyFillDialog" type="Emphasized"/>
+            <Button text="{i18n>EASY_FILL_CONFIRM}" fesr:press="fe2:ef:confirm" enabled="{easyFillDialogModel>/isSaveEnabled}" press=".onSaveFromEasyFillDialog" type="Emphasized"/>
         </beginButton>
         <endButton>
-            <Button text="{i18n>CANCEL}"  press=".onCancelEasyFillDialog" fesr:press="fe2:ef:cancel"/>
+            <Button text="{i18n>CANCEL}" press=".onCancelEasyFillDialog" fesr:press="fe2:ef:cancel"/>
         </endButton>
-   </Dialog>
+    </Dialog>
 </core:FragmentDefinition>