Deploy End to End FIORI Consuming CDS Views from ADT(On-Premise) using BTP ( Business Application Studio).

[somnath_accenture]

This blog is meant for developers to get all information at one place  . The evolution of SAPUI5/FIORI had been from  Eclipse ( dating back to Juno version ) ,Local WebIDE personal edition / Local WebIDE productive version / SAP WebIDE ( HCP)/SAP WebIDE Full Stack ( SAP Cloud Platform) and finally now BAS (Business Application Studio).

Fortunately after years I have every thing from infrastructure point of view thanks to BTP (SAP Business Technology Platform).

 

A. The systems that I have are :-

 

1. 

 

 2. HANA STUDIO

 

 

3. Cloud Connector ( Cloud to On-Premise )

 

SAP Cloud Connector

 

4. BTP ( Business Application Studio ) connected to on premise from my SUserID ( it's universal now)

 

BTP Cockpit

 

B . Step by Step 

 

1. Login to HANA Studio in ABAP Perspective ( why HANA studio for HANA XS services requires HANA Studio only ) .The same step can be performed by ADT too and commercially feasible.

 

Create a Consumption CDS “ZSEPM_C_PurchaseOrder” and Metadata Extension “ZSEPM_CPO_MDE”

 

 

Code

DDL ->CDS ->ZSEPM_C_PurchaseOrder

 

@AbapCatalog.sqlViewName: 'ZSEPM_CPO'

@AbapCatalog.compiler.compareFilter: true

@VDM.viewType: #CONSUMPTION

@AccessControl.authorizationCheck:#NOT_REQUIRED

@EndUserText.label: 'EPM Demo: Purchase Order - Consumption'

@OData.publish: true

@Metadata.allowExtensions: true

define view ZSEPM_C_PurchaseOrder as select from SEPM_I_PurchaseOrder_E as PO {

     //sepm_i_purchaseorder_e

     key PO.PurchaseOrder,

     PO.Supplier,

     PO.TransactionCurrency,

     PO.GrossAmountInTransacCurrency,

     PO.NetAmountInTransactionCurrency,

     PO.TaxAmountInTransactionCurrency,

     PO.PurchaseOrderLifeCycleStatus,

     PO.PurchaseOrderApprovalStatus,

     PO.PurchaseOrderConfStatus,

     PO.PurchaseOrderOrderingStatus,

     PO.PurchaseOrderInvoicingStatus,

     PO.PurchaseOrderOverallStatus,

     PO.CreatedBySystemUser,

     PO.LastChangedBySystemUser,

     PO.CreationDateTime,

     PO.LastChangedDateTime,

     /* Associations */

     //sepm_i_purchaseorder_e

     PO._ApprovalStatus,

     PO._ConfirmationStatus,

     PO._InvoicingStatus,

     PO._Item,

     PO._LifeCycleStatus,

     PO._OrderingStatus,

     PO._OverallStatus,

     PO._Supplier,

     PO._SupplierV2,

     PO._Text,

     PO._TransactionCurrency

}

 

CDS->Metadata Extensions

@Metadata.layer:#CUSTOMER



@UI: {

  headerInfo: { typeName: 'Purchase Order',

                typeNamePlural: 'Purchase Orders',

                title: { type: #STANDARD,

                         value: 'PurchaseOrder' } } }

annotate view ZSEPM_C_PurchaseOrder with

{

  //ZSEPM_C_PurchaseOrder

  @UI: { lineItem:       [ { position: 10,

                             importance: #HIGH } ],

         identification: [ { position: 10 } ] }

  PurchaseOrder;



  @UI: { lineItem:       [ { position: 20,

                             importance: #HIGH } ],

         identification: [ { position: 20 } ] }

  PurchaseOrderOverallStatus;



  @UI: { lineItem:       [ { position: 30,

                             importance: #HIGH } ],

         identification: [ { position: 30 } ] }

  CreationDateTime;



  @UI: { lineItem:       [ { position: 40,

                             importance: #HIGH } ],

         identification: [ { position: 40 } ] }

  LastChangedDateTime;

}

 

2.  Goto TCODE /n/IWFND/MAINT_SERVICE add the above ZSEPM_C_PurchaseOrder_CDS

( Select Co-Deployed no longer with S4HANA we use LOCAL Alias)

 

 

3.   Please check the response of the OData Service note the URI and ID required for cloud connector .

 

 

 

4. Login to BTP to connect SAP BTP (Subaccount) to SAP Cloud Connector. Note the subaccount id and location required in Cloud Connector

 

 

 

 

5. Go back to SAP Cloud connector

Select Region ( US East (VA)) for me and subaccount id as received from above. Post that the below screen should be visible. The Display name for cloud connector can also be given if you see it's SAPCCTest.

 

6. Click on the log file ljs_trace.log to check log and trace if there's an error . Luckily all was fine for me.

 

7 . Connector details

 

 

 

8. Below screenshot ensures that the connectivity between SAP BTP ( subaccount) and SAP on-premises in this case S4HANA2021 is successfully established.

Go to Destinations under Connectivity Note the URL obtained from step-3 above .

 

 

9. Go back again to SAP cloud connector and select cloud to On premise.

 

for resources provide the below

 

 

10.  Look up SAP On-Premise the OData Service ZSEPM_C_PurchaseOrder_CDS Created (  from SAP Business Application Studio (BAS).

Go to Application ( BAS ) .

 

 

Select SAP FIORI application

 

Select Application type by default :- SAP FIORI Elements

Select List Report

 

 

My OData Service and System pops out

 

 

11. Execute the Application created above to expose the On-Premise S4HANA2021 Data to Browser

 

 

 

Initial it will be blank.. click on settings and select all.

 

select on Go next you will get the output

 

 

Check on the Artifacts @bas

info backend-proxy-middleware /sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZSEPM_C_PURCHASEORDER_CDS_VAN',Version='0001')/$value/?sap-language=EN&sap-client=400

info ui5-proxy-middleware /1.84.20/resources/sap/ushell/bootstrap/_SchedulingAgent/StepConfiguration.json

info ui5-proxy-middleware /1.84.20/resources/sap/ushell/bootstrap/_SchedulingAgent/LoadingConfiguration.json

info ui5-proxy-middleware /1.84.20/resources/sap/fiori/core-ext-light-1.js

info ui5-proxy-middleware /1.84.20/resources/sap/fiori/core-ext-light-3.js

info ui5-proxy-middleware /1.84.20/resources/sap/fiori/core-ext-light-2.js

info ui5-proxy-middleware /1.84.20/resources/sap/fiori/core-ext-light-0.js

info ui5-proxy-middleware /1.84.20/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2

info ui5-proxy-middleware /1.84.20/resources/sap/ui/core/themes/base/fonts/SAP-icons.woff2

info ui5-proxy-middleware /1.84.20/resources/sap/suite/ui/generic/template/ListReport/i18n/i18n_en.properties

info ui5-proxy-middleware /1.84.20/resources/sap/suite/ui/generic/template/ListReport/i18n/i18n_en.properties

info ui5-proxy-middleware /1.84.20/resources/sap/ui/table/library-preload.js

info ui5-proxy-middleware /1.84.20/resources/sap/ui/table/messagebundle_en.properties

info ui5-proxy-middleware /1.84.20/resources/sap/suite/ui/generic/template/ListReport/i18n/i18n_en.properties

info ui5-proxy-middleware /1.84.20/resources/sap/ui/table/themes/sap_fiori_3/library.css

info ui5-proxy-middleware /1.84.20/resources/sap/suite/ui/generic/template/lib/i18n/i18n_en.properties

info ui5-proxy-middleware /1.84.20/resources/sap/suite/ui/generic/template/lib/i18n/i18n_en.properties

info ui5-proxy-middleware /1.84.20/resources/sap/ushell/plugins/rta/i18n/i18n_en.properties

info ui5-proxy-middleware /1.84.20/resources/sap/ushell/plugins/rta/i18n/i18n_en.properties

info ui5-proxy-middleware /1.84.20/resources/sap/ui/thirdparty/hyphenopoly/hyphenopoly.bundle.js

info ui5-proxy-middleware /1.84.20/resources/sap/ui/thirdparty/hyphenopoly/hyphenEngine.wasm

info ui5-proxy-middleware /1.84.20/resources/sap/ui/thirdparty/hyphenopoly/patterns/en-us.hpb

info backend-proxy-middleware /sap/opu/odata/sap/ZSEPM_C_PURCHASEORDER_CDS/?sap-client=400

info backend-proxy-middleware /sap/opu/odata/sap/ZSEPM_C_PURCHASEORDER_CDS/$batch?sap-client=400

 

 

12. Let's deploy the application to SAPUI5 repository

 

 

 

 

Select deployment as 'Y'.

 

You can enter

In the terminal view:-  npx fiori add deploy-config: and select ABAP 

 

 

 

 

You can check on the backend SE80

 

 

I also referred blogs particularly :- https://blogs.sap.com/2020/06/29/generate-sample-odata-on-abap-as-7.52-sp04-dev-edition-for-sap-fior...

Conclusion of the Topic

• SAP Cloud connector acts as the interface between BAS and the S4HANA2021 on-premise.


• Consume CDS Consumption views as OData Service .


• Use of Fiori Elements to automate development .

Please provide feedback / share or like watch out for my next blog wherein I  create a Fiori Launch Pad and use it as a tile .

 

Best Regards,

Somnath Choudhury .