Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
amol_samte
Contributor

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 :wink: ).
  • 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 :cool: )

  • Now register you service under service maintenance folder.

    

  • Click ok will get message service created....Yah we have maintained service... :smile:
  • 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.



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 :razz:

<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..... :smile:


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

32 Comments
Labels in this area