ABAP Repository & Fiori Application

In this tutorial we are going to integrate some ABAP concepts with SAPUI5 Fiori applications.
Now we will use all the Procurement data model and will be exposed as OData service with associations and navigation between SNWD_AD (Business Partners Address) and SNWD_BPA (Business Partners complementary info), SNWD_SO_INV_HEAD (Sales orders header) and SNWD_SO_INV_ITEMS (Sales orders items).

procurement-data-model_short

Prerequisites:

Step-by-Step:

Core Data Service View

In eclipse IDE, open the ABAP perspective.

00

Connect to ABAP project and create a new ABAP Repository Object in the ZTEST Package.

01

Select Data Definition from Core Data Services folder and press Next.

02

Set the name ZCDS_BPA, set a description and press Next.

02

Select the transport “Test Request”, and press Finish.

03

In the CDS created set this code.

@AbapCatalog.sqlViewName: ‘ZV_CDS_BPA’
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: ‘Business Partners Main Info’
define view zcdsv_bpa as select from snwd_ad as ad
join snwd_bpa as bpa
on ad.client = bpa.client and ad.node_key = bpa.address_guid
{
key ad.client as client_id,
key ad.node_key as addres_key,
ad.building as building,
ad.city as city,
ad.country as country,
bpa.company_name as company_name,
bpa.node_key as company_key,
bpa.bp_role as company_role,
bpa.currency_code as company_currency
}

Create another CDS view named zcds_inv_header with this code

@AbapCatalog.sqlViewName: ‘ZV_CDS_INV_HEAD’
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: ‘Sales Order Invoices Header’
define view zcds_inv_header as select from snwd_so_inv_head as so
{
key so.client as client_id,
key so.buyer_guid as buyer_guid,
so.node_key as node_key,
so.created_at as created_at,
so.gross_amount as gross_amount,
so.net_amount as net_amount,
so.tax_amount as tax_amount,
so.currency_code as currency_code,
so.payment_status as payment_status
}

Create another CDS view named zcds_inv_items with this code

@AbapCatalog.sqlViewName: ‘ZV_CDS_INV_ITEMS’
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: ‘Sales Order Invoices Items’
define view zcds_inv_items as select from snwd_so_inv_item as it
{
key it.client as client_id,
key it.parent_key as parent_key,
it.so_item_guid as so_item_guid,
it.gross_amount as gross_amount,
it.quantity as net_amount,
it.tax_amount as tax_amount,
it.currency_code as currency_code,
it.product_guid as product_guid
}

Save and activate all CDS views.

03_B


OData Service

Now we will to create an OData service using our CDS view as data source.
1. Click on Run ABAP Development Object
2. Set segw.
3. Select SEGW transaction and press OK.
If you have problems with this transaction in eclipse, you can use it with SAP GUI instead.

04

1. Press on Create Project.
2. Set the values as the image shown.
3. Press OK.

05

Open the created project and right click on Data Model and select Import / DDIC Structure.

06

  • Name: BPA_Info
  • Select Entity Type
  • ABAP Structure: ZV_CDS_BPA
  • Check Create Default Entity Set
  • Press Next

07

From Data Source Parameter(s), select all the fields less CLIENT_ID and press Next.

08

Select ADDRES_KEY as key values. Press Finish.

09

Repeat the import process for:

  • Name: INV_HEAD_Info
  • ABAP Structure: ZV_CDS_INV_HEAD
  • Key: NodeKey

And

  • Name: INV_ITEMS_Info
  • ABAP Structure: ZV_CDS_INV_ITEMS
  • Key: ParentKey, SoItemGuid

Yours Entities should look like this.

10

We need to create the association between the entities created. Right click on Associations folder and select Create.

11

Name: ToSalesOrderInfo

  • Principal Entity:
    • Name: BPA_Info
    • Cardinality: 1
    • Navigation: ToSalesOrderInfo
  • Depend Entity:
    • Name: INV_HEAD_Info
    • Cardinality: 1..n

Press Next

12

  • Principal Key: AddresKey
  • Dependent Property: BuyerGuid

Press Next

13

The association should looks like this. Press Finish.

14

Create another Association:

Name: ToSalesOrderItemsInfo

  • Principal Entity:
    • Name: INV_HEAD_Info
    • Cardinality: 1
    • Navigation: ToSalesOrderItemsInfo
  • Depend Entity:
    • Name: INV_ITEMS_Info
    • Cardinality: 1..n

