Complete End-To-End ABAP For HANA 7.4 SP 09 Development

Hi All,

Simply this blog contains complete end to end development of Fiori-Like Application……and I hope, it will be helpful for beginners

Steps Involved For Displaying Flight Details:

1. Creation of ABAP CDS view.
2. Creation of Gateway O Data service.
3. Testing of GW service in Gateway client.
4. Creation of FIORI-Like App.
5. Deployment of SAP UI5 Application to ABAP Back-End.

Lets start……

1. Creation of ABAP CDS view.

          –  Go to HANA studio ABAP perspective and Choose the package in which you want to create CDS view. Right click on package – New – Other ABAP                Repository object – DDL source – Next

          –  Provide Name and Description

          –  It seems like below

• Check & Activate.
• Right click on new created DDL source i.e. ZCDS_FL and click on open data preview.

• Same CDS view physically available/accessible in SE11

2.  Creation of Gateway O Data services

• Now let’s create O Data service which will fetch data (i.e. Query) from ZCDS_FL_SQL.
• In terms of O Data, HTTP and ABAP we need apply operation QUERY, GET and Select * from <Table> into @data(ITAB) respectively.
• Go to SEGW t-code and create new project ZFlight_Detail
  
• Now right on Data Model and Import – DDIC structure option – Provide ABAP DDIC structure name i.e.ZCDS_FL_SQL as well as Entity Name.

• Click Next and select required fields.

• In next step mark check as key for FLIGHT_ID and CONNID and click Finish.
• At a same time Entity Set has been created because earlier we have marked check box for create default entity set(it’s SP 09 😉 ).
• Now let’s play with runtime artifacts – Click on generate runtime objects(red and white circle) and it will pop up below screen – click enter button.

• On successful creation we will see the below screen(plenty of green symbols 😎 )

• Now register you service under service maintenance folder.

• Click ok will get message service created….Yah we have maintained service… 🙂
• Now for fetching data from DDIC artifacts ZCDS_FL_SQL we need to implement Query operation i.e. code based implementation…….
• Now Open runtime artifacts and right click on class ZCL_FLIGHT_DETAIL_DPC_EXT – click on Go To ABAP Workbench.
• In Edit mode redefine ZFLIGHT_DETAILSE_GET_ENTITYSET i.e. nothing but a implementation Query operation that results multiple rows.

• We are fetching complete set of records. Below is the code.

• Yahhh… we have done with coding part. Lets move toward for testing GW service

3. Testing of gateway service in gateway client.

• Now click on SAP Gateway Client under IFC Nodes box screen either you can use t-code /IWFND/GW_CLIENT

• Click on entity set name – select Zflight_DetailSet
• It will generate automatic URI like below and hit execute button.

• Status code 200 means its working fine…
• Same we can test in web browser (Just copy link from above screen)http://XXXXXXXXXXXXXXXXX/sap/opu/odata/sap/ZFLIGHT_DETAIL_SRV/Zflight_DetailSet/
• After hitting above link in browser it will ask user ID and password which will be your SAP credentials and results output.

4. Creation of FIORI-Like App.

• Open ABAP Prespective – Right click in the project explorer – New – Others
• Type SAPUI and select application project

• Hit next and provide project name.

• After creation of project it seems like below.

• Double click on MAIN.view.xml and paste below code 😛

<core:View xmlns:core=“sap.ui.core” xmlns:mvc=“sap.ui.core.mvc” xmlns=“sap.m”

              controllerName=“zcds_fiori.MAIN” xmlns:html=“http://www.w3.org/1999/xhtml“>

       <Page title=“Flight Details”>

              <content>

       <Table id=“idProductsTable”

              inset=“false”

              items=“{path:/Zflight_DetailSet’,

              sorter:{path:’FlightId’,

              descending:false}

              }”>

              <columns>

                     <Column> <Text text=“Flight ID” /> </Column>

                     <Column> <Text text=“Flight Number” /> </Column>

                     <Column> <Text text=“Flight Date” /> </Column>

                     <Column> <Text text=“Plane Type” /> </Column>

                     <Column> <Text text=“Price” /> </Column>

                     <Column> <Text text=“Currency” /> </Column>

                     <Column> <Text text=“Flight Name” /> </Column>

              </columns>

              <items>

                     <ColumnListItem>

                           <cells>

                                  <Text text=“{FlightId}” />

                                  <Text text=“{Connid}” />

                                  <Text text=“{Fldate}” />

                                  <Text text=“{Planetype}” />

                                  <Text text=“{Price}” />

                                  <Text text=“{Currency}” />

                                  <Text text=“{RhFligntName}” />

                           </cells>

                     </ColumnListItem>

              </items>

       </Table> </content>

       </Page>

</core:View>

• Now go to MAIN.controller.js and paste below code.

onInit: function() {

       var oModel = new sap.ui.model.odata.ODataModel(“http://XXXXXXXX/sap/opu/odata/sap/ZFLIGHT_DETAIL_SRV/“,false);

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

       this.getView().setModel(oModel);

       },

Note : ‘XXXXXXXXX’ would be your server path.

• Save and right click on ZCDS_FIORI –  Run As – Web App Preview and result is below

• Now go to browser and paste URL which is generated in index.html
• If everything went right then its time to celebrate….. 🙂

Result :

5.Deployment of SAP UI5 Application to ABAP Back-End

• Well for deployment option you can refer below document.

          http://scn.sap.com/docs/DOC-42820

Most welcome for expert suggestions……

– Cheers

   Amol