Skip to Content

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

To report this post you need to login first.

31 Comments

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

    1. Shalini Krishnamoorthy

      Hi Amol,

      I have a CDS View

      @AbapCatalog.sqlViewName: ‘XXX’

      @AbapCatalog.compiler.compareFilter: true

      @AccessControl.authorizationCheck: #NOT_REQUIRED

      @EndUserText.label: ‘Admission data of students in an org./program of study’

      define view XXX

      with parameters p_idate:begdatum, //format YYYYMMDD (eg: 20150820 for 20-Aug-2015)

                      p_lang:abap.lang

      as select from YYY…..

      I followed the above steps and created a OData service with all required mapping (till step 3 above). However if I give the URL as :

      /sap/opu/odata/SAP/ZPIQ_CDS_TEST_SRV/AdmissionDataSet?$format=xml

      I get an exception: LCX_MISSING_PARAMETER

      I want to know how to adjust the service URL for consuming CDS Views with parameter.

      Thanks!

      (0) 
      1. Amol Samte Post author

        Hi,

        Have you passed CDS parameter  during fetching data i.e..

        E.g.

        SELECT * FROM zcds_view( P_CARRID = ‘AC’ )
        INTO CORRESPONDING FIELDS OF TABLE @et_entityset.



        -Amol S



        (0) 
        1. Shalini Krishnamoorthy

          Hi Amol,

          Yes, if I pass while fetching data it will come fine:

          SELECT * FROM Zcds_XXX( p_idate = @sydatum,

             p_lang = @sylangu ) INTO CORRESPONDING FIELDS OF TABLE @et_entityset  UP TO 100 ROWS.

          However if I want to pass p_idate and p_lang while calling the service, how to do it?

          Basically these will be the inputs coming from the UI.

          (0) 
          1. Amol Samte Post author

            Hi Shalini,

            Ok I got it.

            Request URI : sap/opu/odata/SAP/ZPIQ_CDS_TEST_SRV/AdmissionDataSet?$filter=idate eq ‘YYYYYMMDD’ AND lang eq ‘language’

            Note : idate & lang fields equal to fields in entity type.

                      

            In code :

            1.You will get date and language in importing parameter  IT_FILTER_SELECT_OPTIONS

            2.Read date and language and pass it in input as a variable  coupled with select query

            e.g.

            SELECT * FROM zcds_view( p_date = @lw_date )

                          INTO CORRESPONDING FIELDS OF TABLE @et_entityset

            -Amol S

            (0) 
            1. Shalini Krishnamoorthy

              Hi Amol,

              I do not have idate in the entity – I have begin and end date in the entity. In the CDS View, I will check if idate falls between begin and end date and fetch those records alone.Again these dates will be a part of the backend tables and not in the final CDS View.

              Thanks,

              (0) 
              1. Amol Samte Post author

                Hi Shalini,

                well for this

                you can go with function import or cascade it in function module.

                But one thing you need to do rework 😉

                -Amol S

                (0) 
  1. Bert Deterd

    Nice blog. Thanks.

    Was wondering why you create the odata service manually in SEGW?

    There is an @OData.publish: true annotation which can be used in CDS views. Is this annotation only available in 7.50?

    (0) 
    1. RAHUL JAIN

      Hi Bert,

      I followed the steps to publish the odata service via cds view as mentioned in the below url: http://help.sap.com/saphelp_nw75/helpdata/en/79/cb3bf4eafd4af9b39bc6842e5be8bd/content.htm?frameset=/en/4e/d1d1106e391014adc9fffe4e204223/frameset.htm&current_toc=/en/4e/d1d1106e391014adc9fffe4e204223/plain.htm&node_id=27&show_children=false

      After maintaining of service i tested it and it works fine. But when i want to see the same service in SEGW tcode it says that service does not exist.

      Could you please help me on this? Currently working on 7.5 .

      (0) 
        1. RAHUL JAIN

          Thanks Thomas for your instant response.

          As us said @OData.publish: true does not generate a SEGW project, then if i want to implement some logic in either Data Provider Base Class/Secondary Class of that service how can i do that? As these classes gets generated with the generation of project in SEGW.

          How can i achieve this via cds views.

          Could you please put your valuable points on this.

          Regards,

          Rahul.

          (0) 
            1. RAHUL JAIN

              Hi Amol,

              Yeah i have gone through it and its really helpful 🙂 .

              Just wanted to clarify whether we can do it via cds views.

              Anyways got clarity now on the difference. Thanks for your response.

              Great Info.

              Regards,

              Rahul.

              (0) 
  2. Jelena Perfiljeva

    This should really be posted as a document instead of a blog (please see this document for explanation).

    I don’t have ABAP on HANA, so can’t comment much on the technical details here (you lost me at “Go to HANA studio ABAP perspective”, sorry 🙂 ). But what is missing, I feel, is some explanation of why are you suggesting to do these particular steps in this way and maybe some background information (especially if this is meant for the beginners). E.g. it seems that “FIORI-Like App” is the end results we are trying to achieve, but is CDS view and “Gateway O Data service” something that is always required?

    Especially since this has been posted as a blog, it’s reasonable for the readers to expect more of a “story”.

    Thank you.

    (0) 
    1. Amol Samte Post author

      Satish s wrote:

      In 7.5 half of the work can be reduced….

      Exactly….but for performing update/insert/delete same way to be used….

      (0) 
  3. york liu

    hi

    Right click on new created DDL source i.e. ZCDS_FL and click on open data preview.

    but there is error:

    The message content is not acceptable. Accepted content types:application/vnd.sap.adt.datapreview.table.v1+xml

    (0) 
  4. Mohammed Pavanna

    Hi Amol and other Experts,

    I have created a CDS view in ABAP perspective, named “ZCDS_DDL_IP_TEST3” in $TMP package. as  shown in the below screen shot.CDS_View.PNG

    Now when i tried searching the same in the HANA modeller perspective,  I could not find it in any of the catalog schemas, as shown below:  (Its visible  in se11 from normal GUI, but I wanted to see where its created in the HANA catalog schema)

    CDS_View1.PNG

    CDS_View2.PNG

    Can someone tell where can we find it?

    Thanks,

    Mohammed

    (0) 

Leave a Reply