How to solve the form displayed in two cases?

[Former Member]

Dear experts, i am getting the form in two cases as screen shot shown. Any experts can help me to check what is difference between these two codes.

<Page id="SFT" navButtonPress="onNavBack" showNavButton="true" title="Simple Finance">

<headerContent>

<Button icon="sap-icon://home" id="homeButton" press="onHomePressed"/>

</headerContent>

<subHeader>

<Toolbar>

<Button id="PLS" press="onPressPLS" text="Profits And Lost Statement"/>

<ToolbarSpacer/>

<Button id="PA" press="onPressPA" text="Profitability Analysis"/>

<ToolbarSpacer/>

<Button id="CBD" press="onPressCBD" text="Cost Break Down"/>

</Toolbar>

</subHeader>

<content>

<ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">

<viz:Popover id="idPopOver"></viz:Popover>

<viz:VizFrame height="3700px" id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" vizType="bar" width="100%"></viz:VizFrame>

</ScrollContainer>

<form:SimpleForm columnsL="1" columnsM="1" columnsS="1" emptySpanL="1" emptySpanM="1" labelSpanL="4" labelSpanM="5" layout="ResponsiveGridLayout"

maxContainerCols="2" minWidth="1024">

<form:content>

<Label text="Year To Date"/>

<DatePicker change="handleChange" id="DPRevenue" placeholder="Enter Date "/>

<Text text=""/>

<Label text="Revenue"/>

<Text text="{}"/>

<Label text="Year To Date"/>

<DatePicker change="handleChange" id="DPExpense" placeholder="Enter Date "/>

<Text text=""/>

<Label text="Expense"/>

<Text text="{}"/>

<Label text="Year To Date"/>

<DatePicker change="handleChange" id="DPProfit" placeholder="Enter Date"/>

<Text text=""/>

<Label text="Period to Profit Changed"/>

<Text text="{}"/>

</form:content>

</form:SimpleForm>

</content>

</Page>

and

    onHomePressed: function(){

    var oPopOver = new sap.viz.ui5.controls.Popover();

var oVizFrame = new sap.viz.ui5.controls.VizFrame({

vizType: "bar",

width: "100%",

height: "3700px"

});

    var oScrollContainer = new sap.m.ScrollContainer({

height: "100%",

width: "100%",

horizontal: false,

vertical: true,

focusable: true,

content: [oVizFrame]

});

var oDataset = new sap.viz.ui5.data.FlattenedDataset({

dimensions: [{

name: "Item Category",

value: "{Item Category}"

            }, {

name: 'City',

value: '{City}'

            }],

measures: [{

name: 'Revenue',

value: '{Revenue}'

            }],

data: {

path: "/book"

}

});

oVizFrame.setDataset(oDataset);

oVizFrame.setModel(oModel);

var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({

'uid': "valueAxis",

'type': "Measure",

'values': ["Revenue"]

}),

feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({

'uid': "categoryAxis",

'type': "Dimension",

'values': ["Item Category"]

}),

feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({

'uid': "color",

'type': "Dimension",

'values': ["City"]

});

var scales = [{

'feed': 'color',

'palette': ['#FF0000', '#CC00FF', '#6600FF']

                }];

oVizFrame.setVizProperties({

valueAxis: {

label: {

formatString: 'u'

}

},

plotArea: {

dataLabel: {

visible: true,

formatString: "#,##0"

}

},

legend: {

title: {

visible: false

}

},

title: {

visible: true,

text: 'Revenue by City and Item Category'

},

xAxis: {

scale: {

fixedRange: true,

minValue: 0,

maxValue: 1400000

}

}

});

oVizFrame.addFeed(feedValueAxis);

oVizFrame.addFeed(feedCategoryAxis);

oVizFrame.addFeed(feedColor);

oVizFrame.setVizScales(scales);

oPopOver.connect(oVizFrame.getVizUid());

   var SForm = new sap.ui.layout.form.SimpleForm({

    layout:sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,

    minWidth:1024,

            maxContainerCols:2,

            labelSpanL:4 ,

            labelSpanM:5 ,

            emptySpanL:1 ,

            emptySpanM:1 ,

            columnsL:1,

            columnsM:1,

            columnsS:1,

            content:[new sap.m.Label({

                  text: "Year To Date "

              }),

              new sap.m.DatePicker({

                placeholder : "Enter Date",

                change:"handleChange"

              }),

              new sap.m.Label({

                  text: "Revenue "

                  }),

              new sap.m.Text({

                  text: "{}"

              }),

              new sap.m.Label({

                  text: "Year To Date "

              }),

              new sap.m.DatePicker({

                placeholder : "Enter Date"

              }),

              new sap.m.Label({

                  text: "Expense "

                  }),

              new sap.m.Text({

                  text: "{}"

              }),

              new sap.m.Label({

                  text: "Year To Date"

              }),

              new sap.m.DatePicker({

                placeholder : "Enter Date"

              }),

              new sap.m.Label({

                  text: "Period to Profit Changed "

                  }),

              new sap.m.Text({

                  text: "{}"

              })

              ]

          });

oPage.removeAllContent();

oPage.addContent(oScrollContainer);

oPage.addContent(SForm);

    }

