Approve Purchase Order using js view

[former_member184238]

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-fake...

This is all in XML view.

Can we design like that using js view ?

Please help me .

Thanks&Regards

Sridevi

[Former Member · Accepted solution]

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

[former_member184238 · Accepted solution]

Hi,

Thank you very much for your reply.

It's very useful to me.

But when I am doing like this I am not getting firstStatus data in the list and press event is not working .

Below is my code.

var productList = new sap.m.List({

                                            inset : true,

                                            type : sap.m.ListType.DetailAndActive,

                                            headerText : "Product List",

                                            ScrollToLoad : true

                                   });

var objectlistItem = new sap.m.ObjectListItem("objlist", {

                                                                    title : "{ProductId}",

                                                                    number : "{Price}",

                                                                    numberUnit : "{CurrencyCode}",

                                                                    press : function(oEvent) {

                                                                               alert("press");

                                                                             },

                                                                 attributes : [ new sap.m.ObjectAttribute({ text : "{Name}"}),

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

                                                                firstStatus : [ new sap.m.ObjectStatus({ text : "{Category}"

                                          }) ]

                                 });

productList.bindItems("/Products", objectlistItem);

                    var page = new sap.m.Page("ProductPage", {

                                 title : 'Product List',

                               content : [ productList ]

             });

              return page;

When I run that application my output is like below.

Here I am not getting firststatus data in the list and when I click on item in the list I am not getting any alert which is in press event.

Please help me to find out the solution for this.

Thanks&Regards

Sridevi

[raeijpe]

Hi Sridevi,

You can write your SAPUI5 view code in Javascript, JSON, XML and HTML-template format and you can use these all together. The view controller can only be written in Javascript format. At runtime, all views will be translate to javascript format and so you can do this also by hand and replace the XML view by a Javascript view.

In the documentation you will find an example of all different view types.

Robert