Integrate SAP UI5 or open UI5 with Node.js

With JavaScript server side programming getting popular day by day, it clicked my mind to integrate SAP UI5 or open UI5 with Node.js.

What we are building?

We are building a UI5 based web-application which uses Node.js for backend logic. For the sake of simplicity we will create a small application which list down all the seven wonders of world with their respective location.

Prerequisites

1. Node.js should be installed on your machine. To install Node.js please visit http://nodejs.org/

2. SAPUI5  UI Development Toolkit for HTML5 should be installed on your machine. To install please visit https://tools.hana.ondemand.com/

3. Git Bash should be installed (optional). I will be using Git Bash for this demo.

Writing the backend Node.js code

In the backend, we will be exposing the data using REST service which will be consumed by the UI5 application. Following are the steps to expose a REST service via Node.js:

1. Create a new folder anywhere on your machine

2. Inside the folder, create a package.JSON file and copy the following code:

The above code gives some general description about Node.js project like name of project, description, version and most important specify the dependencies which will be used in the project. In our case, its Express module which will be used for exposing the REST APIs. A JAVA developer would be able to get the analogy between package.JSON in Node.js and pom.XML in maven.

To know more about Express module, please visit http://expressjs.com/

3. Open Git bash, in the Git Bash, Navigate to that folder and execute the following command

Npm install

The above command will install express module for the project.

4. Create a Server.js (you can choose any name of your choice) in that folder and copy paste the following code:

5. Open Git Bash and Navigate to the folder. Run to following command to host the project:

node server.js

-----------------------------------------------------------------------------------------------------

Note: server.js is the name of the .JS file which we created in step 4.

-----------------------------------------------------------------------------------------------------

Testing the hosted service

To test the service hit the URL http://localhost:4000/SevenWonders

Creating the UI

For the UI, we will be creating UI5 desktop application. We will be using eclipse with UI5 application development plugin installed in it to write the UI code:

The Index.html

Nothing special in the below code, just a typical index.html for UI5 project

View.JS

In the view.JS file we will create a table with two columns i.e. Wonders and location:

Controller.JS

In the controller onInit() method, I have fired a get call towards our “SevenWonders” service and binding the data with the table in view.

Integrating the front and back ends

1. Navigate to the UI5 project workspace and copy the Index.html and the folder containing views and controller to your clipboard.

2. Paste the clipboard at the location where server.JS file exists. After copying, your folder will look like

3. Add the following line of code in you server.JS

app.use(express.static(__dirname));

The above code tells to route default request (i.e. localhost:4000) to current directory, and since we have kept index.html file in the same directory, index.html will get render.

Testing the final application

1. Navigate to the directory containing server.js file and execute the following command in your Git Bash

Node server.js

2. To test the final application just hit http://localhost:4000/ in your browser

We have successfully created, deployed and tested a complete JavaScript based web application and integrated node.Js with SAP UI5 or Open UI5.

Continue reading

Creating New Date Rules in SAP CRM

This blog explains the process for creating new date rules in SAP CRM.

To create a new date rule, you need to perform a series of configuration and development steps:

1. Open the Date Rule customizing screen by going into the IMG and following the menu path: Customer Relationship Management > Basic Functions > Date Management > Define Date Types, Duration Types and Date Rules.

2. In the dialog structure that appears, select Date Rules, and then click the New Entries button. The screen shown below appears.

Enter a technical name for the rule such as “ZBOOKEX1”, and then enter a description such as “Book Example”.

4. Click Save, and you are prompted for a customizing request. If you don’t have an existing customizing request, you’ll create a new one; otherwise, you’ll select one for your work.

5. Go back to the overview screen of all existing date rules as shown below, select the date rule that you created, and then click the Details icon.

6. An overview screen appears showing all of the versions of the underlying XML that makes up the date rule as shown in the figure below. Double-click on the only row, and then you’re ready to start editing the XML of the date rule. There isn’t much documentation on this format, but to invoke an ABAP function module for date rules, you can enter a certain pattern as shown in the second figure and code below.

7. When you first open the editor, it will be in display mode. Click the Change button to insert the necessary XML code.

