The UI5 App Index - a demo using SAP Web IDE Full-Stack to clone a Github repo + build via Grunt

[NabiZamani]

Have you ever deployed SAPUI5 applications to the SAP Cloud Platform (SAPCP) or to your NW ABAP Frontend Server? In the latter case I'm sure you have heard about the UI5 App Index, because sometimes you face issues which can be solved by refreshing the App Index on ABAP (using the Report /UI5/APP_INDEX_CALCULATE). Guess what: there is also an App Index on SAPCP!

However, when your deployment succeeds It's tempting to believe that you deployed your SAPUI5 app/library correctly (there are no App Index related warnings during deployment). In oder to be really sure everything was deployed correctly you should check your App Index from time to time. Talking about ABAP, you can call the Report /UI5/APP_INDEX_CALCULATE to refresh the App Index and to check the logs. But how can you check the App Index of the SAPCP?

I've found that apps not working correctly comes sometimes from wrongly deployed apps (to ABAP/SAPCP). The most prominent reason seems to be wrong folder structure of the deployment artifact! The folder/zip that you deploy must have the manifest.json in its root! It'S important that ABAP/SAPCP can find the manifest (i.e. check the Report /UI5/UI5_REPOSITORY_LOAD, there are also some fallbacks...). However, I've also seen multiple apps in the same repo/account with a correct structure but with shared/same component ids which is some kind of "duplicate id" issue! Checking the App Index can help here.

To make it short, try the following for your URLs for your deployed UI5 libs/apps (assuming the manifest ids are nabi.sample.ui5lib and nabi.sample.ui5app):

• ABAP
  
  
  
  • https://abap.mycompany.com/sap/bc/ui2/app_index/ui5_app_info?id=nabi.sample.ui5lib
  
  
  • https://abap.mycompany/sap/bc/ui2/app_index/ui5_app_info_json?id=nabi.sample.ui5lib
  
  
  
  


• SAPCP
  
  
  
  • https://flpnwc-p123456trial.dispatcher.hana.ondemand.com/sap/bc/ui2/app_index/ui5_app_info?id=nabi.s...
  
  
  • https://flpportal-p123456trial.dispatcher.hanatrial.ondemand.com/sap/bc/ui2/app_index/ui5_app_info?i...
  
  
  • https://flpnwc-p123456trial.dispatcher.hana.ondemand.com/sap/bc/ui2/app_index/ui5_app_info_json?id=n...
  
  
  
  

As you can see the paths are the same on both ABAP and SAPCP, i.e. these two paths work on both  ABAP and SAPCP:

• /sap/bc/ui2/app_index/ui5_app_info?id=[my.manifest.id]


• /sap/bc/ui2/app_index/ui5_app_info_json?id=[my.manifest.id]

 

In case you have deployed everything correctly you can (for example) add dependencies to your custom libs inside your UI5 app's manifest.json without adding a mapping to the corresponding neo-app.json (SAPCP). However, the mapping is still needed for the FLP Sandbox which you typically use for testing purposes from within your SAP Web IDE Full-Stack. I guess that's because the sandbox seems not to have any kind of integration with the App Index (this will hopefully change in future).

 

The Youtube video below tells you all the details. I've prepared the following repos on Github (including some description). You can build the projects on your own machine as well:

• ui5-webide-demo-lib
  

  git clone https://github.com/nzamani/ui5-webide-demo-lib.git
  
  cd ui5-webide-demo-lib
  
  npm config set @sap:registry https://npm.sap.com
  
  npm install
  
  grunt​

  
  


• ui5-webide-demo-app
  

  git clone https://github.com/nzamani/ui5-webide-demo-app.git
  
  cd ui5-webide-demo-app
  
  npm config set @sap:registry https://npm.sap.com
  
  npm install
  
  grunt​

  
   
  
  Hint: probably it's better to use a global setting:
  

  npm config --global set @sap:registry https://npm.sap.com​

  
  

 

Make sure to have a look into the Gruntfiles, especially the one for the library! As you can see the build result after executing grunt will be inside the dist folder. For both the library and the app you can find the corresponding manifest.json directly inside the dist folder! In order to make this work for the library I had to override the the grunt default task configuration slightly. Again, check the Gruntfile.js of ui5-webide-demo-lib

 

