Skip to Content

In this CAR Tip in a Minute, I will show you how to build a simple SAP Fiori application that consumes data from SAP Customer Activity Repository.  Our application will allow store managers to see the net sales and number of transactions across one week of data in a single store.


Prerequisites

To build this application, you will need:

  • SAP Web IDE [Trail Usage: https://hanatrial.ondemand.comLog On -> Subscriptions -> webide -> Application URL]
  • SAP Customer Activity Repository 2.0
  • SAP HANA Studio

Step-1 Building HANA views and XS OData service


1. In SAP HANA Studio, create a new calculation view named MultiChannelSalesQuery. I am basing my new view on the MultiChannelSales_V2 view delivered with SAP Customer Activity Repository 2.0.

Our new calculation view will have only 5 exposed fields. This view has one input parameter which is SAPClient.

7.PNG

Step-1.1 Create MultiChannelSalesQuery view


1.1 Create package by right click on the content folder and provide package name (For instance in tmp.Demo)

    /wp-content/uploads/2015/10/8_807330.png

 

1.2   Right click on the package that you created and select calculation view.

/wp-content/uploads/2015/10/9_807331.png

1.3   Drag and drop projection node from the left palette.

  10.PNG

1.4   Click on the green plus sign near projection node and search for the MultiChannelSales_V2 view. Add necessary fields to the output by clicking on the circle near field name.

11.PNG

1.5   Activate view.

/wp-content/uploads/2015/10/12_807334.png

Step-2 Create OData service


2. Go to repositories view and navigate to your package that we created just now. Right click on the package and select New->XS application access file. Now you will have an empty .xsapp file in your package.

3. Create sub-package called odata in your package to put all xsodata file together. Right click on the sub package and choose New->XS OData file. Give name with xsodata extension (ODataServices.xsodata). Paste following code in this file.

    

     service {

               <package_path>::MULTICHANNELSALESQUERY” as “MultiChannelSales”

                keys generate local “GenID”

                aggregates always

                parameters via entity “MultiChannelSalesQuery”;

     }

     annotations {

          enable OData4SAP;

     }


4. Right click on the odata sub package and choose New->file. Give name with hdbrole extension. (MultiChannel.hdbrole). Paste following code in this file.

    

     role <package_path>::MultiChannel{

          application privilege: <package_path>::Execute;

     }


5. Open SQL console by right clicking on the system. Provide a user with the necessary authorization to run the hdbrole by running following SQL query:


          call “_SYS_REPO”.”GRANT_ACTIVATED_ROLE” (‘<package_path>::<role_name>’,'<User_name>’);

6. In SAPUI5, choose File -> New -> Project from template.

/wp-content/uploads/2015/10/1_807335.png

7. From the Template Selection screen, choose SAPUI5 Application Project.

2.PNG

8. From the Basic Information screen, make the required entries and choose Next.

3.PNG

9. From the Template Customization screen, make the required entries and choose Next.

4.PNG

10. You now have a project called StoreSalesApp in the Project Explorer.

11. Configure the neo-app.JSON file by pasting the following code in this file:

     {

      “path”: “/<package_path>”,

      “target”: {

      “type”: “destination”,

      “name”: “<system_name>_https”,

      “entryPath”: “/<package_path>/”

     },

      “description”: “<description of the system>”

    }


12. Paste the following code in the Main.view.js file:

     jQuery.sap.require(“sap.viz.ui5.Bar”);

     sap.ui.jsview(“view.main”, {

       /** 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.main

        */

       getControllerName: function() {

              return “view.main”;

       },

       /** 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.main

        */

       createContent: function(oController) {

             

              var storeList = new sap.m.ComboBox({

                     value:”{MultiChannelCollection>/data/0/Location}”,

                     change:[oController.onStoreChanged,oController]

              });

              var oItemTemplate1 = new sap.ui.core.ListItem({

                     text:”{MultiChannelCollection>Location}”

              });

              storeList.bindItems(“MultiChannelCollection>/data”, oItemTemplate1);

             

              var storeTitle = new sap.m.Title({

                     text:”Lit of stores:”

              });

              var hbox = new sap.m.HBox({

                     items:[storeTitle,storeList]

              });

             

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

              dimensions : [ {

                axis : 1,

                name : ‘Location’,

                value : “{Chart>BillingDocumentDate}”

              } ],

              measures : [ {

                name : ‘Net Sales’,

                value : ‘{Chart>NetSalesAmount}’

              }, {

                name : ‘Number of Transactions’,

                value : ‘{Chart>NumberOfTransactions}’

              } ],

              data : {

                path : “Chart>/data”

              }

            });

               this.combination = new sap.viz.ui5.Combination({

              id: “combination”,

              width : “80%”,

              height : “400px”,

              title : {

                visible : true,

                text : ‘Net Sales and Number of Transactions By Location’

              },

              dataset : dataset

            });

             

              var vbox = new sap.m.VBox({

                     items:[hbox,this.combination]

              });

              return new sap.m.Page({

                     title: “Sales Dashboard”,

                     content: [

                           vbox

                     ]

              });

       }

});

