UI5 debug flag and Local Storage - how is your setting persisted?

June 24, 2016, 5:50 pm

≫ Next: Compare Data Binding mechanism: SAPUI5 and Angular

≪ Previous: Understand extend function in Component.js in Fiori application

We know that once we enable debug mode via "Ctrl+Alt+Shift+P", this setting will be persisted: even if you turn off your laptop and launch the application tomorrow, the debug mode will still be there.

In Chrome development tool, there is an Application tab which records this setting via key value pair using Local Storage.

As usual we can still use debug to investigate what has happened when the checkbox "Use Debug Sources(reload)" is clicked.

In Chrome development tool Elements tab, click the small arrow icon to enter the element inspection mode, then click the checkbox, then its html source code will be automatically navigate.

Perform global search via keyword "useDbgSources", and then we can find the event handler onUseDbgSources for debug mode set:

Set a breakpoint on this function, then mark the checkbox in UI, breakpoint is triggered as expected:

Within the function, we can know the debugging flag is set via localStoage API: window.localStorage.setItem

This API will change the following file in my laptop:

If I open the changed file via some SQLite management tool, I can find the corresponding entry with key sap-ui-debug and value 'X' set:

↧

Compare Data Binding mechanism: SAPUI5 and Angular

June 30, 2016, 1:12 am

Latest and popular articles on SAP ERP

≫ Next: Compare Controller mechanism: SAPUI5 and Angular

≪ Previous: UI5 debug flag and Local Storage - how is your setting persisted?

Recently I am studying Angular in my spare time and I have written one post Compare Event handling mechanism: SAPUI5 and Angular.

And now l would like to share with you what I have learned from Angular about its data binding design.

I first list a comparison from my point of view and will illustrate it in detail.

UI5	Angular
1. should explicitly create or obtain Model object to finish data binding	1. Could leverage HTML native elment as data model
2. Binding mode: one way, two way, one time	2. two way
3. Use object instance like JSONPropertyBinding to hold binding path information	3. Use Watcher object instance to hold binding path information
4. grammar in xml view: {\|model name\|>/\|field path\|}, for example {json>/ImgSrc}	4. grammar in html page: see example below

For UI5 data binding, I have already written two self study blogs: Part6 control data binding and Part7 Implementations for different binding mode: OneWay, TwoWay, OneTime.

I use the following simple Angular application which only contains 11 lines to demonstrate the data binding implementation of Angular.

<html ng-app>  <head>    <meta charset="utf-8">    <title>Angular.js Example</title>    <script src="angular/angular.js"></script>  </head>  <body>    Name:<input ng-model="name" type="text"/>    Hello {{name}}  </body></html>

Here I have a input element marked with attribute 'ng-model="name"', which means I tell Angular that I have declared a data model with name "name". Then for "Hello {{name}}", it is actually a template and I tell Angular to render the page with static text "Hello" plus the actual content of input field.

You can test the application here. Every time you type something in the input field, the characters you have typed will be displayed after "Hello":

In this blog, I will explain how these 11 lines of codes have implemented the data binding feature, with the help of Angular framework code.

When you launch the application for the first time, the application will look like below. Although you only saw blank field in input field and initial value after "Hello", some logic has already been executed under the hood. I will first introduce how the initial value is rendered in html page.

How initial value is rendered in html page

1. Like UI5, Angular has also its bootstrap phase. During this phase, Angular will traverse the HTML DOM tree. Once it detects the input element marked with attribute "ng-model", it will create a watch object for current scope:

The watcher object is just an object consisting of several functions. So far the last attribute points to a function, and the function get is used to extract value from data model.

2. And you have already noticed that although we do not explicitly specify event handler for input field, however it can still react to our input. Why? Angular framework has registered a listener on input event for us. We will go through the implementation of listener later. So now for the input element, we have one watcher and one listener.

3. Again a second watcher is created for text node, “Hello {{name}}". So now we have two watchers created ans stored in watchers array of current scope object.

4. Still in bootstrap phase, the function $apply of scope is called.

Within this function, there is a DO loop to handle all watcher object of current scope one by one:

Since I haven't typed anything in input field, I have only the static text "Hello" to be displayed:

Before line 5624 is executed:

After executed:

So far, the initial page display logic is introduced.

How the value from Input field can flow to Hello text field

Now I have typed "A" in input field:

Since I have explained previously that Angular has registered a listener for input field, so now it is called:

In this event handler, scope.$apply will be called.

You still remember the fact that all watchers will be handled within scope.$apply? This time, the input character "A" is extracted from input field as model:

Since now the template "Hello {{name}}" has already been filled with actual value, it is ready to render it:

After line 5624 is executed, you will see "Hello A" in UI:

↧

Compare Controller mechanism: SAPUI5 and Angular

July 1, 2016, 12:46 am

Latest and popular articles on SAP ERP

≫ Next: Creating a Fiori OVP Application with CDS view annotations - Part 1

≪ Previous: Compare Data Binding mechanism: SAPUI5 and Angular

Let's first refresh our memory on SAPUI5 controller. I have a simple xml view which only contains a button:

<core:View xmlns:core="sap.ui.core" xmlns:common="sap.ui.commons" controllerName="buttontutorial.view.simple"><common:Button text="Jerry" id="jerryButton"/></core:View>

And a simple controller:

sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller){
"use strict";
return Controller.extend("buttontutorial.view.simple",{
onInit : function() {  debugger;
}  });}
);

