Skip to Content
Author's profile photo Nabi Zamani

Implementing a custom UI5 lib and a UI5 app consuming the lib using SAP Full-Stack WebIDE with Grunt

I typically use some local dev environment with some of my favorite IDE’s, i.e. VS Code, Atom, WebStorm,… However, sometimes I prefer to use the SAP Web IDE when it comes to implementing UI5 apps for the SAP Cloud Platform (SAPCP). Implementing custom UI5 libs seems to receive more and more attention these days (also thanks to ui5lab.io). Doing that using your own machine & tools works seamlessly. But can we use the SAP Web IDE to do the same? In own SAPCP projects with multiple team members we’ve made some good experience using SAP’s Full-Stack Web IDE – and I really like the benefits!

In this blog I’d like to show how easy it is to implement your own custom UI5 library, deploy it to the SAPCP, and use the library in an own UI5 app. All that can happen from within the Full-Stack Web IDE (not the “old” Web IDE). To speed up I’ve prepared some code on GitHub.

Hint: The example does currently not build the themes from the library project. I still have to figure out how that works because of the theme paths. As soon as I know I will update the example code.

 

 

1. Clone example from Github

git clone https://github.com/nzamani/ui5-lib-webide-demo.git

The folder ui5-lib-webide-demo contains two folders and two zip files:

  • nabi.sample.ui5lib
    This folder contains the code of our custom UI5 library
  • nabi.sample.ui5app
    This folder contains the code of our UI5 app that consumes the library – ready for the Full-Stack Web IDE
  • nabi.sample.ui5lib.zip
    This archive contains our custom UI5 library. We will import this archive into the Full-Stack Web IDE.
  • nabi.sample.ui5app.zip
    This archive contains our app. We will simply this archive into the Full-Stack Web IDE.

 

2. Import our custom UI5 library into the Full-Stack Web IDE

 

 

 

To build the project (via default Grunt task) select “Build” from the context menu, then check the generated “dist” folder:

 

3. Deploy our custom UI5 library to the SPCP from the Full-Stack Web IDE

 

Done.

 

4. Import our custom UI5 app into the Full-Stack Web IDE

 

 

To build the project (via default Grunt task) select “Build” from the context menu, then check the generated “dist” folder:

 

 

6. Run custom UI5 app into the Full-Stack Web IDE

 

Result:

 

Assigned tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Arjun Biswas
      Arjun Biswas

      Nice blog! Thanks !

      Author's profile photo Former Member
      Former Member

      Good stuff.. but first time I hear the term "Full Stack" Web-IDE..  here in New Zealand and at least to my colleagues in Australia, I like to make it crystal clear the first one is Orion and the latest which is more actively developed by open-source communities is Che and none of them were developed by SAP.

      Nonetheless is good to see some traction on custom libraries - there is not a lot around this topic and above all in what tooling can do.. certainly good that a task runner has been incorporated to Che, should make Web-IDE an option from now on.

      Cheers and keep up the good blogs!

      Author's profile photo Nabi Zamani
      Nabi Zamani
      Blog Post Author

      Thank you Daniel! Stay tuned, because I’m planning a few other blogs related to ui5 libs, one of them will be published soon…

      You are correct:

      • “old” Web IDE is based on Eclipse Orion
      • SAP Web IDE Full-Stack is based on Eclipse Che

      I usually call it “Full-Stack SAP Web IDE” because calling it “SAP Web IDE Full-Stack” feels a little odd to me when I speak it.  I’m sure the people @SAP might hate me for that, sorry… ?

      Sometime ago the Full-Stack SAP Web IDE was renamed from Web IDE Multi Cloud – or in my wording from “Multi Cloud Web IDE” ? In the SAP Cloud Platform Cockpit under “Services” you will find the naming “Full-Stack”…

      In future there will be only one Web IDE (I think there is a good blog somewhere). While SAP did not develop Orion/Che they decided to create products (“SAP Web IDE”) based on these two open source projects. Of course, these products contain some unique SAP specific features added by SAP.

      By the way: there is actually another Web IDE called SAP Web IDE for SAP HANA, but that’s another topic…

       

      Author's profile photo Helmut Tammen
      Helmut Tammen

      Nabi,  

      It's always great to see your contributions to the SAP community.

      Thx a lot

      Author's profile photo Nabi Zamani
      Nabi Zamani
      Blog Post Author

      Thank you, Helmut! Hearing this from you just made my day 🙂

       

      Author's profile photo Christian Schoeneberg
      Christian Schoeneberg

      HI Nabi,

       

      we tried your library example today, but with one difference. We can only deploy to SAPUI5 ABAP Repository. Do you have experience with this case? I ask because of a problem that has happened in this case.

      When starting the sample.ui5app app we get the following error:

      failed to load 'nabi/sample/ui5lib/library-preload' (failed to load 'nabi/sample/ui5lib/library-preload.js' from ../../../../../resources/nabi/sample/ui5lib/library-preload.js: 404 - Not Found)

      A major change in addition to the deployment target is that I had to change the application name in the deployment and in the neo-app.json because of our naming conventions.

      We use the SAP Web IDE Full-Stack Version with an NetWeaver Frontend Server 752 and SAPUI5 1.52.7.

       

      Thanks for your advice.

       

      Best regards,

      Christian Schoeneberg

       

      Author's profile photo Kiran KUmar Vadrevu
      Kiran KUmar Vadrevu

      Hi,

       

      Web IDE full stack can use for both ABAP development, ABAP CDS views(S/4 HANA onprem Analytics) and also Fiori/UI5 devlopments?

      What is the license model for S/4 HANA on-prem customers ?

       

      Thanks,

      Kiran Vadrevu

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Hi Kiran,

      You might be interested to know that ABAP CDS Views are not just for Analytics - they are also used for Transactional Apps - this is described in the ABAP Programming Model for Fiori.

      For SAP S/4HANA customers wanting to use SAP Cloud Platform Web IDE, they subscribe to this service in the usual way. You can find an overview of SAP Cloud Platform pricing at https://cloudplatform.sap.com/pricing.html

      It's sufficient for most UX development needs (e.g. online Fiori apps run from the Fiori Launchpad) to connect the SAP Cloud Platform Web IDE to the DEV system/client only.

      Rgds

      Jocelyn

      Author's profile photo Alfonso Carlos Tello Mora
      Alfonso Carlos Tello Mora

      Hi Nabi Zamani

      I created a library from webide and deployed it using SAP Abap Repository. From WebIDE I have added to my application the link to my workspace library. When deploying the app in SAP Abap Repository and running it from the launchpad I always get these errors:

       

      Can someone help me load my library from a launchpad application?

      Author's profile photo Steffen Retz
      Steffen Retz

      Hi Alfonso Carlos Tello Mora,

      we had the same problem using a FLP on ABAP NW.

      One solution is to add the following line on top of your component.js

      jQuery.sap.registerModulePath("com/xxx/hr/zhr_cust_lib", "/sap/bc/ui5_ui5/sap/zhr_cust_lib"); /** FLP only: Uncommend when using via WebIDE **/
      

      You only need this in FLP, so uncomment this line while developing using WebIDE.

      I'm still searching for a way to get rid of this line, but until now I didn't find alternative.

      Author's profile photo Nabi Zamani
      Nabi Zamani
      Blog Post Author

      There’s no need to add this line at all! It’s not needed for both SAPCP and ABAP. The magic behind the scenes is the App Index, and it’S all about deploying the libs/apps correctly.

      I wrote a blog about it some time ago: The UI5 App Index – a demo using SAP Web IDE Full-Stack to clone a Github repo + build via Grunt

      Author's profile photo Nadhiya P M
      Nadhiya P M

      Hi

      Even i am facing the same error, Library is not loading.

      I have imported and deployed it in SAP CP.

       

      Can someone help me here?

       

      Thanks

      Nadhiya.P.M

      Author's profile photo ANIRUP PATNAIK
      ANIRUP PATNAIK

      Hi Nabi Zamani  @Steffen Retz,

      I have used your solution from GIT and it worked like charm.

      We are not into cloud, we are on premise, so deploying into SCP wont work. In this case, how different the sol has to be designed, so that we can consume the lib file into other apps.

      I went through the solution that u have provided to make it work for FLP,

      jQuery.sap.registerModulePath("com/xxx/hr/zhr_cust_lib", "/sap/bc/ui5_ui5/sap/zhr_cust_lib");

      Please can you help understand the first parameter of registerModulePath () i.e 

      "com/xxx/hr/zhr_cust_lib"

      .

       

      Regards,

      Anirup Patnaik

      Author's profile photo Nabi Zamani
      Nabi Zamani
      Blog Post Author

      See my comment above, including the link (which includes even a video and code on github).

      Other than that you could help yourself by check the API docs of jQuery.sap.registerModulePath to to better understand API. Note that this API is deprecated since 1.58. But as I mentioned above this line of code is not needed at all when the UI5 lib/app is deployed correctly - be it to ABAP to SAPCP!

      Author's profile photo ANIRUP PATNAIK
      ANIRUP PATNAIK

      Thanks @Nabi Zamani !

      But one question :

      When we are deploying the lib to SCP, in the manifest.json file of the app that consumes the lib file we add this route :

      {
      “path”: “/resources/nabi/sample/ui5lib”,
      “target”: {
      “type”: “application”,
      “name”: “ui5webidedemolib”,
      “entryPath”: “/”
      },
      “description”: “Nabi Sample UI5 Library”
      }

      I have deployed the app to gateway, and done all the validations with /sap/bc/ui2/app_index/ui5_app_info?id=nabi.sample.ui5lib, they are all green.

      But how the target route in manifest.json of the app that consumes the lib has to be maintained.

      Please can you help.

       

      Regards,

      Anirup Patnaik