The Editor for Date Rules screen expects a certain pattern of XML to be entered that specifies the date rule as shown in the following code. The pattern has been derived by examining the delivered date rule in the system called “Planned Date (Activities)” with a technical key of “000000000002”.

<?xml version="1.0"?>

<SAPTimeRule>

  <ABAPTimeRule function="Z_CRM_DATE_CALC"/>

</SAPTimeRule>

8. After you’ve created the XML for the date rule that calls the ABAP function module you’ll create in the next step, save your work.

9. Before you can use this date rule in a date profile, you now must code the ABAP logic that will evaluate the date passed and return a result. Create a function module that has two importing parameters:

• _ CONTEXT: A type reference to IF_TIMECONTEXT.
• _ TIMEMESSAGE: A type reference to CL_TIMEMESSAGE.

Your function module also must return a reference value named ERROR that is of type XFLAG.

The context reference provides you access to the date data being manipulated in your function module. The interface allows you to retrieve the list of time events and then add back a special time event called the result, which is the result of your calculation and will populate the date type that will use this rule.

1 Function Module Logic: Date Context

To better understand this logic, let’s take a look at the following function module that calculates your date. The first call will be to get the event set from the context as shown in the code fragment:

li_eventset = context->get_eventset( ).

This is always needed to provide the result back and calculate any dates you may encounter.

Next you’ll get the GUID of the current transaction you’re processing so you can access any data needed for the calculation via the one order API. You’ll use the function module CRM_CONTEXT_GET_ACTUALGUID_OW to get this GUID.

After you have the GUID, you retrieve any other data from the business transaction using the one order OW function modules by passing in the header GUID. As you might have noticed, your function module doesn’t provide any data about the business transaction you’re working with directly.

If your calculation is based on another date, you first need to retrieve the value of that date by retrieving it from the event set. The following code fragment can be used to achieve this in your date rule function module:

li_tns_zfirstcont ?= li_eventset->get_by_name( lv_name ).

if li_tns_zfirstcont is initial.

  exit.

endif.

Note that you won’t want to process the date rule if the date you need to calculate hasn’t been entered or already calculated. Thus, you’ll exit the function module to prevent any short dumps with improper date calls.

One big difference of working with a date context as compared to standard ABAP time and date types is that you can’t perform simple add or subtract functions on the dates themselves. You instead need to create a duration that corresponds to how much you want to increment or decrement the date and then apply the duration to the date itself. To do this, create a new duration object using the class CL_TIMEDURA. You can then calculate the new date by using the static method CL_TIMECALC.

Continue reading

SAP BO Webi report development on HANA views

SAP BO Webi report development on HANA views:

This document explains step by step creation of Hana views, Universe in IDT and development of Webi report on top of the Hana views universes. This document will give understanding of the complete development/creation of end to end scenario from Hana views to report.

In this scenario we are considering Purchase application flow and analysis of report for purchase users assuming that Purchase related data extracted thru SLT from ECC system.

Applications & Versions used for this scenario:

SAP Hana Studio 2.0.7

Information Design Tool 4.1

SAP BO Webi 4.1

This Document explains below major topics:

1. Creation of Attribute View
2. Creation of Analytical View
3. Creation of calculation View
4. Creating and Publishing universe using IDT (Information Design Tool)
5. Creation of Webi Report

Extracted Purchase order header, Item and account assignment tables and also Material, Vendor, Company code and G/L account master data tables in to HANA from ECC using  SLT.

As a best practice need to follow the proper naming conventions for creating any views. (ex: Attribute view –starting with AT followed by table name)

1. Creation of Attribute View:

1.1. Select the respective package –>  Right click –->  New a Select Attribute View

1.2. Select the Mara table from the schema and drop it in Data Foundation in view and double click on the selected fields for output display.

Save and activate the view. Attribute view AT_MARA created on Material Master data table – Mara:

Similar way creates other attribute views and by selecting the respective master data tables from the schema, and enable the fields which we want to see in output in each view for below.

Vendor Master – LFA1 – Attribute View