13.Paste the following code in the Main.controller.js file:

     sap.ui.controller(“view.main”, {

       /**

        * Called when a controller is instantiated and its View controls (if available) are already created.

        * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

        * @memberOf view.main

        */

              onInit: function() {

                     if(!this.getView().getModel(“MultiChannelCollection”)) {

                           this.getView().setModel(new sap.ui.model.json.JSONModel(),”MultiChannelCollection”);

                     }

                     if(!this.getView().getModel(“Chart”)) {

                           this.getView().setModel(new sap.ui.model.json.JSONModel(),”Chart”);

                     }

                     var that = this;

                     this.oDataModel = new sap.ui.model.odata.ODataModel(“</package_path/servicename.xsodata>”, true);

                     this.busyIndicator = new sap.m.BusyDialog();

                    

                     this.busyIndicator.open();

                    

                     this.oDataModel.read(“MultiChannelSalesQuery(P_SAPClient=’800′)/Results?$select=Location”, {

                           success : function onSuccess(oReturnedData) {

                                  that.busyIndicator.close();

                                  that.getView().getModel(“MultiChannelCollection”).setData({data:oReturnedData.results});

                                   that.getGraphData(‘R100’);

                           },

                           error : function onFailure(oError) {

                                  that.busyIndicator.close();

                                  alert(oError);

                           },

                           async: true

                     });

              },

             

              getGraphData:function(store){

                     var that = this;

                     var startDate = new Date();

                     var endDate = new Date();

                     endDate.setDate(endDate.getDate() + 7);

                     startDate = this.convertDate(startDate);

                     endDate = this.convertDate(endDate);

                     var busyIndicator = new sap.m.BusyDialog();

                    

                     busyIndicator.open();

                     this.oDataModel.read(“MultiChannelSalesQuery(P_SAPClient=’800′)/Results?$select=BillingDocumentDate,NetSalesAmount,Location,NumberOfTransactions&$filter=Location eq ‘” + store + “‘”+” and BillingDocumentDate ge ‘” + startDate + “‘”+” and BillingDocumentDate le ‘” +endDate+ “‘” , {

                           success : function onSuccess(oReturnedData) {

                                  busyIndicator.close();

                                  that.getView().getModel(“Chart”).setData({data:oReturnedData.results});

                           },

                           error : function onFailure(oError) {

                                  busyIndicator.close();

                                  alert(oError);

                            },

                           async: true

                     });

              },

             

              convertDate:function(date){

                     var dateString;

                     var dayString,monthString,yearString;

                     dayString = date.getDate().toString();

                     monthString = (date.getMonth()+1).toString();

                     yearString = date.getFullYear().toString();

                     if(dayString.length === 1){

                           dayString = “0” + dayString;

                     }

                     if(monthString.length === 1){

                           monthString = “0” + monthString;

                     }

                     dateString = yearString + monthString + dayString;

                     return dateString;

              },

              onStoreChanged:function(oEvent){

                     this.getGraphData(oEvent.getParameter(“newValue”));

              }

});

14. Right-click on a project and run a project as a web application.

/wp-content/uploads/2015/10/13_807340.png

 

End Result

     If you have successfully followed the procedure, you will see the following output:

6.PNG

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply