Skip to Content

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:

 

To report this post you need to login first.

5 Comments

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

  1. Daniel Ruiz

    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!

    (1) 
    1. Nabi Zamani 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…

       

      (0) 

Leave a Reply