Material Master – MARA – Attribute View

Company Code master – T001 – Attribute View

G/L Account master – SKB1 – Attribute view

Once all attribute views are created it displays as below:

2. Creation of Analytical View:

Below Purchase order tables are from ECC thru SLT.

EKKO : Purchase Document Header

EKPO : Purchase order Item

EKKN : Purchase Data (Account Assignment)

2.1. Right click on your package — Select New – Analytical View:

Enter the details

2.2. Drag the EKKO table in to data foundation and AT_LFA1 and AT_T001 attribute views in to star join.

Join the appropriate fields of EKKO table with both attribute views based on the requirements.

EKKO.company_code = AT_T001.Company_Code

EKKO.vendor = AT_LFA1.Vendor

2.3. In Semantics keep the Key fields, correct the Attributes and measures if required.

Save and activate the view.

Similarly create the other two Analytical views, all three analytical views will displays as below:

3. Creation of Calculation View:

3.1.  Right click on your package — Select New – Calculation View:

Drag two Aggregation nodes and select AN_EKKO and AN_EKPO analytical views in each node respectively.

Select required output fields in each Analytical view

3.2. Connect the two aggregation nodes to Join Node and connect the related common fields.

Drag the Projection node and select required fields.

3.3 Select the key fields and adjust the dimensions and measures.

Save and activate the view.

Right click on the view and select Data Preview, we can see the data output of calculation view CL_Purchase

Now Calculation view is ready need to create universe to expose this data thru webi report.

4. Creating universe using IDT (Information Design Tool)

4.1.  Logon to IDT, In Repository Resources under the respective system expand right on Connections Node.

Select ‘Insert Relational Connection’

Enter the connection name:

Click on Next, and then select the database middle ware drivers under SAP node

Click on Next, and then enter the User name, password details of Hana system and click on Test connection button.

Then click on Finish, Now connection established to Hana system.

Expand the Connections node there we can find the new connection ‘Purchase_Flow’.

4.2. Create project ‘Purchase_Flow’ by clicking on File à Newà Project and enter the project name.

Click on Finish. New project ‘Purchase_Flow’ created in Local Projects node.

4.3. Now select Purchase_Flow connection, right click and click on ‘Create Relational Connection Shortcut’.

It will popup Select a Local Project window; select our ‘Purchase_Flow project.

Relational Connection connected to project as shown below:

Select Project à right click à select New Click on ‘Data Foundation’

Enter the name of Data Foundation

Select Multi Source Enabled as IDT will support.

Check for the user authentication details..

Click on Next and select the connection which was created earlier.

Click on Next, displays the connection parameters.

Click on Finish.

Open the Purchase_Flow_DF, expand the connection node, select _SYS_BIC  schema node where all Hana views columnar table will store. Select the CL_Purchase Calculation view table.

Save it.

4.4. Now create Business layer. Select Purchase_Flow project Right click à New à click on Business Layer.

It displays the below pop up screen

Select Relational Data Foundation and click on Next.

Enter the Name and click on Next

Select the respective data foundation and click on Finish. There is check box if system will create classes and objects, if you want to create on your own need to un check this.

Purchase_Flow_BL business layer created as below, review dimensions and measures change if required.

Select change the data type if necessary

Save the Business Layer. We can check the query output by clicking on Queries tab.

4.5. Click on Insert Query, it will add displays the classes and objects of Business layer

Drag and drop required fields to click on refresh to check the data in first instance.

Close the query.

4.6. To publish as universe Right click on Purchase_Flow_BL business layer à Publish à To a Repository

Click on Next

Click on Next

Click on Finish, Universe published successfully.

5. Creation of Webi Report :

Open BI Launch pad by entering the login credentials

Expand Application and select Web Intelligence

Click on New and select ‘Universe’ as data source.

Select our Universe from the list

Purcahse_Flow_BL universe will open in Query Panel as below:

Drag and drop required dimensions and measures in Result objects and if you want to filter any filed also.

Query filtered based on Vendor, Click on Run Query, pop up display to select Vendor to see the data.

Once required Vendors are selected click on Ok, report will display.

