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.
Any reason why do we have to rename the folder name to WebContent??
Without renaming index.html can not be found
Thank you for the response, really helpful blog.
When I created the app in the local installation of web ide, it didn’t create a index.html. However I went and created a index.html and put it in root folder for the app, i renamed the folder to webcontent and when I test the service it says index.html not found. Any direction on what I should be looking for would be helpful.
I did not work with local installation of web ide, so I can not comment on that. If you follow the instructions with hcp web ide it should work for sure.
I did try the same steps above from web ide and I am facing an issue with index.html failing on sap.ui.require with the error
index.html:21 Uncaught TypeError: sap.ui.require is not a function
Please could you share your code in index.html or any idea where I am going wrong. This is how index.html looks like.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge” />
<meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”/>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<title>employee details</title>
<!– Bootstrapping UI5 –>
<script id=“sap-ui-bootstrap”
src=“resources/sap-ui-core.js”
data-sap-ui-libs=“sap.m”
data-sap-ui-theme=“sap_bluecrystal”
data-sap-ui-compatVersion=“edge”
data-sap-ui-resourceroots=‘{“zemployees”: “.”}’
data-sap-ui-frameOptions=“trusted”>
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.require([“sap/m/Shell”,
“sap/ui/core/ComponentContainer”
], function (Shell, ComponentContainer) {
// initialize the UI component
new Shell({
app: new ComponentContainer({
height : “100%”,
name : “zemployees”
})
}).placeAt(“content”);
});
});
</script>
</head>
<!– UI Content –>
<body class=“sapUiBody” id=“content”>
</body>
</html>