after pressed Home Button:

[Qualiture · Accepted solution]

Not sure why this is happening because it is really hard to see from your code. You could maybe check the generated DOM and see where the extra width is coming from.

But taking a step back, why are you creating the same view in both XML and JavaScript? Why not reuse the same XML in a fragment and call that from your onHomePressed event? That way you don;t have to maintain two separate instances

[Former Member · Accepted solution]

Hi robin, do you mean to create a file contains the XML code under the project and then call the file whenever i need it? If yes, how can i call the file in the onHomePressed event? Do you mind to share the sample code?

Thanks.

Regards,

Loh

[santhu_gowdaz · Accepted solution]

call like this,

sap.ui.xmlfragment("YOUR XML", this);

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui

Programmatically Instantiating XML Fragments - User Interface Add-On for SAP NetWeaver - SAP Library

[Qualiture · Accepted solution]

You first create a fragment based on the view you want to display:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core"> 
    <Page id="SFT" etc...
     //etc
    </Page>
</core:FragmentDefinition>

and give it the proper name.fragment.xml

Then define a global variable in your controller which will hold a reference your fragment for re-use:

oMyFragment : null;

reference that fragment in your code:

if (!oMyFragment) {

     oMyFragment = sap.ui.xmlfragment("name", this); //add reference to controller 'this'
}

you can then include oMyFragment wherever you want.

[Former Member · Accepted solution]

Hi Santhosh, may i know should different view refer to the same library?

[Former Member · Accepted solution]

Dear Experts, sorry for a bit long for this comment. I am the first time using the fragment and faced some problems. Hope expert can guide me. Do correct me if any part i did wrong

Thanks.

The simpleFinanceFragment was created based on view.

In controller, i declared oMyFragment as global variable and onHomePressed event as shown

console:

inside simpleForm.fragment.xml: (I wonder how to set the viz properties in the bold part since i only call the fragment at the onHomePressed event?)

<core:FragmentDefinition xmlns="sap.m"

xmlns:l="sap.ui.layout"

xmlns:form="sap.ui.layout.form"

xmlns:mvc="sap.ui.core.mvc"

xmlns:core="sap.ui.core"

xmlns:viz="sap.viz.ui5.controls">

    <Page id="SFT" navButtonPress="onNavBack" showNavButton="true" title="Simple Finance">

        <content>

     <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">

  <viz:Popover id="idPopOver"></viz:Popover>

  <viz:VizFrame height="1700px" id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" vizType="bar" width="100%"></viz:VizFrame>

  </ScrollContainer>

  <form:SimpleForm  layout="ResponsiveGridLayout" minWidth="1024" maxContainerCols="2"  labelSpanL="4" labelSpanM="5" emptySpanL="1" emptySpanM="1" columnsL="1" columnsM="1" columnsS="1"   >

  <form:content>

  <Label text="Year To Date" />

  <DatePicker id="DPRevenue" placeholder="Enter Date " change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Revenue" />

  <Text text="{}" />

  <Label text="Year To Date" />

  <DatePicker id="DPExpense" placeholder="Enter Date " change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Expense" />

  <Text text="{}" />

  <Label text="Year To Date" />

  <DatePicker id="DPProfit" placeholder="Enter Date" change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Period to Profit Changed" />

  <Text text="{}" />

  </form:content>

     </form:SimpleForm>

  </content>

    </Page>

