Skip to Content

    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 -)

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 1.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 2.jpg


Create Application in Web IDE using EDMX file

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

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 3.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 4.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 5.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 6.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 8.jpg

Run Application with Web IDE Using Mock Data

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 9.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 10.jpg


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.

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 11.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 12.jpg

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

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 9.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 14.jpg


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

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 15.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 16.jpg

Export Application from Web IDE

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 16.jpg

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

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 17.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 18.jpg


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.

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 19.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 20.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 21.jpg

If upload  /UI5/UI5_REPOSITORY_LOAD program dumps like this

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 25.jpg

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

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 26.jpg

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

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 22.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 23.jpg

Deploy Web IDE Developed Fiori Application to Local ABAP Repository 24.jpg

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.

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

      1. yuvaraj gurunathan

        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. 

        (0) 
        1. Uladzislau Pralat Post author

          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.

          (0) 
          1. yuvaraj gurunathan

            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>

            (0) 

Leave a Reply