Change the Report Name as Purchase Data Flow Report

You can format the report with Refresh Date, page no, logo and chart as per requirement.

Continue reading

Types of binding in Sap Ui5

This blog explains the basic concepts and demo of binding options in Sap UI5.

Tools used:

• Eclipse Luna Service Release 1
• Tomcat Apache (Server)
• SAP UI5 Plug-in installed in Eclipse.
• Google Chrome

Sap ui5 provides three binding options

• Property binding
• Aggregation binding
• Element binding

Property Binding: To bind the properties of the control to the model.

Property Binding can be done by three ways.

• Within curly brackets in the constructor
• By bind property method
• By path

Generic coding to achieve the property binding.

Within curly brackets in the constructor

var oControl = new sap.ui.commons.TextView({
controlProperty: “{modelProperty}”
});

By Bind Property Method

• oControl.bindProperty(

“controlProperty”, “modelProperty”);

By Path

var oControl = new sap.ui.commons.TextView({
controlProperty: { path: “modelProperty” }
});

Property binding demo:

In this demo we are going to display the properties of the table by using all three options of property binding.

Step 1: Create the Sap UI5 Application project

In Eclipse, File–>New–>other and select “SAP UI5 Application Development” –>Application Project and click on next button.
Provide the project name and click on next button.

Step 2:  Implement the following code under the createcontent method.
var aGalaxy = [
                    {“Planet” : “Mercury”,“Diameter”:“5,100”,“Gravity”:0.40},
                       {“Planet” : “Venus”,“Diameter”:“12,600”,“Gravity”:0.90},
                       {“Planet” : “Earth”,“Diameter”:“12,800”,“Gravity” : 1.00},
                       {“Planet” : “Mars”,“Diameter”:“6,900”,“Gravity” : 0.40},
                       {“Planet” : “Jupiter”,“Diameter”:“143,600”,“Gravity”:2.70},
                       {“Planet” : “Saturn”,“Diameter”:“120,600”,“Gravity” : 1.20},
                       {“Planet” : “Uranus”,“Diameter”:“53,400”,“Gravity” : 1.00},
                       {“Planet” : “Pluto”,“Diameter” : “12,700”,“Gravity” : 1.40} ];
   
              var oModel = new sap.ui.model.json.JSONModel({
                     values : aGalaxy
              });
                 
            // Create instance of table control
var oTable = new sap.ui.table.Table({
               title : “Physical characteristics of planets”,
               visibleRowCount : 8,
               firstVisibleRow : 0,
               width : “500px”
});

// Bind model to table control

oTable.setModel(oModel);

oTable.bindRows(“/values”);

oTable.placeAt(“content”);

Remember to include the library “sap.ui.table” in the index.html

  <script src=”resources/sap-ui-core.js”

         id=”sap-ui-bootstrap”

         data-sap-ui-libs=”sap.ui.commons,sap.ui.table”

         data-sap-ui-theme=”sap_bluecrystal”>

        </script

Result:

Right click on the index.html and select the option run on server.

Aggregation Binding

The control element is binded by collection of values. The control element then acts as a data container and also represents a template of the data to be displayed.

Aggregation Binding Demo:

In this demo we are going to display the error log from the local json model using the aggregation binding.

Step 1: Create the Sap UI5 Application project

In Eclipse, File–>New–>other and select “SAP UI5 Application Development” –>Application Project and click on next button.

Provide the project name and click on next button.

Step 2:  Implement the following code under the createcontent method.

      

 // Create instance of JSON Model

              var oModel = new sap.ui.model.json.JSONModel({

                     Value:

                           [{“index”: “0”,“level”:“Success”,“description”: “Performance is good”},

                           {“index”: “1”,“level”:“Warning”,“description”: “Service not available.”},

                           {“index”: “2”,“level”:“Error”,“description”: “Record not found”}]

              });

              // Bind Model to core

       sap.ui.getCore().setModel(oModel);

              // Create template of message type

              var oRowTemplate = new sap.ui.commons.Message({

                     text : “{description}”,

                     type : “{level}”

              });

              // Create RowRepeater and bind message template

              var oRowRepeater = new sap.ui.commons.RowRepeater();

              oRowRepeater.bindRows(“/Value”, oRowTemplate);

              oRowRepeater.placeAt(“content”);

