SES 60: All about SAP Web IDE

on by

The SAP Web IDE stands for SAP Web Integrated Development Environment, which is used to generate and extend SAP Fiori apps. It is nothing but a browser-based tool to let developers and programmers create new user experience.

SAP Web IDE helps in building modern applications for desktops and smart phones (mobiles) with the help of UI. The SAP Web IDE is a flexible with editors to help programmers who wish to develop SAP Fiori applications in an efficient manner. It’s also designed for lesser end-to-end application development life cycle, previewing, developing and deploying SAP Fiori applications. Shown below is the basic architecture schematic of SAP Web IDE.

Let’s dig into the blocks of SAP Web IDE architecture.

  • SAP HANA Cloud Platform (now, SAP Cloud Platform): Here, you can create and deploy applications in the cloud.
  • COCKPIT: The SAP HANA Cloud Cockpit is the central point where applications and other details can be managed using web-based interface.
  • SAP Web IDE: Here, all the development of the application happens.
  • SAPUI5: This is used to build applications.
  • Git: Git is considered as repository to regulate version of your application.
  • Orion: It is a workspace where all project files are stored. It also lets you to work on projects stored in the workspace.
  • SAP Gateway: This one connects SAP Web IDE and your system to access OData services.
  • SAP HANA Cloud Connector: The connector integrates SAP Web IDE and SAP HCP, in a safe manner.

In the context of applications development, SAP Web IDE is called the next-generation cloud-based development environment, since it gives real-time code review and testing. SAP Web IDE lets you collaborate with other designers and developers to achieve expectation and desired output accurately and efficiently.

#Insight

SAP offers a free trial of SAP HCP Cockpit. So, go visit https://account.hana-trial.ondemand.com/cockpit.

Setting up with SAP Web IDE

Here’s my easy step-by-step procedure to set up development environment with SAP Web IDE on the cloud:

  • Launch the SAP Cockpit and login using your credentials. If you don’t have an account yet, create one by clicking on Register.
  • Click on SUBSCRIPTIONS once you log into your account.
  • Go to NEW SUBSCRIPTION and select SAP Web IDE and hit SAVE to save your subscription.
  • So, now you’re subscribed to SAP Web IDE. Under the APPLICATION tab, select Web IDE.
  • Now, launch the SAP Web IDE by clicking on the APPLICATION URL.

This way you can launch and subscribe to SAP Web IDE. Then, the next step will be to build a connection to the backend system. Thus, follow the steps below to configure destination is the backend server is publicly accessible on the internet.

  • Click on DESTINATIONS of the homepage of SAP CLOUD PLATFORM COCKPIT. And then, click NEW DESTINATION.
  • Now, provide these details: NAME: Enter “Connection1”, TYPE: HTTP, DESCRIPTION: Connection1, URL: <protocol>://<host>:<port>”, PROXY TYPE: Internet, CLOUD CONNECTOR VERSION: 2, AUTHENTICATION: select the authentication.
  • Under the PROPERTIES area, click on NEW PROPERTY and fill in all the required details in the window.
  • Once you’re done entering all the details, hit SAVE to save the connection.

So, this is how you set up SAP Web IDE to develop SAP Fiori Applications.

#Insight

You should the SAP Connector or SAP HANA Cloud Connector, if your backend server is sitting behind the firewall. The main function of the SAP Cloud Connector is to merge SAP HCP and existing on-premise systems. There are two versions of SAP Cloud Connector, available – Developer and Productive. The Developer version can be installed on any device without any authentication, where the Productive version of the SAP Cloud Connector requires administration access before installation on the system.

Development Process of SAP Web IDE

  • Once you successfully log into SAP Web IDE, you’ll be able to see the development page. On top of the development page, you’ll find the menu bar, that lets you access all functions available in SAP Web IDE.
  • The second one is the tool bar consisting of common functions like DELTE, SAVE, RUN, etc.
  • You’ll find DEVELOPMENT preferences on the side of the DEVELOPMENT page. Now, click on DEVELOPMENT to open a set of projects and files within a project.
  • You can check out the contents of the file in the code editor.
  • You can open multiple files to see the code editor area of each file. They’ll be displayed to you as individual tabs.
  • On the right side, you’ll also find functions like Git PANE, Git HISTORY, Search and COLLABORATION.

So, this is the development stage of SAP Web IDE.

Receive my tips and tutorials on SAP Industry and developments of SAP. Join my Community of SAP Professionals & Entrepreneurs!

Finally, CONNECT WITH ME ON FACEBOOK HERE. I’d love to hear about your experiences if you’ve worked in SAP, what modules are you certified in and more, on Facebook. I’d also love to help you in your SAP learning journey so that you achieve success in the industry.

%d bloggers like this: