Create Fiori List App Report with ABAP CDS view - PART 1

[former_member364613]

In this blog, I am going to show How CDS view can be used to generate a Fiori List App Report. Below are the steps that need to be implemented to generate Fiori List App Report.

1. CDS annotations for Fiori List Report.


2. How to create a Gateway service from ABAP CDS view


3. How to create a Fiori List App report in Web IDE.


4. How to Deploy the Fiori Application.


5. Create a Custom Semantic Object.


6. Create a Tile in Fiori.


7. Adding Tile from Catalogs –> Groups.

So Lets Begin with....

1. CDS view with Annotations for Fiori List Report:

Make sure you set @OData.publish annaotation set to True in order to enable the service to Fiori.

Also you can set below CDS view annotation for UI interface.

@UI.HeaderInfo - to display the header information for the list report.

@UI.selectionField.position - this is for filter option

@UI.lineItem.position - This is for Positioning the filed in the Report Layout

@UI.hidden - If you want to hide the filed in Fiori side

@UI.lineItem.exclude - If you want to exclude the filed in Report Layout by default.

and many more.....

You must use Associations in order to bring Value help feature in filters.

 

Below is the sample CDS view code with UI Annotations, OData, Associations etc.,

@AbapCatalog.sqlViewName: 'ZDEMOCOMPWHR'

@AbapCatalog.compiler.compareFilter: true

@VDM.viewType: #CONSUMPTION

@OData.publish: true

@EndUserText.label: 'Fiori - Demo List Report App'



@UI.headerInfo: {

     typeName      : 'Demo List Report App' ,

     typeNamePlural: 'Demo List Report App' }

 

define view ZDEMO_COMP as select from ZDEMO_COMPWHR 



association [0..1] to I_Material          as _Material   on  $projection.KMAT = _Material.Material

association [0..1] to ZCX1_PRO_OWNER        as _OWNER       on $projection.Owner = _OWNER.owner

  

{



@UI.selectionField.position: 20

@Consumption.valueHelp: '_OWNER'

//@UI.lineItem.position: 10

@EndUserText.label:'Owner'

Owner, _OWNER,



@UI.selectionField.position: 30

@Consumption.valueHelp: '_Material'

//@UI.lineItem.position: 20

@EndUserText.label:'KMAT (Material)'

KMAT, _Material,



//@UI.lineItem.position: 30

@EndUserText.label:'Sequence'

sequence,



//@UI.lineItem.position: 40

@EndUserText.label:'Characteristic 1'

Characteristic1,



//@UI.lineItem.position: 50

@EndUserText.label:'Characteristic Value 1'

CharacteristicValue1,



@UI.selectionField.position: 70

//@UI.lineItem.position: 510

@EndUserText.label:'Valid To'

@UI.lineItem.exclude: true

@Semantics.businessDate.to: true

//validto,

case when validto = '' then '00000000'

else validto end as validto,



@UI.hidden: true

//@UI.lineItem.position: 520

@DefaultAggregation: #MAX

1 as counter



} 

If you want ValueHelp in the List report filters to select the Prompts, then you need to implement the associations in the CDS view as mentioned in the above code, I have implemented ValueHelp for Material & Owner.

 

2. How to create GateWay Service for CDS view:

• Make sure you enabled the OData annotation is set to “true” in the CDS view.


• Go to tcode - /IWFND/MAINT_SERVICE in SAP and click on Add Service.

• Give Local in the system Alias and click on Get Services button. Once you see all the list, find your service which starts with CDS view name from the list below and Click Add Selected Services button.

• 
  

  Give Package Assignment  and click on Continue.

  
  


• It will prompt for a Transport request for the Gateway service. Select the Transport request or create a new TR and Click on Continue.


• Now, go back to main page and find the Service that starts with CDS view name. Select the service and Make sure the status of ICF Node status is Active. Also you can click on Load Metadata button to refresh the Metadata.

• To test the service is working or not, Select the service and click on SAP Gateway Client.

• Click on Execute button and you can see the status reason is OK.

 

3. How to create Fiori List Report in Web IDE:

• Login into SAP Cloud Platform Web IDE.


• 
  

  Go to Development -> Workspace -> New -> Project from Template.

  
  

• Select List Report Application, select the current UI5 Version and Click “Next”.

• 
  

  Give Project Name and Title and Description for the New List report App and Click “Next”.

  
  


• 
  

  Select the SAP system from the Service Catalog. In this case, I select system and select the Gateway service which is based on CDS View and Click “Next”.

  
  

• Click Next, and then select OData Collection as ZDEMO_COMP (CDS view) and click Finish.

• Now, you can see the List report Application is created under Workspace. You can test the List report app within Web IDE by clicking the “Run” button.

• You can choose the file to run the List report application. In this case, I selected the flpSandbox.html.

• It will open new window from the Web IDE with a tile for testing. Click on the tile.

• You can test if the report is working fine. By clicking the settings button, you can select the columns you want to show in the report layout and click Go button to run the report.

 

4. How to deploy the Fiori Application:

• Logon to SAP Cloud Platform Web IDE and go to your project -> Deploy -> Deploy to SAPUI5 ABAP Repository.

• If it’s a new application to Deploy, then click the Deploy a new application or click on Update an existing application and then click “Next”.

• Give the application a Name which starts with ‘Z’ otherwise it won’t create the application, also give the package and click “Next”.

• Select transport request if asked and then click “Next”.


• Click Finish.

• 
  

  You can see the status of the Deployment in main screen of the Web IDE ( top right corner).

  
  

 

After the Deployment of the Application is complete to Repository , you can create custom semantic object and a tile in Fiori which we can discuss this in PART 2 of this blog.

 

Thanks!!