</core:FragmentDefinition>

[santhu_gowdaz · Accepted solution]

you are creating inside the view folder., create the fragment folder inside the webcontent.

and Robin clearly mentioned,

  oMyFragment = sap.ui.xmlfragment("NameSpace.simpleForm", this);

[santhu_gowdaz · Accepted solution]

sorry I'm not getting.will you please elaborate.

[Former Member · Accepted solution]

Hi Santhosh, may i know u meant the fragment folder created inside the web content is as shown in the first screen shot?

The second screen shot showed that i put nothing in the namespace there, what should put for the namespace for this line (oMyFragment = sap.ui.xmlfragment("NameSpace.simpleForm", this);) ?

[santhu_gowdaz · Accepted solution]

NameSpace is not using? then give Absolute path for that fragment.

[Former Member · Accepted solution]

still not working.

console:

[santhu_gowdaz · Accepted solution]

oMyFragment = sap.ui.xmlfragment("Fragment.simpleForm", this);

now?

[Private_Member_15166 · Accepted solution]

Hi LOH,

Follow this blog.

[Former Member · Accepted solution]

ya. But i am not sure where is going wrong.

1)

2)  Inside simpleForm,fragment.xml:

<core:FragmentDefinition xmlns="sap.m"

xmlns:l="sap.ui.layout"

xmlns:form="sap.ui.layout.form"

xmlns:mvc="sap.ui.core.mvc"

xmlns:core="sap.ui.core"

xmlns:viz="sap.viz.ui5.controls">

    <Page id="SFT" navButtonPress="onNavBack" showNavButton="true" title="Simple Finance">

        <content>

     <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">

  <viz:Popover id="idPopOver"></viz:Popover>

  <viz:VizFrame height="1700px" id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" vizType="bar" width="100%"></viz:VizFrame>

  </ScrollContainer>

  <form:SimpleForm  layout="ResponsiveGridLayout" minWidth="1024" maxContainerCols="2"  labelSpanL="4" labelSpanM="5" emptySpanL="1" emptySpanM="1" columnsL="1" columnsM="1" columnsS="1"   >

  <form:content>

  <Label text="Year To Date" />

  <DatePicker id="DPRevenue" placeholder="Enter Date " change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Revenue" />

  <Text text="{}" />

  <Label text="Year To Date" />

  <DatePicker id="DPExpense" placeholder="Enter Date " change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Expense" />

  <Text text="{}" />

  <Label text="Year To Date" />

  <DatePicker id="DPProfit" placeholder="Enter Date" change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Period to Profit Changed" />

  <Text text="{}" />

  </form:content>

     </form:SimpleForm>

  </content>

    </Page>

</core:FragmentDefinition>

3) onHomePressed event:

onHomePressed: function(){

                oMyFragment = sap.ui.xmlfragment("Fragment.simpleForm",this); //add reference to controller 'this' 

                oMyFragment.open();

     }

4) console :

[santhu_gowdaz · Accepted solution]

Here it's shows your xml fragment is not found. Give "Absolute path for your file" and try,