due to the attribute controllerName="buttontutorial.view.simple" in XML view, the controller instance is created and connect with XML view instance by UI5 framework:

And we can use JavaScript code in console to list the larget number of attributes belonging to created controller instance:

for( var name in this ) { console.log("attribute: " + name + " value: " + this[name]);}

Or you can simply type "this." in console, and see there are lots of methods available for controller instance:

For example, byId method of controller instance is widely used, if you type this.byId in console, you can see its implementation just delegates the call to this.oView.byId.

This makes sense since every controller instance holds a reference to its host view via oView, and the connection between controller and its view is established in function connectToView:

Angular Controller

You can play with the sample Angular application from this url.

It consists of 31 lines of source code:

<html ng-app>  <head>    <meta charset="utf-8">    <title>Angular.js Example</title>    <script src="angular/angular.js"></script>    <script>      function NameCtrl($scope){        $scope.names = ['ABAP', 'Java'];        $scope.addName = function() {          if( $scope.names.indexOf($scope.enteredName) != -1){            alert("duplicate key is not allowed in list: " + $scope.enteredName);            $scope.enteredName = '';            return;          }          $scope.names.push($scope.enteredName);          $scope.enteredName = '';        };    }    </script>  </head>  <body ng-controller="NameCtrl">    <ul>      <li ng-repeat="name in names">{{name}}      </li>    </ul>    <form ng-submit="addName()">      <input type="text" ng-model="enteredName">      <input type="submit" value="add">    </form>  </body></html>

When you type a new language in input field and click "Add" button, the language will be added into list above:

Let me first briefly introduce the idea of source code, then I will go through with each point in detail.

1. controller instance initialization

During Angular bootstrap phase, due to this line of source code in html, <body ng-controller="NameCtrl">, Angular will create a new controller instance in line 5327. You can consider $controller as a factory function.

Let's have a look at the content of argument locals for factory function:

The most important attribute is $scope, which is passed into function NameCtrl defined by us:

Once our application code is executed, controller instance is created. However, after checking it in Chrome, I found it is just a dummy instance without any important attribute. Instead, the data model and addName function are appended and available in current scope:

2. How addFunction available in scope object will be called when add button is called

Based on study result in step1, the addName function is located in scope object. My question is, when I press add button, why is it called?

In previous blog Compare Event handling mechanism: SAPUI5 and Angular, I already introduced that Angular does event handler registration automatically for us, as long as it detects the directive like this:

<form ng-submit="addName()">.

Actually I have made modifications on angular.js, adding more trace so that you can easily find where Angular achieves event registration under the hood:

So it is called as expected:

Summary

UI5 controller instance has a large number of useful functions available to use, and for Angular, controller instance is just a dummy one: data model and event handler function are located in scope object instead.

↧

Creating a Fiori OVP Application with CDS view annotations - Part 1

July 5, 2016, 1:09 pm

Latest and popular articles on SAP ERP

≫ Next: Creating a Fiori OVP Application with CDS view annotations - Part 2

≪ Previous: Compare Controller mechanism: SAPUI5 and Angular

In this blog I will provide some examples that demonstrate how CDS view annotations can be used to generate a Fiori Overview Page (OVP) Application. An OVP application consists of an Application Header, a Smart Filter and one or many Cards. The Cards can be used to show data in many forms such as tables and charts. The CDS view UI annotations are how we define what is shown in the card. For an overview of OVP see

User Interface Add-On for SAP NetWeaver - SAP Library

To be able to create and run the examples you will need the following:

Netweaver 7.5 System
Eclipse Mars or Juno
Web IDE account

We will also use data from the demo/testing Enterprise Procurement Modal(EPM). If you have no data existing for the model you can use transaction code SEPM_DG to generate data. For more information regarding EPM see

The NetWeaver Enterprise Procurement Model - An Introduction

We will start by creating a new CDS view in Eclipse. If you haven't setup eclipse yet you can follow Step 1: Installation of Eclipse and its ADT plugin in Simmaco's Smart Template blog

How to create Smart Templates annotations within CDS views - part 1

CREATING THE CDS VIEW

If you haven't already done so, you will first need to add a new ABAP system. This can be done in the ABAP perspective by choosing the menu option File -> New -> Other and searching for ABAP Project. Either choose your system from the list or provide the necessary connection details.

With your system added choose New - > Other. In the search input type ddl and choose DDL Source under ABAP

After choosing Next provide the Project, Package, Name and Description details and choose Next

Provide any Transport Details if necessary and choose Next. For Templates, we can use the Define View template. Choose Finish to complete the process.

In the generated view set the values

sql_view_name: zovpdemo
data_source_name: sepm_cds_sales_order as so

and use the auto complete (CTRL + space) option Insert All Elements to add all of the columns. This should result in

@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
so.sales_order_key,
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
so.net_amount,
so.tax_amount,
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
 /* Associations */
so.customer,
so.items
}

After saving and activating, you can verify that the view is working correctly by right clicking on the view and choosing Open Width -> Data Preview.

ADDING SMART FILTER SEARCH FIELDS

The annotation @UI.selectionField can be used to mark fields as global filters for the OVP application. For the purposes of this example we will mark the sales order id field as well as the customer.company_name with this annotation to allow searching on it. It is also necessary to identify a field as a key which we will assign to the sales_order_key field. The result of these changes yields

@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
key so.sales_order_key,@UI.selectionField: [{ position: 10 }]
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
so.net_amount,
so.tax_amount,
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
 /* Associations */
