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

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

- > How to Deploy and Run SAPUI5 application on ABAP Server

Source: scn.sap.com