Press Next

15

  • Principal Key: NodeKey
  • Dependent Property: ParentKey

Press Next

16

The second association should looks like this. Press Finish

17

The associations should looks like this.

18

Save all the changes and click on Generate Runtime Objects

19

The system shows you the default names of some objects that will be created (don’t change). Press OK.

20

Select ZTEST package and save

21

Select the request “Test Request” and press OK.

22

You should to see several success messages.

23

In Service Implementation right click on BPA_InfoSet and select Map to Data Source.

24

  1. Target: Local
  2. Click on button

25

  • Type: Data Dictionary
  • Model: ZV_CDS_BPA

26

Your Map should look like this. Press OK

27

Repeat the Map process to the ZV_CDS_INV_HEAD.

28

Repeat the Map process to the ZV_CDS_INV_ITEMS.

29

For each map created is necessary set the ELEMENT in every Property field

30

For BPA_InfoSet mapping the relationship should looks like this.

31

For INV_HEAD_InfoSet mapping the relationship should looks like this.

32

For INV_ITEMS_InfoSet mapping the relationship should looks like this.

33

Save all the changes and click on Generate Runtime Objects

34

  • Double click on Service Maintenance
  • Select GW_HUB
  • Press Register

35

To register your project as service, your info should look like the image shown and the package related is ZTEST. Press OK.

36

  • Check the registration status as green.
  • Press Maintain

37

You will be redirected to the Services Manager. Press Yes

38

Select the service. Press on SAP Gateway Client

39

1. Press Execute.
2. Check the result.
Your OData service is working fine.

40


Fiori Application

You can use your CDS view in yours Fiori application too. In eclipse IDE create a new project. Right click on project explorer view / New / Other

41

Select Application Project from SAPUI5 Application Development folder. Press Next

42

  • Set the name ZE2E_CDS_FIORI
  • Uncheck the option create an initial view.

Press Finish

43

Create a new folder in WebContent named view

44

Create a new file in view folder

45

The view file is named bpa.view.xml Press Finish

46

Set this code in the file bpa.view.xml

<mvc:View xmlns=”sap.m” xmlns:mvc=”sap.ui.core.mvc” xmlns:core=”sap.ui.core”
xmlns:l=”sap.ui.layout” xmlns:f=”sap.ui.layout.form” controllerName=”cds.ui5.controller.bpa”>
<App id=”bpa”>
<pages>
<Page title=”BPA List with SAPUI5″>
<content>
<IconTabBar id=”idTopLevelIconTabBar”>
<items>
<IconTabFilter id=”tableTab” text=”{i18n>tableFilter}”>
<content>
<Table id=”table” headerText=”{i18n>bpaTitle}”
items=”{/BPA_InfoSet}”>
<columns>
<Column>
<header>
<Label text=”Addres Key”></Label>
</header>
</Column>
<Column>
<header>
<Label text=”City”></Label>
</header>
</Column>
<Column>
<header>
<Label text=”Country”></Label>
</header>
</Column>
<Column>
<header>
<Label text=”Company Name”></Label>
</header>
</Column>
<Column>
<header>
<Label text=”Company Role”></Label>
</header>
</Column>
<Column>
<header>
<Label text=”Currency”></Label>
</header>
</Column>
<Column>
<header>
<Label text=”Building”></Label>
</header>
</Column>
</columns>
<ColumnListItem type=”Action” press=”onPress”>
<cells>
<Text text=”{AddresKey}” />
<Text text=”{City}” />
<Text text=”{Country}” />
<Text text=”{CompanyName}” />
<Text text=”{CompanyRole}” />
<Text text=”{CompanyCurrency}” />
<Text text=”{Building}” />
</cells>
</ColumnListItem>
</Table>
</content>
</IconTabFilter>
</items>
</IconTabBar>
</content>
</Page>
</pages>
</App>
</mvc:View>

Create a new folder in WebContent named controller

47

The controller file is named bpa.controller.js Press Finish

48

Set this code in the file bpa.controller.js

sap.ui.define([ “sap/ui/core/mvc/Controller”
], function (Controller) {
“use strict” ;
return Controller.extend( “cds.ui5.controller.bpa” , {
});
});

Create a new file in WebContent folder named Component.js

49

Set this code in the file Component.js

sap.ui.define([ “sap/ui/core/UIComponent”], function(UIComponent) {
“use strict”;
return UIComponent.extend(“cds.ui5.Component”, {
metadata : {
manifest : “json”
},
init : function() {
UIComponent.prototype.init.apply(this, arguments);
}
});
})