sap.ui.controller("YOUR CONTROLLER", {

    oMyFragment: null,

    onInit: function() {

},

onHomePressed: function(oEvent){

               this.oMyFragment = sap.ui.xmlfragment("/Fragment.simpleForm",this); //add reference to controller 'this'

                this.oMyFragment.open();

     },

[santhu_gowdaz · Accepted solution]

In index.html, what you are wrote-

data-sap-ui-resourceroots='{"NameSpace": "./"}'

so you can access ike this,

sap.ui.xmlfragment("NameSpace.simpleForm",this);

[Former Member · Accepted solution]

onHomePressed: function(oEvent){

                this.oMyFragment = sap.ui.xmlfragment("/Fragment.simpleForm",this); //add reference to controller 'this' 

                this.oMyFragment.open();

     }

Hi Santhosh, still getting the same error. The home function is not functioning yet

[Former Member · Accepted solution]

Hi Santhosh, in index.html, it showed me this:

data-sap-ui-resourceroots='{"view": "./"}'

Is it i need to make any changes to that line? If yes, what should i write ya?

Thanks

[santhu_gowdaz · Accepted solution]

sap.ui.xmlfragment("view.simpleForm",this);

[Former Member · Accepted solution]

you meant this whole line (data-sap-ui-resourceroots='{"view": "./"}')is replaced by sap.ui.xmlfragment("view.simpleForm",this); in index.html?

[santhu_gowdaz · Accepted solution]

No, sorry for that,

In index.html you are written like this

data-sap-ui-resourceroots='{"view": "./"}'

means "view" is the naming convension. through "view" you can call any of the file directly.

so inside that method call your xml fragment file like this,

onHomePressed: function(oEvent){

                this.oMyFragment = sap.ui.xmlfragment("view.simpleForm",this); //add reference to controller 'this' 

                this.oMyFragment.open();

     }

[Former Member · Accepted solution]

so i do not need to make any changes in index.html, right? Just go my controller change it, right?

[Former Member · Accepted solution]

Hi Dhananjay, thanks for blog. Inside it written create xml view and write the code in init method but i do not have the init method.

[santhu_gowdaz · Accepted solution]

yes. do changes in your controller code.like this,

this.oMyFragment = sap.ui.xmlfragment("view.simpleForm",this);

[Former Member · Accepted solution]

okay, i have changed it yet still get the same errors.

[Private_Member_15166 · Accepted solution]

Hi LOH,

Did you find the solution?

[Private_Member_15166 · Accepted solution]

Hi LOH,

Did you find the solution?

[Former Member · Accepted solution]

Dhananjay, i still didnt have any solution for fragment yet

[Private_Member_15166 · Accepted solution]

Okay.

Here i am going to provide you a solution.

Right Click on your view folder.

Create file and provide a name like this. vizframe.fragment.xml

Here vizframe is our fragment name.

Now write your code of fragment in this file and don't forget to save it.

I have develop a simple application.

This is code of my view.

<core:View controllerName="view.View1" xmlns:core="sap.ui.core" xmlns:form="sap.ui.layout.form" xmlns:html="http://www.w3.org/1999/xhtml"

  xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns:viz="sap.viz.ui5.controls" xmlns="sap.m">

  <Page id="SFT" navButtonPress="onNavBack" showNavButton="true" title="Simple Finance">

  <headerContent>

  <Button icon="sap-icon://home" id="homeButton" press="onHomePressed"/>

  </headerContent>

  <subHeader>

  <Toolbar>

  <Button id="PLS" press="onPressPLS" text="Profits And Lost Statement"/>

  <ToolbarSpacer/>

  <Button id="PA" press="onPressPA" text="Profitability Analysis"/>

  <ToolbarSpacer/>

  <Button id="CBD" press="onPressCBD" text="Cost Break Down"/>

  </Toolbar>

  </subHeader>

  </Page>

</core:View>

This is code in index.html.

<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

  <script src="resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  data-sap-ui-libs="sap.m"

  data-sap-ui-xx-bindingSyntax="complex"

  data-sap-ui-resourceroots='{"view": "./"}'

  data-sap-ui-theme="sap_bluecrystal">

  </script>

  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <script>

  sap.ui.localResources("view");

  var app = new sap.m.App({initialPage:"idView1"});

  var page = sap.ui.view({id:"idView1", viewName:"view.View1", type:sap.ui.core.mvc.ViewType.XML});

  app.addPage(page);

  app.placeAt("content");

  </script>

  </head>

  <body class="sapUiBody" role="application">

  <div id="content"></div>

  </body>

</html>

index.html is auto generated. Don't change it.

This is code in my fragment.

<core:FragmentDefinition xmlns="sap.m"

xmlns:l="sap.ui.layout"

xmlns:form="sap.ui.layout.form"

xmlns:core="sap.ui.core">

  <form:SimpleForm  layout="ResponsiveGridLayout" minWidth="1024" maxContainerCols="2"  labelSpanL="4" labelSpanM="5" emptySpanL="1" emptySpanM="1" columnsL="1" columnsM="1" columnsS="1"   >

  <form:content>

  <Label text="Year To Date" />

  <DatePicker id="DPRevenue" placeholder="Enter Date " change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Revenue" />

  <Text text="{}" />

  <Label text="Year To Date" />

  <DatePicker id="DPExpense" placeholder="Enter Date " change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Expense" />

  <Text text="{}" />

  <Label text="Year To Date" />

  <DatePicker id="DPProfit" placeholder="Enter Date" change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Period to Profit Changed" />

  <Text text="{}" />

  </form:content>

     </form:SimpleForm>

</core:FragmentDefinition>

Till now we have developed our fragment.

Now we have to include this file in our project but you are getting error.

On searching after SCN, i found that Component.js is of great use in SAPWEB IDE.

Now right click on your project name. New File and provide the name Component.js

Keep this in mind that C is in uppercase.

Now i have written this code in my Component.js file.

jQuery.sap.declare("view.Component");

sap.ui.core.UIComponent.extend("view.Component", {

  metadata : {

  rootView : "view.View1",

  dependencies : {

  libs : [

  "sap.m",

  "sap.ui.layout",

  "sap.viz"

  ]

  },

  config : {

  sample : {

  files : [

  "View1.view.xml",

  "View1.controller.js",

  "vizframe.fragment.xml"

  ]

  }

  }

  }

});

Then this simple code in my controller to check if this is working.

var oPage;  // Global Variable

sap.ui.controller("view.View1", {

    onInit: function() {

    oPage = this.getView().byId("SFT");   

    var frg = sap.ui.xmlfragment("view.vizframe", this);

    oPage.addContent(frg);

        }

});

and it worked.

This is the output.

You can check that i have not written SimpleForm code in xml view. It is being displayed from fragment.

Regards

Dhananjay

[Former Member · Accepted solution]

Hi Dhananjay, I sincerely thanks and appreciate for your help. I really like the way u guided me. I have some questions regarding to your solution:

1) The 1st line u wrote jQuery.sap.declare("view.Component"); in Component.js, may i know the "view" in the view.Component is your namespace? If i created the project without namespace, what should i put ya? Is ok i put jQuery.sap.declare("SimpleFinanceFragment.Component");in Component.js?

2)Can i put the below code in my onHomePressed event?

      var frg = sap.ui.xmlfragment("view.vizframe", this);

    oPage.addContent(frg);