so.customer,
so.items
@UI.selectionField: [ { position: 20 } ]
so.customer.company_name
}

Within the selectionField annotation we assigned a position, this can be used to position fields in the UI when multiple are used. We also added the annotation

@OData.publish: true

which is necessary to publish the CDS view as an odata service.

PUBLISHING THE SERVICE

After saving and activating the change you will notice a little bubble nice to the publish annotation. This will give us access to the service url but it's usually required that the service is first added in the ABAP system.

To do so, open the t-code /n/iwfnd/maint_service and press the Add Service button. In the Add Selected Services screen provide a System Alias, in my case I will use LOCAL, and then press the Get Services button. The Technical Service Name field, Z_Ovp_Demo, can be provided to filter the results if necessary. Selecting the service should result in the Add Service dialog appearing. Here you can assign it a package and choose the enter button to complete the process.

Pressing the enter button should confirm your process and inform you that the service was created successfully.

GENERATING AN APPLICATION IN SAP WEB IDE

This step will require that you have a connection to your backend system setup in the HANA Cloud Platform for use with SAP Web IDE. If you haven't done so please see

Setup your SAP Web IDE on HANA Cloud Platform Part 1

In SAP Web IDE choose the menu option File -> New -> Project From Template. Choose the template Overview Page Application and choose Next. Provide a name such as OVP_Demo and choose Next. Using the Service Catalog Source select your system and then search for your service, Z_Ovp_Demo and choose Next.

In the Annotation Selection step the annotation file should appear automatically. If it does not choose the option Add Annotation Files and choose the option Annotation URL. Select your system and provide the url, correcting the TechnicalName if necessary

/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='Z_OVP_DEMO_CDS_VAN',Version='0001')/$value

Choose the Next button and then provide the values as shown.

Press Finish to complete the template workflow.

A SMALL ADJUSTMENT

At the time of creating this blog I had to make the following adjustment due to some issues presented by the template. Verify and adjust accordingly if this issue is presented in your generated app. Open the neo-app.json and verify that your backend destination route path is as follows, making sure that if the path and entryPath are set as /sap/opu/odata/sap/Z_OVP_DEMO_CDS, both are changed to /sap/opu/odata

{      "path": "/sap/opu/odata",      "target": {        "type": "destination",        "name": "UIA_Virtual_000",        "entryPath": "/sap/opu/odata"      },      "description": "UIA_Virtual_000"    },

RUNNING THE APP

Select the Component.js and Run the app. After pressing the filter icon your app should resemble

In the next part we will add some additional annotations that we will then use to display some cards in the apps. See part two at

Creating a Fiori OVP Application with CDS view annotations - Part 2

RESOURCES

ABAP CDS - SAP Annotations - ABAP Keyword Documentation

About ABAP Programming Model for SAP Fiori - SAP Library

↧

Creating a Fiori OVP Application with CDS view annotations - Part 2

July 5, 2016, 1:09 pm

Latest and popular articles on SAP ERP

≫ Next: Creating a Fiori OVP Application with CDS view annotations - Part 3

≪ Previous: Creating a Fiori OVP Application with CDS view annotations - Part 1

In this blog we will add some OVP Cards to the application we created in the previous blog. If you haven't already done so, please review part 1 of the blog series which can be found at

Creating a Fiori OVP Application with CDS view annotations - Part 1

ADDING CARDS TO THE OVP APPLICATION

TABLE CARD

For the first card we will define the properties necessary to display a Table card. This card presents three fields in a table with the first two columns showing the first two DataFields and the third column shows either the first existing DataPoint or the third DataField. The annotation @UI.lineItem is used to define DataFields. Within this annotation we can specify the position to be shown, a qualifier which allows us to identify an associated set of values, and a label. With this knowledge lets start with a basic example by specifying lineItems for the sales_order_id, customer.company_name and the net_amount. Notice how the position defers from the order of the fields. We will use the qualifier in the OVP application when we define the associated card. Save and activate the changes.

@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
key so.sales_order_key,
 @UI.selectionField: [ { position: 10 } ]
 @UI.lineItem: { position: 10, qualifier:'ordOverView', label: 'Sales Order'  }
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
 @UI.lineItem:  { position: 30, qualifier:'ordOverView', label: 'Net Amount'}
so.net_amount,
so.tax_amount,
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
 /* Associations */
so.customer,
so.items,
 @UI.selectionField: [ { position: 20 } ]
 @UI.lineItem:  { position: 20, qualifier:'ordOverView', label: 'Customer' }
so.customer.company_name
}

Now in Web IDE right click on the project and select New -> Card. Choose the datasource as shown and press Next.

Choose the Table Card and then press Next.

To define the card view provide the values as shown, making sure to include the qualifier ordOverView that we defined in the CDS view in the annotation path.

com.sap.vocabularies.UI.v1.LineItem#ordOverView

Press Next and Finish to complete the process.

Selecting the Component.js file and choosing Run should result.

Take note that using the smart filter can be used to filter out the displayed results.

TARGET VALUES

Taking this a step further, we can also use the @UI.lineItem to specify a DataPoint. Notice in the example below the @UI.lineItem defined for net_amount specifies a type of #AS_DATAPOINT. In addition to this we have now defined the annotation @UI.dataPoint on the net_amount field. Using the targetValue as well as the criticalityCalculation we can now color code the values shown in the table as they fit in the defined ranges.

