Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

How to solve the form displayed in two cases?

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:

replied

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

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question