[santhu_gowdaz · Accepted solution]

1. exactly "view" is the namespace. declared as globally in component.js.

If you not declared namespace then for each view or any file you need to call means, you should give absolute path for that file.

means you need to give full path to access that file.

2. yes you can put, when you press on that button, In that time it will be displayed.

[santhu_gowdaz · Accepted solution]

Hay LOH,

I find a good link for you regards xml fragment, Refer this you will get clear picture,

Step 10: Detail XML Fragments - UI Development Toolkit for HTML5 (SAPUI5) - SAP Library

[Private_Member_15166 · Accepted solution]

In this project i don't have used namespace. This is view folder.

when you use namespace then you may use namespace too.

2. Yes. You can use it.

[Former Member · Accepted solution]

Hi Santhosh, really a good link. Thanks for it

[Former Member · Accepted solution]

Hi Dhananjay, i am curious why my home button is still not functioning after followed your guidance .

simpleForm.fragment.xml :

<core:FragmentDefinition xmlns="sap.m"

xmlns:l="sap.ui.layout"

xmlns:form="sap.ui.layout.form"

xmlns:mvc="sap.ui.core.mvc"

xmlns:core="sap.ui.core"

xmlns:viz="sap.viz.ui5.controls">

  <form:SimpleForm  layout="ResponsiveGridLayout" minWidth="1024" maxContainerCols="2"  labelSpanL="4" labelSpanM="5" emptySpanL="1" emptySpanM="1" columnsL="1" columnsM="1" columnsS="1"   >

  <form:content>

  <Label text="Year To Date" />

  <DatePicker id="DPRevenue" placeholder="Enter Date " change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Revenue" />

  <Text text="{}" />

  <Label text="Year To Date" />

  <DatePicker id="DPExpense" placeholder="Enter Date " change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Expense" />

  <Text text="{}" />

  <Label text="Year To Date" />

  <DatePicker id="DPProfit" placeholder="Enter Date" change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Period to Profit Changed" />

  <Text text="{}" />

  </form:content>

     </form:SimpleForm>

