Skip to Content

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

Approve Purchase Order using js view

HI,

I am new to sapui5. I have developed sample application in mobile using Split app control. In that I used js view.

Recently I downloaded latest version of SAPUI5 1.16.3. In that I got the source code of the Purchase order Approval . But the files are in xml view.

But I am not familiar with xml view.

In that the List in Master page and UI in detail page is very good.

In my application , when I am displaying List using  js view I can place only 2 values in list and my Detail page is like below.

In Purchase Order Approval the UI is like below.

https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/m/demokit/poa/index.html?sap-ui-xx-fakeOS=ipad

This is all in XML view.

Can we design like that using js view ?

Please help me .

Thanks&Regards

Sridevi

Tags:
Former Member
Former Member replied

Hi Sridevi,

You can parse each node of XML into a controll and its properties.

This is only an extract of the XML view (not enough time for do it all), but you can make an idea of the process:

<core:View xmlns="sap.m" xmlns:me="sap.me" xmlns:commons="sap.ui.commons" xmlns:form="sap.ui.commons.form" xmlns:core="sap.ui.core" controllerName="view.Detail">

          <Page id="page" title=" {i18n>PO_TITLE}" icon="{img>/icon/ui5}" showNavButton="{cfg>/showNavButton}" navButtonPress="handleNavButtonPress">

                    <footer>

                              <Bar>

                                        <contentRight>

                                                  <Button text="{i18n>APPROVE_BUTTON_TEXT}" icon="sap-icon://accept" enabled="{cfg>/acceptRejectEnabled}" press="handleApproveButtonPress"/>

                                                  <Button text="{i18n>REJECT_BUTTON_TEXT}" icon="sap-icon://decline" enabled="{cfg>/acceptRejectEnabled}" press="handleRejectButtonPress"/>

                                        </contentRight>

                              </Bar>

                    </footer>

                    <content>

                              <ObjectHeader title="{PurchaseOrderID}" number="{GrossAmount}" type="{cfg>/poListItemType}" numberUnit="{CurrencyCode}">

                                        <attributes>

                                                  <ObjectAttribute text="{ path:'CreatedAt', formatter:'util.Formatter.Date' }"/>

                                                  <ObjectAttribute text="{CreatedByName}"/>

                                        </attributes>

..........

sap.ui.jsview("view.Detail2", {

          /** Specifies the Controller belonging to this View.

          * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

          * @memberOf view.Detail2

          */

          getControllerName : function() {

                    return "view.Detail2";

          },

          /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

          * Since the Controller is given to this method, its event handlers can be attached right away.

          * @memberOf view.Detail2

          */

          createContent : function(oController) {

                    return new sap.m.Page({

                              footer:

                                        new sap.m.Bar({

                                                  contentRight: [

                                                            new sap.m.Button({tex: "{i18n>APPROVE_BUTTON_TEXT}", icon: "sap-icon://accept",

                                                                                enabled: "{cfg>/acceptRejectEnabled}", press: "handleApproveButtonPress"}),

                                                            new sap.m.Button({text: "{i18n>REJECT_BUTTON_TEXT}", icon:"sap-icon://decline",

                                                                                enabled: "{cfg>/acceptRejectEnabled}", press: "handleRejectButtonPress"}),

                                                  ]

                                        }),

                              content: [

                                        new sap.m.ObjectHeader({title: "{PurchaseOrderID}", number: "{GrossAmount}",

                                type: "{cfg>/poListItemType}", numberUnit: "{CurrencyCode}",

                                                  attributes: [

                                          new sap.m.ObjectAttribute({text: "{ path:'CreatedAt', formatter:'util.Formatter.Date' }"}),

                                          new sap.m.ObjectAttribute({text: "{CreatedByName}"}),

                                ]

                                        })

.........

Regards,

Jose Manuel

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