Create a new file in WebContent folder named manifest.json

50

Set this code in the file manifest.json

{
“_version”: “1.3.0”,
“sap.app”: {
“_version”: “1.3.0”,
“id”: “cds.ui5”,
“type”: “application”,
“i18n”: “i18n/i18n.properties”,
“title”: “{{appTitle}}”,
“description”: “{{appDescription}}”,
“applicationVersion”: {
“version”: “1.0.0”
},
“dataSources”: {
“cdsOData”: {
“uri”: “/sap/opu/odata/sap/ZE2E_INVOICES_SRV”,
“type”: “OData”,
“settings”: {
“odataVersion”: “2.0”
}
}
}
},
“sap.ui”: {
“_version”: “1.3.0”,
“technology”: “UI5”,
“deviceTypes”: {
“desktop”: true,
“tablet”: true,
“phone”: true
},
“supportedThemes”: [
“sap_bluecrystal”
]
},
“sap.ui5”: {
“_version”: “1.2.0”,
“rootView”: {
“viewName”: “cds.ui5.view.bpa”,
“type”: “XML”,
“id”: “bpa”
},
“models”: {
“i18n”: {
“type”: “sap.ui.model.resource.ResourceModel”,
“settings”: {
“bundleName”: “cds.ui5.i18n.i18n”
}
},
“”: {
“dataSource”: “cdsOData”
}
},
“routing”: {
“config”: {
“routerClass”: “sap.m.routing.Router”,
“viewType”: “XML”,
“viewPath”: “cds.ui5.view”,
“controlId”: “bpa”,
“controlAggregation”: “pages”,
“transition”: “slide”
},
“routes”: [{
“pattern”: “”,
“name”: “bpa”,
“target”: [
“bpa”
]
}],
“targets”: {
“bpa”: {
“viewName”: “bpa”,
“viewId”: “bpa”,
“viewLevel” : 1
}
}
},
“autoPrefixId”: true,
“dependencies”: {
“minUI5Version”: “1.34”,
“libs”: {
“sap.ui.core”: {
“minVersion”: “1.34.0”
},
“sap.m”: {
“minVersion”: “1.34.0”
},
“sap.ui.layout”: {
“minVersion”: “1.34.0”
}
}
},
“contentDensities”: {
“compact”: true,
“cozy”: true
}
}
}

  1. Create a new folder in WebContent named i18n.
  2. Create a new file in i18n folder named i18n.properties

51

Set this code in the file i18n.properties

# App Descriptor
appTitle= BPA Application
appDescription= ABAP Repository and Fiori App
# Tabs
tableFilter= BPA
bpaTitle= Business Partners

Create a new file in root project folder named neo-app.json

52

Set this code in the file neo-app.json

{
“welcomeFile” : “index.html”,
“routes” : [
{
“path” : “/resources”,
“target” : {
“type” : “service”,
“name” : “sapui5”,
“version” : “snapshot”,
“entryPath” : “/resources”
},
“description” : “SAPUI5 Resources”
},
{
“path” : “/test-resources”,
“target” : {
“type” : “service”,
“name” : “sapui5”,
“entryPath” : “/test-resources”
},
“description” : “SAPUI5 Test Resources”
},
{
“path” : “/sap/opu/odata/sap/ZE2E_INVOICES_SRV”,
“target” : {
“type” : “OData”,
“name” : “cdsOData”
},
“description” : “ABAP Repository Demo Service”
}
]
}

Right click on ZE2E_CDS_FIORI project / Team / Share Project

53

Select SAPUI5 ABAP Repository. Press Next.

54

Select your Connection using the Browser button. Press Next.

55

Set the connection parameters.

  • Client: 001
  • User: DEVELOPER
  • Password: Appl1ance

Press Next.

56

Create a new BSP Application.

  • Name: ZE2E_CDS_FIORI
  • Description: Free info
  • Package: ZTEST

Press Next.

57

Select the transport Test Request, Press Finish.

58

A warning will appear. Check the Do Not Show This Again option and press OK.

59

Right click on ZE2E_CDS_FIORI project / Team / Submit
This send the project to the server

60

Select All and Finish

61

Right click on index.html / Run As / Run on ABAP Server

62

Set the connection parameters.

  • User: developer
  • Password: Appl1ance

63

The Fiori application is running fine.

64

 

spanish-version

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s