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