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 :-
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
- 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-fiori-tools/
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 .
