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:Viewxmlns: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">

       <Pagetitle="Flight Details">

              <content>

       <Tableid="idProductsTable"

              inset="false"

              items="{path:/Zflight_DetailSet',

              sorter:{path:'FlightId',

              descending:false}

              }">

              <columns>

                     <Column><Texttext="Flight ID"/></Column>

                     <Column><Texttext="Flight Number"/></Column>

                     <Column><Texttext="Flight Date"/></Column>

                     <Column><Texttext="Plane Type"/></Column>

                     <Column><Texttext="Price"/></Column>

                     <Column><Texttext="Currency"/></Column>

                     <Column><Texttext="Flight Name"/></Column>

              </columns>

              <items>

                     <ColumnListItem>

                           <cells>

                                  <Texttext="{FlightId}"/>

                                  <Texttext="{Connid}"/>

                                  <Texttext="{Fldate}"/>

                                  <Texttext="{Planetype}"/>

                                  <Texttext="{Price}"/>

                                  <Texttext="{Currency}"/>

                                  <Texttext="{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