Skip to Content

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

Approve Purchase Order using js view


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.

This is all in XML view.

Can we design like that using js view ?

Please help me .



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="" 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">




                                                  <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"/>





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


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

                                                  <ObjectAttribute text="{CreatedByName}"/>



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({


                                        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}"}),





Jose Manuel

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