</core:FragmentDefinition>

Component.js :

jQuery.sap.declare("view.Component");

sap.ui.core.UIComponent.extend("view.Component", {

  metadata: {

  rootView: "view.SimpleFinance",

  dependencies: {

  libs: [

  "sap.m",

  "sap.ui.layout",

  "sap.viz"

  ]

  },

  config: {

  sample: {

  files: [

  "SimpleFinance.view.xml",

  "SimpleFinance.controller.js",

  "simpleForm.fragment.xml"

  ]

  }

  }

  }

});

controller part:

onHomePressed: function(){

               var frg = sap.ui.xmlfragment("view.SimpleFinance", this);

                oPage.addContent(frg);

     }

-index.html maintained as usual (no change)

[Private_Member_15166 · Accepted solution]

               var frg = sap.ui.xmlfragment("view.SimpleFinance", this);     // Change it to your fragment name perhaps it is simpleForm

                oPage.addContent(frg);

               var frg = sap.ui.xmlfragment("view.simpleForm", this);

                oPage.addContent(frg);

[Former Member · Accepted solution]

Hi Dhananjay, still not functioning.

console :

[Private_Member_15166 · Accepted solution]

You have used SimpleFinance.fragment.xml somewhere else also. Is it in onInit method??

App is trying to locate that file which is not found.

[Former Member · Accepted solution]

simpleFinance.fragment.xml was created under the web content as other experts guided me in previous conversation. I have deleted it after followed your method.

[Former Member · Accepted solution]

i didnt put in onInit method, i just put in onHomePressed event there

[Former Member · Accepted solution]

Dhananjay, latest console :

[santhu_gowdaz · Accepted solution]

Check that your ID is duplicate. may you used twice the same id in your view or else in your fragment.

[Former Member · Accepted solution]

ya, i have changed it but still it shown me the id duplicate. The ID are bold as shown.

In my view.xml:

<content>

     <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">

  <viz:Popover id="idPopOver"></viz:Popover>

  <viz:VizFrame height="1700px" id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" vizType="bar" width="100%"></viz:VizFrame>

  </ScrollContainer>

  <form:SimpleForm  layout="ResponsiveGridLayout" minWidth="1024" maxContainerCols="2"  labelSpanL="4" labelSpanM="5" emptySpanL="1" emptySpanM="1" columnsL="1" columnsM="1" columnsS="1"   >

  <form:content>

  <Label text="Year To Date" />

  <DatePicker id="DPRevenue" placeholder="Enter Date " change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Revenue" />

  <Text text="{}" />

  <Label text="Year To Date" />

  <DatePicker id="DPExpense" placeholder="Enter Date " change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Expense" />

  <Text text="{}" />

  <Label text="Year To Date" />

  <DatePicker id="DPProfit" placeholder="Enter Date" change="handleChange" class="sapUiSmallMarginBottom"/>

  <Text text="" />

  <Label text="Period to Profit Changed" />

  <Text text="{}" />

  </form:content>

     </form:SimpleForm>

  </content>

