Skip to Content

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

     cds.JPG

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

cds.JPG

  • Same CDS view physically available/accessible in SE11

  cds.JPG

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
    O data.JPG
  • 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.

O data.JPG

  • Click Next and select required fields.

O data.JPG

  • 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.

O data.JPG

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

O data.JPG

  • Now register you service under service maintenance folder.

     O data.JPG

  • 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.

O data.JPG

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

O data.JPG

  • 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

O data.JPG

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

O data.JPG



4. Creation of FIORI-Like App.

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

Capture.JPG

  • Hit next and provide project name.

Capture.JPG

Capture.JPG

  • After creation of project it seems like below.

Capture.JPG

  • 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

Capture.JPG



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


Result :

Capture.JPG

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

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