How to create First Fiori App using Templates in Web IDE….

After attending SAP Inside Track #sitCHD, I was inspired to write my very first blog post.  In this I am sharing my experience on how to create a Fiori App.

ABAP being my core skill, I always felt working in Fiori will be difficult.  But when I created my first Fiori app.  I realized how simple, efficient and exciting it is to work in Fiori.  After following a series of tutorials I successfully created a List report in Fiori.  Before we go into details on how to create a Fiori app, lets understand a brief about ABAP Programming Model for Fiori.

Above picture (referenced from SAP Help), depicts Architecture for development of SAP HANA based Fiori App.  Using ABAP, Core Data Services, OData protocol and SAP UI5 based front end interface various type of Fiori apps can be created eq. transnational, search, analytics.

Prerequisite –

1. ABAP development tool (Eclipse) – for CDS view development
2. SAP Gateway server – For OData service
3. SAP Web IDE – for SAP UI5 Fiori app development

Step-By-Step Procedure for creating Simple list report in Fiori – 

For our example we will create a CDS view on top of existing sales order item(CDS view).

1. Create a Data definition for CDS View
   • Open ABAP Development Tool in Eclipse and Go-to File->New->Others.  This will open a wizard window.
   • In wizard select Core Data Services->Data Definition
   • On next screen provide the details  – Project, Package, Name (CDS view), Description
   • Choose Next
   • In case not using $TMP, give Transport request and choose Next
   • Select Define view template and choose Finish
   • On DDL Editor provide the sql_view_name (View created in back-end S4HANA system and can be checked using SE11), ddl_source_name (CDS View name), data_source_name (view, Database table or other CDS view) and add following code

     @AbapCatalog.sqlViewName: 'ZDEMOSALES'
     @AbapCatalog.compiler.compareFilter: true
     @AbapCatalog.preserveKey: true
     @AccessControl.authorizationCheck: #CHECK
     @EndUserText.label: 'List reporting of Sales order'
     define view ZDEMO_DDL_SALES as select from I_SalesDocumentItem as Item {
         key Item.SalesDocument     as SalesOrderId, 
     
         key Item.SalesDocumentItem as ItemPosition, 
         Item.Plant  as Plant, 
         Item.Material        as Product,
         @Semantics.currencyCode: true
         Item.TransactionCurrency   as CurrencyCode, 
         @Semantics.amount.currencyCode: 'CurrencyCode'
         Item.NetPriceAmount as NetPrice, 
         @Semantics.amount.currencyCode: 'CurrencyCode'
         Item.NetAmount as NetAmount, 
         @Semantics.amount.currencyCode: 'CurrencyCode'
         Item.TaxAmount as  TaxAmount
        
         
     }
     

   • In above code we are using alias for predefined cds view – I_SalesDocumentItem and we are creating a projection over certain fields.
   • Save and Activate the CDS view.  Upon activation following objects are created in data dictionary.
     • CDS Entity – ZDEMO_DDL_SALES
     • SQL View – ZDEMOSALE
   • Verify the Results by going to data preview for newly created CDS view.
2. Create OData using SADL (Service Adaption Description Language)
   • OData can be easily created with the use of Annotation in CDS view
   • At CDS Consumption view level annotation – “@OData.publish:true” can be used.

     @AbapCatalog.sqlViewName: 'ZDEMOSALES'
     @AbapCatalog.compiler.compareFilter: true
     @AbapCatalog.preserveKey: true
     @AccessControl.authorizationCheck: #CHECK
     @EndUserText.label: 'List reporting of Sales order'
     @OData.publish: true
     define view ZDEMO_DDL_SALES as select from I_SalesDocumentItem as Item {
     }​

   • On activation of CDS view, objects related to OData like Model, ABAP class etc are created automatically in the back-end system.
   • Now we need to activate OData service in SAP Gateway hub.
   • In front end server go to transaction – /IWFND/MAINT_SERVICE
   • Choose Add Service
   • Give System Alias, OData service name as <CDS_View_Name>_CDS
   • Choose Get Services
   • Select the OData service from the list and choose Add Selected Services, Choose Continue in following pop-ups.  This will register the OData service in SAP Gateway hub.
   • OData service can be tested using SAP Gateway Client
3. Create Fiori app to consume OData service
   • Open SAP Web IDE in web browser and go to File in menu
   • Follow the path File->New->Project from Template
   • Choose template – List Report Application and Choose Next
   • Provide Basic information for the new Project – Project Name, Title and Choose Next
   • Select Front End Server where the OData service was registered and OData service
   • Select the CDS View in Odata Collection and Choose Finish
   • Fiori Project with following structure is created in SAP Web IDE
   • Here manifest.json is an app descriptor file that is updated automatically in Web IDE with following information
     • Data Source – OData Service details and Annotations file reference
     • Model – OData Model details
   • To test, Choose Run in SAP Web IDE and select “flpSandbox.html”, Choose Ok
   • In Fiori Launchpad select the Tile for new Fiori app
   • Newly created Fiori List Report application will be displayed, However there is no data.
   • To display data from CDS view, Choose Setting and select all fields in pop-up and Choose Ok
   • Choose Go on next screen and you will see the data in List report.

That is it, how I created a simple list report in Fiori using CDS and annotations.

Keep Exploring!! Keep Blogging!!