[a_rothmund]

Hi Nabi,

thanks for this interesting post and the detailed explanation. I’m quite new to SAPUI5 and setup a similar scenario in the SAP WebIDE: I have an application and a library, which is consumed by the application. This is a quite stupid and common scenario, but there seems to be no official documentation on how to setup this. The only thing I found was your great post here and other blog entries, but all of them use different techniques and solutions (where some of them are regarded as workarounds?). I created the application and the library with the SAP WebIDE templates, so I can say there is nothing wrong in the base setup of the projects.

First of all, I tried with the HCP and indeed, it works (at least with the neo-app.json). I put the depending library in the manifest.json of the consuming application and the library is loaded correctly. But my prior target ist to get this working in the ABAP Repository.

As far as I know, the neo-app.json is no longer used in the ABAP Repository and the application and library are deployed as BSP-Applications. I deployed both the library and the application to the ABAP Repository in the customer namespace. After that, I checked the App-Index with the url „…/sap/bc/ui2/app_index/ui5_app_info?id=[my.custom.lib]“ and everything is correctly. The result shows, that no errors are present and the descriptor could be found. For the application, it shows the library as dependency and the property „url“ shows exactly the correct path to the BSP-Applications (or the corresponding ICFS nodes). So everything seems to be correct. Then, I tested the application and verified if the library is loaded correctly, but this isn’t the case – instead I get 404 Not-Found error 😕 The request which failed is:

…/sap/bc/ui5_ui5/sap/zcustomapp/resources/~20181114160800~/my/test/customlib/library.js

But the ones for sap libraries work:

…/sap/bc/ui5_ui5/sap/zcustomapp/resources/~20181114160800~/sap/m/library.js

This is really strange. My colleague and I also debugged the HTTP handlers and we noticed, that there is a table where all sap libraries are listed, but this is a list of the mime repository content. So in that case, it finds the mapping from the library id „sap.m“ to the real location, but there seems to be no logic for resolving custom libraries from the app-index (or we didn’t saw it). So I quite wonder how this is intended to work? Do you know if there is something missing here; or did you enabled some additional services, etc.? I’m really lost and I already spent 3 days in getting this to work as splitting up our code into different libraries is a must-have. I tried with or without cache busting, used different names and ids and did many other things but nothing helped. Yes, there is a kind of workaround for hard-coding the path with „registerModulePath(…, …)“, but ist hat really a solution all sapui5 developers should use? The strange thing is that there seems to be no official documentation on how to deploy libraries to ABAP Repository correctly and get it finally working.

Any help or advice would be great. Thanks in advance.

[NabiZamani]

Hi Andreas

That's a very detailed description. However, it is still hard to help:

1. Did you also check the url with ui5_app_info_json?


2. How exactly did you deploy to ABAP?


3. What's the structure of your lib project, i.e. where exactly is your library.js file?


4. Are we talking about 7.51, 7.52,...?

My assumption is that the library.js file is in the wrong folder, or the folder structure is still wrong. Also, didn't you generate a library-preload.js file?

[a_rothmund]

Hi Nabi,

thanks for your fast feedback!

After spending another day in debugging and trying to find a solution, I can say that the app-index and also the project structure were correct. What I forgot to say was, that I always tried to get it working when running the application WITHOUT the fiori launchpad. I simply used the index.html of my application project. I always thought that all resource paths must be resolved on the backend directly, but this seems to be only the case for SAP libraries from the MIME repository. 

When testing my app in the fiori launchpad, it suddenly worked. The reason why it works in the fiori launchpad but not when using the index.html, is the fact, that SAP maps the paths for custom libraries not on the backend, but on the client manually by using the method “jQuery.sap.registerModulePath”. That means, to get it also working in the index.htm, I had to simulate the same logic as the fiori launchpad does. And for that, the app_info services you mentioned in your blog was quite helpful.

I collected all my findings and wrote a dedicated blog for this topic:

https://blogs.sap.com/2019/04/05/sapui5-custom-libraries-deploy-to-abap-repository-and-use-in-applic...