in simpleForm.fragment.xml :

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns:form="sap.ui.layout.form" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc"

  xmlns:viz="sap.viz.ui5.controls" xmlns="sap.m">

  <form:SimpleForm columnsL="1" columnsM="1" columnsS="1" emptySpanL="1" emptySpanM="1" labelSpanL="4" labelSpanM="5" layout="ResponsiveGridLayout"

  maxContainerCols="2" minWidth="1024">

  <form:content>

  <Label text="Year To Date"/>

  <DatePicker change="handleChange" class="sapUiSmallMarginBottom" id="DPRevenue1" placeholder="Enter Date "/>

  <Text text=""/>

  <Label text="Revenue"/>

  <Text text="{}"/>

  <Label text="Year To Date"/>

  <DatePicker change="handleChange" class="sapUiSmallMarginBottom" id="DPExpense1" placeholder="Enter Date "/>

  <Text text=""/>

  <Label text="Expense"/>

  <Text text="{}"/>

  <Label text="Year To Date"/>

  <DatePicker change="handleChange" class="sapUiSmallMarginBottom" id="DPProfit1" placeholder="Enter Date"/>

  <Text text=""/>

  <Label text="Period to Profit Changed"/>

  <Text text="{}"/>

  </form:content>

  </form:SimpleForm>

</core:FragmentDefinition>

[santhu_gowdaz · Accepted solution]

for createid use this.createId("DPExpense1") like this,

see this thread how to resolve this error,

[Private_Member_15166 · Accepted solution]

remove id from your fragment.xml and view.xml and check it once.

All id's of date.

  <DatePicker change="handleChange" class="sapUiSmallMarginBottom" id="DPRevenue1"placeholder="Enter Date "/>

  <Text text=""/>

  <Label text="Revenue"/>

  <Text text="{}"/>

  <Label text="Year To Date"/>

  <DatePicker change="handleChange" class="sapUiSmallMarginBottom" id="DPExpense1"placeholder="Enter Date "/>

  <Text text=""/>

  <Label text="Expense"/>

  <Text text="{}"/>

  <Label text="Year To Date"/>

  <DatePicker change="handleChange" class="sapUiSmallMarginBottom" id="DPProfit1" placeholder="Enter Date"/>

All in bold.

[Former Member · Accepted solution]

yeah, it worked. Thanks so much Dhananjay and other experts too

[Private_Member_15166 · Accepted solution]

When i solve your issues then i really feel like i am doing something. wc

[Former Member · Accepted solution]

Hope you also learned something from the problems that i encountered

[Private_Member_15166 · Accepted solution]

Of Course.

[santhu_gowdaz]

But viewing both looks same. very difficult to ans this type of questions yar,.

in 1st view Revenue and expense is binding with some value so in the screen it's showing [object]

In 2nd view you are not binded any thing. so its showing nothing in the Revenue and expense.

sap.m lib is responsive, so based on the data shown in the view. It will change the screen.

so in 1st screen its coming [object] and not in 2nd screen. that's the reason your views are different.

[Former Member]

Hi Santhosh, the difference is the box for the year to date is more longer after pressed the home button. The properties of the date picker already is the same with the date picker in the controller  yet the output displayed is slight different

[santhu_gowdaz]

Ya LOH CHUN WOOI,

Data Picker size is reduced because of the Revenue and Expense object is holding some values as displayed [object]. so automatically screen will be responsive in 1st view, already mentioned in previous comment.

[Private_Member_15166]

Hi Santosh,

I don't think this is the case. I tried this to resolve it by putting text here but the answer is same. I don't think why this is happening. Is there any difference in responsiveness of JS view and XML view?

Because due to this only this is displaying this two difference.

Perhaps a ticket must be raised to SAP for this concern after waiting for some expert suggestions.

What do you say?

[santhu_gowdaz]

i don't think so. bec in both .js and .xml views using sap.m right?

[Private_Member_15166]

Yes using sap.m but this issue is totally dependent on XML and JS view.

[santhu_gowdaz]

From different view(xml,js,json) response is different.If you using the same lib "sap.m". looks like crazy

[Private_Member_15166]

Yes same here.

[Former Member]

Hi, may i know should different view refer to the same library?

[Private_Member_15166]

Yes Loh,

Both views here refer to same library.

May you create javascript view in place of XML view?

This problem will be solved.

[Former Member]

ok sure, Dhananjay, i will try it. Is it the default width in the XML view and JS view are different? Second question is if i put the code of onHomePressed event inside the fragment and called it in onHomePressed at controller, is it fine i am using this method? i have pasted the code and screen shot as shown in the previous conversation.