@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
key so.sales_order_key,
 @UI.selectionField: [ { position: 10 } ]
 @Consumption.semanticObject: 'Action'
 @UI.lineItem: { position: 10, qualifier:'ordOverView', label: 'Sales Order'}
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
 @UI.dataPoint: {title: 'Net Amt',      criticalityCalculation: {    improvementDirection: #TARGET,    deviationRangeLowValue: 100,    toleranceRangeLowValue: 400,    toleranceRangeHighValue: 800,    deviationRangeHighValue: 1200    }}
 @UI.lineItem:  { position: 30, qualifier:'ordOverView', label: 'Net Amount', type: #AS_DATAPOINT}
so.net_amount,
so.tax_amount,
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
 /* Associations */
so.customer,
so.items,
@UI.selectionField: [ { position: 20 } ]@UI.lineItem:  { position: 20, qualifier:'ordOverView', label: 'Customer' }
so.customer.company_name
}

After saving and activating the changes to the CDS view, refreshing the OVP Application should now show the card as

First notice how the net amount label is now being taken from the label defined in the data point. Also, each value shows with a color indicating how it fits in our range. TECUM's Net Amt shows in orange which is the range between deviationRangeLowValue and toleranceRangeLowValue.

NAVIGATION

Now at this we may want to navigate to another app. In addition to navigating to other sites we can also used intent based navigation which relies on semantic objects and actions. Web IDE provides a launchpad sandbox which has a few apps that we can call using this approach, so lets navigate to one of these from the card. The annotation @UI.lineItem supports an array of objects assignment in which we can define multiple assignment for the same field. For this reason lets just add it to the sales_order_id annotations. For this to work we will need to assign the type of #FOR_INTENT_BASED_NAVIGATION and also a semanticObjectAction which we can assign to toappnavsample to call the sample app. In addition it is also required to define the Semantic Object using the annotation @Consumption.semanticObject which we will assign Action.

With these changes our view will now look like

@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
key so.sales_order_key,
 @UI.selectionField: [ { position: 10 } ]
 @Consumption.semanticObject: 'Action'
 @UI.lineItem:  [{ label: 'salesOrd', qualifier:'ordOverView',type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample'},    { position: 10, qualifier:'ordOverView', label: 'Sales Order'}]
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
 @UI.dataPoint: {title: 'Net Amt',      criticalityCalculation: {    improvementDirection: #TARGET,    deviationRangeLowValue: 100,    toleranceRangeLowValue: 400,    toleranceRangeHighValue: 800,    deviationRangeHighValue: 1200    }}
 @UI.lineItem:  { position: 30, qualifier:'ordOverView', label: 'Net Amount', type: #AS_DATAPOINT}
so.net_amount,
so.tax_amount,
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
 /* Associations */
so.customer,
so.items,
@UI.selectionField: [ { position: 20 } ]
@UI.lineItem:  { position: 20, qualifier:'ordOverView', label: 'Customer' }
so.customer.company_name
}

Save and activate the CDS view changes and then refresh the OVP application. Choosing one of the items in the table should now navigate you to the sample app. In my case I selected the entry for Telecomunicaciones Star which you can see in the passed parameters list as well as all of the other values.

ADDING A LIST CARD

Normally for each card you add, you would define additional annotations in your CDS view and assign them a unique qualifier. For the sake of simplicity, lets just reuse what we have already defined and define a List Card as shown

and this will yield

or it we choose the List Flavor Bar, which can be adjusted in the manifest.json which is part of the Web IDE project located under the webapp.

"card01": {  "model": "Z_OVP_DEMO_CDS",  "template": "sap.ovp.cards.list",  "settings": {  "title": "{{card01_title}}",  "category": "{{card01_category}}",  "subTitle": "{{card01_subTitle}}",  "entitySet": "Z_Ovp_Demo",  "listType": "condensed",  "listFlavor": "bar",  "sortBy": "changed_at",  "sortOrder": "descending",  "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#ordOverView"  }

it would result in

In the list flavor bar we are now only seeing two fields. This view is expecting just one data field and two data points, so if we add another data point and set a value format each field as shown

@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
key so.sales_order_key,
 @UI.selectionField: [ { position: 10 } ]
 @Consumption.semanticObject: 'Action'
 @UI.lineItem:  [{ label: 'salesOrd', qualifier:'ordOverView',type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample'},    { position: 10, qualifier:'ordOverView', label: 'Sales Order'}]
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
 @UI.dataPoint: {title: 'Net Amt',      criticalityCalculation: {    improvementDirection: #TARGET,    deviationRangeLowValue: 100,    toleranceRangeLowValue: 400,    toleranceRangeHighValue: 800,    deviationRangeHighValue: 1200    },    valueFormat:{        numberOfFractionalDigits: 1    }}
@UI.lineItem:  { position: 30, qualifier:'ordOverView', label: 'Net Amount', type: #AS_DATAPOINT}
so.net_amount,
 @UI.dataPoint: {title: 'Tax Amt', valueFormat:{    numberOfFractionalDigits: 1
}}
 @UI.lineItem:  { position: 40, qualifier:'ordOverView', label: 'Tax Amount', type: #AS_DATAPOINT}
so.tax_amount,
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
 /* Associations */
so.customer,
so.items,
@UI.selectionField: [ { position: 20 } ]
@UI.lineItem:  { position: 20, qualifier:'ordOverView', label: 'Customer' }
so.customer.company_name
}

After adjusting the card01_title in the i18n properties to Net/Tax Sales Orders, this will yield

Now if we wanted more fields we could change the List View to show in the list type extended which again we can just change in the manifest.json.

"card01": {  "model": "Z_OVP_DEMO_CDS",  "template": "sap.ovp.cards.list",  "settings": {  "title": "{{card01_title}}",  "category": "{{card01_category}}",  "subTitle": "{{card01_subTitle}}",  "entitySet": "Z_Ovp_Demo",  "listType": "extended",  "listFlavor": "bar",  "sortBy": "changed_at",  "sortOrder": "descending",  "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#ordOverView"  }  }

The extended list card presents five fields, on the top left side it shows the first two data fields and on the bottom it present the first data point value in a bar and the second and third data point on the right side of the card if they exist. To max out the fields shown we can add one additional field in our cds view. This time we will add the lifecycle status field. Modify your cds view as shown below and save and activate your changes.

@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
key so.sales_order_key,
 @UI.selectionField: [ { position: 10 } ]
 @Consumption.semanticObject: 'Action'
 @UI.lineItem:  [{ label: 'salesOrd', qualifier:'ordOverView',type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample'},    { position: 10, qualifier:'ordOverView', label: 'Sales Order'}]
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
 @UI.dataPoint: {title: 'Net Amt',      criticalityCalculation: {    improvementDirection: #TARGET,    deviationRangeLowValue: 100,    toleranceRangeLowValue: 400,    toleranceRangeHighValue: 800,    deviationRangeHighValue: 1200    },    valueFormat:{        numberOfFractionalDigits: 1    }}
@UI.lineItem:  { position: 30, qualifier:'ordOverView', label: 'Net Amount', type: #AS_DATAPOINT}
so.net_amount,
 @UI.dataPoint: {title: 'Tax Amt', valueFormat:{    numberOfFractionalDigits: 1
}}
 @UI.lineItem:  { position: 40, qualifier:'ordOverView', label: 'Tax Amount', type: #AS_DATAPOINT}
so.tax_amount,  @UI.dataPoint: {title: 'Lifecycle'}  
 @UI.lineItem:  { position: 50, qualifier:'ordOverView', label: 'Lifecycle', type: #AS_DATAPOINT}
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
 /* Associations */
so.customer,
so.items,
@UI.selectionField: [ { position: 20 } ]
@UI.lineItem:  { position: 20, qualifier:'ordOverView', label: 'Customer' }
so.customer.company_name
}

After refreshing the OVP application your should now see the additional fields showing.

In the next blog we will explore the use of the Stack Card and a Chart Card.

Creating a Fiori OVP Application with CDS view annotations - Part 3

↧

Creating a Fiori OVP Application with CDS view annotations - Part 3

July 5, 2016, 1:09 pm

Latest and popular articles on SAP ERP

≫ Next: SAP Web IDE local development with SAP HANA On Premise

≪ Previous: Creating a Fiori OVP Application with CDS view annotations - Part 2

In this blog we will add some additional OVP Cards to the application we created in the previous two blogs. If you haven't already done so, please review the first two blogs of the series, which can be found at

Creating a Fiori OVP Application with CDS view annotations - Part 1

Creating a Fiori OVP Application with CDS view annotations - Part 2

ADDING A STACK CARD TO THE OVP APPLICATION

The stack card relies on the annotations defined by @UI.headerInfo, @UI.identification and @UI.fieldGroup. Using the headerInfo annotation allows us to define a typeName which will be shown as the card header, as well as a title and header. In addition you can also utilize the annotation @UI.headerInfo.imageUrl to display an image next to the title and description. For the image, I will just hard card a value there, field mytestImg, due to the view not having a image field at this level.

These assignments will be as follows

@UI.headerInfo: {  typeNamePlural: 'Sales Orders',
imageUrl: 'mytestImg',  typeName: 'Sales Order',  title: {    label: 'Order ID',    value: 'sales_order_id'  },  description: {    label: 'Customer',    value: 'company_name'  }
}
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
....
 '/resources/sap/ui/core/mimes/logo/sap_50x26.png' as mytestImg,

The stack card has two clickable areas. The left side of the card, the white can be used to navigate to another app using semantic navigation. Clicking the right side will open up the card view. To assign the left side of the card's navigation point we will utilize the @UI.identification annotation as follows. This will also display within each card with the position identifying the layout.

@UI.identification: {type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample2', label: 'Nav Sample', position: '10'}

We can also add another button in each card using the same annotation. For this we can utilize the web_address field as the navigation path.

 @UI.identification: {type: #WITH_URL, label: 'Customer Site', url: 'web_address', position: '20'}
so.customer.web_address

Finally, we can define a fieldGroup to display some additional data in each card, but to utilize this we will have to add some additional local annotations in our Web IDE OVP application. We can do this by utilizing the Annotation Modeler of Web IDE, but lets first save and activate the CDS View.

@UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Email', position: '10', qualifier: 'cusContact'}
so.customer.email_address,
@UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Phone', position: '20', qualifier: 'cusContact'}
so.customer.phone_number,

The result of our changes necessary for our stack card should yield

@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
@UI.headerInfo: {  typeNamePlural: 'Sales Orders',
imageUrl: 'mytestImg',  typeName: 'Sales Order',  title: {    label: 'Order ID',    value: 'sales_order_id'  },  description: {    label: 'Customer',    value: 'company_name'  }
}
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
key so.sales_order_key,
@UI.selectionField: [ { position: 10 } ]
@Consumption.semanticObject: 'Action'
@UI.identification: {type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample2', label: 'Nav Sample', position: '10'}
@UI.lineItem:  [{ label: 'salesOrd', qualifier:'ordOverView',type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample'},    { position: 10, qualifier:'ordOverView', label: 'Sales Order'}]
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
@UI.dataPoint: {title: 'Net Amt',    criticalityCalculation: {    improvementDirection: #TARGET,    deviationRangeLowValue: 100,    toleranceRangeLowValue: 400,    toleranceRangeHighValue: 800,    deviationRangeHighValue: 1200    },    valueFormat:{        numberOfFractionalDigits: 1    }}
@UI.lineItem:  { position: 30, qualifier:'ordOverView', label: 'Net Amount', type: #AS_DATAPOINT} 
so.net_amount,
@UI.dataPoint: {title: 'Tax Amt', valueFormat:{    numberOfFractionalDigits: 1
}}
@UI.lineItem:  { position: 40, qualifier:'ordOverView', label: 'Tax Amount', type: #AS_DATAPOINT}
so.tax_amount,
@UI.dataPoint: {title: 'Lifecycle'}
@UI.lineItem:  { position: 50, qualifier:'ordOverView', label: 'Lifecycle', type: #AS_DATAPOINT}
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
/* Associations */
so.customer,
so.items,
@UI.selectionField: [ { position: 20 } ]
@UI.lineItem:  { position: 20, qualifier:'ordOverView', label: 'Customer',  }
so.customer.company_name,
@UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Email', position: '10', qualifier: 'cusContact'}
so.customer.email_address,
@UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Phone', position: '20', qualifier: 'cusContact'}
so.customer.phone_number, @UI.identification: {type: #WITH_URL, label: 'Customer Site', url: 'web_address', position: '20'}
so.customer.web_address
 '/resources/sap/ui/core/mimes/logo/sap_50x26.png' as mytestImg,
}

After saving and activating the CDS view changes we can now add the Stack Card to the application. In your OVP Application add a Stack Card as shown

This will yield the card

The card has two clickable areas, the white area and also the blue area. Clicking on the white area relies on the first @UI.identification and clicking on the blue area which opens the cards results in

Choosing the Customer Site button will navigate us to the url provided by the field web_address and the Nav Sample button we take us to a predefined navigation sample app.

Adding the Field Group

To utilize the field group, it's necessary to add some additional annotations utilizing the Annotation Modeler. To do this let's first right click on the Web IDE project's webapp folder and choose New -> folder and name it annotations. Now right click on the annotations folder and choose New -> Annotation File and provide the values

choose Next and Finish to complete the process. In addition to creating the file, this process will add an additional entry in the manifest.json declaring a local annotation. Right click on the new annotation file and choose Open With -> Annotation Modeler. When the editor opens, choose the Annotate button next to the OData Entity Set.

Select the node Local Annotations and then choose the add button under actions.

Choose the annotation UI.Facets and choose OK.

Now with the Facet annotation selected, choose the add button and add a ReferenceFacet to it.

Finally assign the fieldGroup to the ReferenceFacet by setting the Annotation property to the FieldGroup Qualifier cusContact and Save your changes.

After refreshing your app your stack card should now look like

ADDING A CHART CARD TO THE OVP APPLICATION

OVP applications have the ability to show numerous types of analytical charts. In this example we will add a line chart, but the procedure is the same form any type of chart card. CDS views provide the annotation @UI.chart which contain the majority of the information related to the card. To adjust the displayed data we can also utilize the annotation @UI.presentationVariant, which allows grouping and sorting or data, and the annotation @UI.selectionVariant, which allows filtering of data. Additionally, the annotation @UI.dataPoint is available to display a KPI value in the card header as well as the annotation @UI.identification to define a navigation path.

In our CDS view lets first define a line chart as follows in the view area.

@UI.chart:[{    qualifier: 'ordNetChart',    title:'Order Net Amount',    chartType: #LINE,    dimensions: ['sales_order_id'],    measures: ['net_amount', 'tax_amount'],    dimensionAttributes: {dimension: 'sales_order_id', role:#SERIES},    measureAttributes: [{measure: 'net_amount', role: #AXIS_1}, {measure: 'tax_amount', role: #AXIS_1}]
 }]

To limit the amount of data we see in our chart we can utilize the presentation variant annotation which we can use to sort the data in addition to limiting the results returned. This is also a view level annotation so we can add it under our chart.

@UI.presentationVariant: [{qualifier: 'top5Changed', maxItems: '5',  sortOrder.by: 'changed_at', sortOrder.direction: #DESC }]n: #DESC }]

For the example we can define a static field myTarget which we used to display in the KPI header area using the @UI.dataPoint annotation.

 @UI.dataPoint:{title: 'Order Target Value', criticalityCalculation: {        improvementDirection: #MAXIMIZE,         toleranceRangeLowValue: 8000,         deviationRangeLowValue: 9000} }    10000.00 as myTarget,

The resulting CDS view should now be

@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
@UI.headerInfo: {  typeNamePlural: 'Sales Orders',  imageUrl: 'mytestImg',  typeName: 'Sales Order',  title: {    label: 'Order ID',    value: 'sales_order_id'  },  description: {    label: 'Customer',    value: 'company_name'  }
}
@UI.chart:[{    qualifier: 'ordNetChart',    title:'Order Net Amount',    chartType: #LINE,    dimensions: ['sales_order_id'],    measures: ['net_amount', 'tax_amount'],    dimensionAttributes: {dimension: 'sales_order_id', role:#SERIES},    measureAttributes: [{measure: 'net_amount', role: #AXIS_1}, {measure: 'tax_amount', role: #AXIS_1}]
 }]
@UI.presentationVariant: [{qualifier: 'top5Changed', maxItems: '5',  sortOrder.by: 'changed_at', sortOrder.direction: #DESC }]
define view Z_Ovp_Demo
as select from sepm_cds_sales_order as so
{
key so.sales_order_key,    @Consumption.semanticObject: 'Action'    @UI.identification: {type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample2', label: 'Nav Sample', position: '10'}    @UI.lineItem:  [{ label: 'salesOrd', qualifier:'ordOverView',type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample'},      { position: 10, qualifier:'ordOverView', label: 'Sales Order'}]    @UI.selectionField: [ { position: '10' } ]    so.sales_order_id,    so.created_by,    so.created_at,    so.changed_by,    so.changed_at,    so.note_guid,    so.currency_code,    '/resources/sap/ui/core/mimes/logo/sap_50x26.png' as mytestImg,    @UI.dataPoint:{title: 'For Charts', referencePeriod.end: 'created_at', criticalityCalculation: {        improvementDirection: #MAXIMIZE,         toleranceRangeLowValue: 1000,         deviationRangeLowValue: 4000}}    so.gross_amount,    @UI.dataPoint:{title: 'Order Target Value', criticalityCalculation: {        improvementDirection: #MAXIMIZE,         toleranceRangeLowValue: 8000,         deviationRangeLowValue: 9000} }    10000.00 as myTarget,    @UI.dataPoint: {title: 'Net Amt',       criticalityCalculation: {        improvementDirection: #TARGET,        deviationRangeLowValue: 100,        toleranceRangeLowValue: 400,        toleranceRangeHighValue: 800,        deviationRangeHighValue: 1200        },        valueFormat:{          numberOfFractionalDigits: 1        }}    @UI.lineItem:  [{ position: 30, qualifier:'ordOverView', label: 'Net Amount',  type: #AS_DATAPOINT},{qualifier: 'chartLineItem'}]    so.net_amount,    @UI.dataPoint: {title: 'Tax Amt', valueFormat:{      numberOfFractionalDigits: 1    }}    @UI.lineItem:  { position: 40, qualifier:'ordOverView', label: 'Tax Amount', type: #AS_DATAPOINT}    so.tax_amount,    @UI.dataPoint: {title: 'Lifecycle'}    @UI.lineItem:  { position: 50, qualifier:'ordOverView', label: 'Lifecycle', type: #AS_DATAPOINT}    so.lifecycle_status,    so.billing_status,    so.delivery_status,    so.buyer_guid,    /* Associations */    so.customer,    so.items,    @UI.lineItem:  { position: 20, qualifier:'ordOverView', label: 'Customer' }    @UI.selectionField: [ { position: '20' } ]    @UI.identification: [{label: 'Customer', position: '10'}]    so.customer.company_name,    @UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Email', position: '10', qualifier: 'cusContact'}    so.customer.email_address,    @UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Phone', position: '20', qualifier: 'cusContact'}    so.customer.phone_number,    @UI.identification: {type: #WITH_URL, label: 'Customer Site', url: 'web_address', position: '20'}    so.customer.web_address
}

After saving and activating the CDS view add another card to define a Line Chart. Define the card as

The should result in the card

↧

SAP Web IDE local development with SAP HANA On Premise

July 6, 2016, 4:23 pm

Latest and popular articles on SAP ERP

≫ Next: Check versions of SAPUI5 on ABAP and JAVA stacks

≪ Previous: Creating a Fiori OVP Application with CDS view annotations - Part 3

In this post I will show how to develop a basic SAP UI5 app locally using OData service located in a SAP HANA On Premise server. I will also show how to take the app to the same SAP HANA server. My OS is windows, but you can easy make analogous steps if you are woking in MacOSx.

Getting SAP Web IDE

First, you will need a SAP Web IDE local installation.

You can download it from this site.

It is really easy to install this new version. You only have to extract the downloaded zip file and execute the orion server.

Details are in this page.

After you have a SAP Web IDE local installation, you better create a user account in your local server in order you can make SAP UI5 applications.

The SAP Web IDE project

To make a new project you can follow the File > New > Project from Template route.

In this case, I will use SAPUI5 Application with the SAPUI5 Innovation (Recommended) version.

For this project I choose tileMetrics as the project name and demo.project as the namespace. Also, I will work with XML views and this first view will be named Main.

This is what you have when you run the app for this first time.

On the root directory (tileMetrics in my case) I will create another folder: webservice.

In this folder I'm going to create the .xsodata file for de OData webservice: demo.xsodata

service  {   "MDMUSER"."V_METRICS"   as "DemoNumber"   key  ("CONCEPT");
}

MDMUSER.V_METRICS is a view that runs queries on tables to get numbers like the total count of rows, the total count when a column is null, etc.

For now, this is our site structure:

We also need the .xsaccess and .xsapp file next to .project.json and neo.app.json.

For now, we need to define a project in SAP HANA wih the same structure than this SAP Web IDE project.

Destination file

Depending of your extraction route of the zip file that you downloaded first, you have a similar route like this: C:\SAPWebIDE\eclipse\config_master\service.destinations\destinations.

This route exists only after you create a user for SAP Web IDE.

In that directory, you will crete a file with no extension with the connection information to you SAP HANA server.

In my case, this is the content:

Description=Webservices demonstration
Name=demo
Type=HTTP
URL=http://XX.XX.X.XX:XXXX
ProxyType=Internet
Authentication=BasicAuthentication
WebIDEEnabled=true
WebIDESystem=demo
WebIDEUsage=odata_gen

Back to the SAP Web IDE project

We need to configure this OData service.

With the right click on the root directory, you follow the route: New > OData Service

This image shows you which are the parameters that you need to set and finish the configuration:

Then you need to relate this OData service with you project. So, inside webapp directory you will find manifest.json. In that file you will have a dataSources section, that reflects the configuration that you have already done.

In manifest.json you can also find models section. We need to add the dataSource in this models section.

Till now, the app still showing nothing, but this is about to change now.

You need to modify the Main view to paint a tile with the numbers that we're extracting from the webservice.

Inside the content tag of the Main view, write something like this:

<TileContainer tiles="{demo>/DemoNumber}" id="demoContainer" allowAdd="false" editable="false">                <StandardTile number="{demo>TOTAL}" title="{demo>CONCEPT}" numberUnit="rows" info="SAP" icon="sap-icon://sys-monitor"/>            </TileContainer>

If you run the app, now you will see this:

You can try changing the window size and see what happens.

Moving to SAP HANA server

In order to move this simple app to the SAP HANA server, we need to add a new dataSource in the manifest.json file and change the model.

Now you can export tileMetics directory and put it in you SAP HANA project.

I always modify the SAP UI5 CORE resources directory parameter to: https://openui5.hana.ondemand.com/resources/sap-ui-core.js in the index.html file.

SAP UI5 app on SAP HANA server On Premise:

Please let me know if you have any questions.

↧

Check versions of SAPUI5 on ABAP and JAVA stacks

July 13, 2016, 5:10 am

Latest and popular articles on SAP ERP

≫ Next: Tips for beginners to learn SAPUI5

≪ Previous: SAP Web IDE local development with SAP HANA On Premise

While checking the version of SAPUI5 libraries on the ABAP stack is widely known, I could not find anything to check the version on the JAVA stack.

One way to see the version is to go to anything UI5 in portal and press CTRL+SHIFT+ALT+P. This will provide you an SAPUI5 version, only for the stack you indicated the libraries should be consumed from.

For finding the version on the ABAP stack, there are several posts letting you know you can use the following URL:

http://<host>:<port>/sap/public/bc/ui5_ui5/

But for the JAVA stack, I had to open an incident to find out there is a URL for that also:

http://<host>:<port>/sapui5/resources/sap/m/.library

We have found that while we consume the libraries from the ABAP stack, we build our theme for the FFP on the JAVA stack and if the versions are not kept in sync, we see inconsistencies in the theme.

↧

Tips for beginners to learn SAPUI5

July 15, 2016, 1:04 am

Latest and popular articles on SAP ERP

≪ Previous: Check versions of SAPUI5 on ABAP and JAVA stacks

When I started learning sapui5 in the beginning I did not know how to approach this technology . Where to start with and what are the skill

I need to be strong in to Learn this course so here I am sharing my experience of UI5 journey Hope it will be helpful.

STEP :1

Try to Learn HTML,JAVASCRIPT,CSS it will be very helpful. There are few online platform to learn these code like W3 schools , Code academy, JS garden etc.

I will recommend W3 schools for HTML and CSS . For JAVASCRIPT code academy is a better option.

As sapui5 is a new technology you will find very few good book .

Getting started with sapui5is a good book from SAP Press which is a very good to Learn UI5.

To be good at any user experience technology you need to enhance user design thinking capability for that I will recommend to go through various website and several course is available to give you a fair idea about it.

STEP :2

SAP provides a Tool called BUILD which involves only drag and drop no coding is involved so you can design and visualize the APP you are going to build.

https://www.experiencesplash.com/splashapp/ this is the link to BUILD.

After going through all the above topic its time to do some coding.

Eclipse is a good platform to start UI5 coding . It is very flexible also give you adequate scope to do good amount of coding.

SAPUI5 SDK - Demo Kit is a website contains all the tutorial segregated by topics you can refer and learn UI5.

It also contains many control and its code which will make coding Easy.

SAPUI5 Explored is there in SAPUI5 DEMO Kit which contains lot of control here the view is in XML Language so while coding in XML it is quit useful.

Now you know coding language , you have the idea of design and you have different controls to help you

So you can create as many kind of App as possible.

SCN(SAP community Network) , Stack Overflow are some good website where you can query and can get your doubt resolved.

STEP:3

SAP provides several course on its portal openSap which is a good way to Learn thinks about SAP. Here is the URL open.sap.com/courses .Build Your Own SAP Fiori App in the Cloud ,

Developing Web Apps in Sap ui5 are two good course Related to SAPUI5 you should Learn.

Now its time to switch from Eclipse To SAP Web IDE a cloud based Platform To code and your project will be saved in cloud so you can access it anywhere.

SAP Web IDE provides different Template to make UI5 easier.

You can contribute to SCN by actively participating and can Learn New things about SAP UI5.

WelCome To SAPUI5

Regards

Ansuman

↧