SAP Fiori for SAP S/4HANA

Create Fiori List App Report with ABAP CDS view – Part 1

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.

SAP Fiori for SAP S/4HANA

  • 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.

SAP Fiori for SAP S/4HANA

  • 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.

SAP Fiori for SAP S/4HANA

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

SAP Fiori for SAP S/4HANA

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

SAP Fiori for SAP S/4HANA

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.

SAP Fiori for SAP S/4HANA

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

SAP Fiori for SAP S/4HANA

  • 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”.

SAP Fiori for SAP S/4HANA

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

SAP Fiori for SAP S/4HANA

  • 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.

SAP Fiori for SAP S/4HANA

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

SAP Fiori for SAP S/4HANA

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

SAP Fiori for SAP S/4HANA

  • 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.

SAP Fiori for SAP S/4HANA

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.

SAP Fiori for SAP S/4HANA

  • 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”.

SAP Fiori for SAP S/4HANA

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

SAP Fiori for SAP S/4HANA

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

SAP Fiori for SAP S/4HANA

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

SAP Fiori for SAP S/4HANA

Leave a Reply

Your email address will not be published. Required fields are marked *