Skip to Content
Author's profile photo Jerry Wang

Step by Step to create Fiori Application through SmartTemplate + WebIDE

1. Create CDS view based on sample database table spfli and scarr

Create two CDS views in ABAP development studio. The source code for both are listed below. You just need to copy them into studio and click activate button.

@AbapCatalog.sqlViewName: 'zjerrySQL0309'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'test 20160309'
@ObjectModel: {
   createEnabled,
   deleteEnabled,
   updateEnabled
}
define view Zjerrytest20160309
as select from spfli association [0..1] to scarr as _scarr
on _scarr.carrid = spfli.carrid {
       key spfli.carrid,
       key _scarr.carrname,
       key spfli.connid,
       spfli.cityfrom,
       spfli.cityto
}
@AbapCatalog.sqlViewName: 'z20160316'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'test odata publish '
@OData.publish: true
@ObjectModel: {
   type: #CONSUMPTION,
   compositionRoot,
   semanticKey: ['Actor'],
   createEnabled,
   deleteEnabled,
   updateEnabled
}
define view Zjerrytest20160316 as select from Zjerrytest20160309 {
    @UI.lineItem : [{position:10}]
    key Zjerrytest20160309.carrid as Jerryid,
    @UI.lineItem : [{position:20}]
    key Zjerrytest20160309.carrname as name,
    @UI.lineItem : [{position:30}]
    key Zjerrytest20160309.cityfrom as startLocation,
    @UI.lineItem : [{position:40}]
    key Zjerrytest20160309.cityto as target,
    @UI.lineItem : [{position:50}]
    key Zjerrytest20160309.connid
}

Once activated, there is a hint in studio to tell you the automatically published OData service name, and then tcode for service registration.

/wp-content/uploads/2016/03/clipboard1_909359.png

2. Use tcode /IWFND/MAINT_SERVICE to finish OData service registration

/wp-content/uploads/2016/03/clipboard2_909360.png

Specify System Alias = LOCAL and search using the CDS name you get from step1, select the search result and click “Add Selected Services”:

/wp-content/uploads/2016/03/clipboard3_909361.png

Once added, click “SAP Gateway Client” to test whether the OData service works:

/wp-content/uploads/2016/03/clipboard4_909368.png

Make sure the metadata request returns 200 success code.

/wp-content/uploads/2016/03/clipboard5_909369.png

3. Create UI5 application using Wizard in WebIDE

Open WebIDE, File->New->Project from Template, choose Smart Template Application and next:

/wp-content/uploads/2016/03/clipboard6_909370.png

/wp-content/uploads/2016/03/clipboard7_909371.png

Select the destination for your backend where CDS view is created, and locate your OData service created just now:

/wp-content/uploads/2016/03/clipboard8_909372.png

The annotation file is automatically identified, just click Next button:

/wp-content/uploads/2016/03/clipboard11_909373.png

Choose OData Collection from drop down list and click Finish button:

/wp-content/uploads/2016/03/clipboard12_909377.png

Once created, the project looks like below. Choose Component.js and click Run button in WebIDE Toolbar:

/wp-content/uploads/2016/03/clipboard13_909378.png

From rendered application you could see the table is now filled with data fetched from CDS view:

/wp-content/uploads/2016/03/clipboard14_909379.png

Build a Productive Fiori application in CRM Service area

Would you like to use the introduced technology to build a more complicated and productive Fiori application in CRM Service area? Then follow the steps in this blog Create a CRM Service Order Fiori application within a couple of minutes .

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Hiroshi Iguchi
      Hiroshi Iguchi

      This is splendid.

      How did you check this method?

      Author's profile photo Jason Scott
      Jason Scott

      Thanks for the blog but just wondering what ABAP version you need for those CDS tags. I don't think they are available in a 7.40 based system..?

      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      Hi Jason,

      I am working on a NW 7.50 system:

      /wp-content/uploads/2016/04/clipboard1_931398.png

      And all UI annotation are also documented with a prefix saphelp_nw75: http://help.sap.com/saphelp_nw75/helpdata/en/f8/af07bb0770414bb38a25cae29a12e9/content.htm?frameset=/en/d9/bc687d35fa42ccbb0b9256ce786d51/frameset.htm&current_toc=/en/d9/bc687d35fa42ccbb0b9256ce786d51/plain.htm&node_id=77

      So I think you are right, those annotation are not available in NW7.40.

      Best regards,

      Jerry

      Author's profile photo Paul Hardy
      Paul Hardy

      Hello Jerry,

      When I just went through this process everything was OK right up to the point where the SAP Web IDE tried to find the annotations file. It could not, and though one can bypass this step it sorts of defeats the purpose.

      In your example above the annotation file ends in "VAN".

      I presume this should be created when the CDS view is activated. Do you know how to tell if such a file has in fact been activated? Is that file linked to the SEGW service somehow, so the SAP Web IDE can work backwards and look for it?

      Moreover, let us say a CDS view gets activated with a certain set (or no) annotations. Then you go into Eclipse, and add some more annotations. I presume the annotation file and SEGW service gets updated?

      The reason I am worried, is I changed the end user title of the CDS view (which lives in an annotation) and the activated the view again, but the tile in the SEGW service did not change.

      Do you have to delete the service, and then it gets recreate again when you re-activate the CDS view?

      Cheersy Cheers

      Paul