Deploy Web IDE Developed Fiori Application to Local ABAP Repository

[uladzislau_pralat]

    If your ABAP System is not externally visible, it does not mean that you can not use Web IDE for your development. Of course, you can not directly connect to you system to consume OData and deploy your Fiori Application. In my blog I will explain how to walk-around both these limitations.

Create EDMX file in Web IDE

Copy OData Service metadata from ABAP System Gateway Client (trx. IWFND/GW_CLIENT) into clipboard. Create edmx file in Web IDE pasting content of metadata document from clipboard (do not forget to remove collapsing -)





 

Create Application in Web IDE using EDMX file

In Web IDE generate application from Work List template using edmx file from previous step











Run Application with Web IDE Using Mock Data





 

Copy Real Data from ABAP Server to Web IDE JSON File

It is also possible to copy real data from ABAP server over to Web IDE and test the application with real data. In Gateway Client (trx. IWFND/GW_CLIENT) display Products entity data in json format ($format=json parameter) and copy it in clipboard. In Web IDE create mockdata folder under localService forlder. Inside mockdata folder create Products.json file and paste content of Products entity set from clipboard.





Run Application in Web IDE with Real Data Copied from ABAP Server





 

Update manifest.json to with OData Service URI

Copy OData service URI from local ABAP server Gateway Client (trx. IWFND/GW_CLIENT) and paste into manifest.json file mainService uri setting





Export Application from Web IDE



Open zip archive and remane webapp folder to WebContent

Exported file is a ZGW_PRODUCT.zip archive. Create ZGW_PRODUCT directory and copy content of the archive into ZGW_PRODUCT directory. Rename webapp directory into WebContent





 

Upload the Fiori Application to local ABAP Server using /UI5/UI5_REPOSITORY_LOAD program

Select ZGW_PRODUCT folder and click OK, confirm upload clicking on link, then finally give application a description and confirm upload.







If upload  /UI5/UI5_REPOSITORY_LOAD program dumps like this

apply OSS Note 2287821 - Shortdump in Program /UI5/APP_INDEX_CALCULATE

You might also get following message during application upload due to missing application descriptor attributes

Make sure that following attributes are there in the manifest.json file:

• /sap.ui5/dependencies/components


• /sap.ui5/extends/components


• /sap.app/ach


• /sap.app/embeds


• /sap.app/cdsViews


• /sap.fiori/registrationIds


• /sap.platform.abap/uri

It is important to upload application without error in order to register loaded component. Attached is an example of manifest.json with missing attributes added

 


Run the application from local ABAP Server

 

In Service Maintenance (trx. SICF) find ZGW_PRODUCT service and select Test Service from context menu







If application changes are required they can be done in Web IDE and changed application upload to local ABAP Server as described above. Only you need to take care of clearing cache: in BEP (trx. /IWBEP/CACHE_CLEANUP), in FND (trx. /IWFND/CACHE_CLEANUP) and in browser.

In my next blog I will demonstrate how to configure Fiori Launchpad for Custom Fiori Application.

 

See also useful blog on Personal WebIDE installation