Result:

Right click on the index.html and select the option run on server.

Element Binding

An element to be bound to an object in the Model can be achieved by Element binding. The context of the relative binding to a control is represented by the Element control. In order to display a detailed list for the selected header information you need to have this parent-child binding.

Element Binding Demo:

In this demo we are going to displaying the menu from the parent table weekdays from the local json model and based on the selection in the parent table values are changed in the child table meals by element binding.

Step 1: Create the Sap UI5 Application project

In Eclipse, File–>New–>other and select “SAP UI5 Application Development” –>Application Project and click on next button.

Provide the project name and click on next button

Step 2: Implement the following code under the createcontent method.

var oModel = new sap.ui.model.json.JSONModel({

                     weekdays:

                           [{“day”: “Monday”,“no_meals”:“2”,“id”: “1”},

                            {“day”: “Tuesday”,“no_meals”:“1”,“id”: “2”},

                            {“day”: “Wednesday”,“no_meals”:“2”,“id”: “3”},

                            {“day”: “Thursday”,“no_meals”:“2”,“id”: “4”},

                            {“day”: “Friday”,“no_meals”:“1”,“id”: “5”}], 

                     meals:

                     [{“MealNo”: “1”,“dayId”: “1”,“items”: “French fries”},

                      {“MealNo”: “2”,“dayId”: “1”,“items”: “French toast”},

                      {“MealNo”: “3”,“dayId”: “2”,“items”: “French fries with Burger”},

                      {“MealNo”: “4”,“dayId”: “3”,“items”: “Hot Dog”},

                      {“MealNo”: “5”,“dayId”: “3”,“items”: “French Fries”},

                      {“MealNo”: “6”,“dayId”: “4”,“items”: “Donut”},

                      {“MealNo”: “7”,“dayId”: “4”,“items”: “Hot Dog”},

                      {“MealNo”: “8”,“dayId”: “5”,“items”: “French toast”},

              

                      ]

              });

              sap.ui.getCore().setModel(oModel);      

              // Table with weekdays

              var oTable = new sap.ui.table.Table({

              width : “100%”,

              title : “Weekdays”,

              visibleRowCount : 5,

              selectionMode : sap.ui.table.SelectionMode.Single,

              });

              oTable.addColumn(new sap.ui.table.Column({

              label: new sap.ui.commons.Label({text: “Weekday”}),

              template: new sap.ui.commons.TextField({value:“{day}”})

              }));

              oTable.addColumn(new sap.ui.table.Column({

                     label: new sap.ui.commons.Label({text: “No Meals”}),

                     template: new sap.ui.commons.TextField({value:“{no_meals}”})

                     }));

             

              oTable.bindRows(“/weekdays”);

              oTable.placeAt(“parent”);        

             

// Display of meals

              var oTable2 = new sap.ui.table.Table({

              title : “Meals”,

              visibleRowCount : 3,

              width : “100%”,

              selectionMode : sap.ui.table.SelectionMode.Single,

              editable : false

              });

              oTable2.addColumn(new sap.ui.table.Column({

              label: new sap.ui.commons.Label({text: “Meal”}),

              template: new sap.ui.commons.TextField({value:“{MealNo}”})

              }));

      

              oTable2.addColumn(new sap.ui.table.Column({

              label: new sap.ui.commons.Label({text: “Description”}),

              template: new sap.ui.commons.TextField({value:“{items}”})

              }));

              oTable2.bindRows(“/meals”);

              oTable2.placeAt(“child”);

Remember to include the library “sap.ui.table” in the index.html

  <script src=”resources/sap-ui-core.js”

         id=”sap-ui-bootstrap”

         data-sap-ui-libs=”sap.ui.commons,sap.ui.table”

         data-sap-ui-theme=”sap_bluecrystal”>

        </script

Result:

Right click on the index.html and select the option run on server.

Continue reading