11/26/2020 by Ronak Hingorani Posted in SAP

Full-stack WebIDEIntroduction

SAP WebIDE is a powerful, extensible, web-based integrated development tool that simplifies end-to-end full-stack application development. SAP WebIDE supports the entire application lifecycle, from development and testing to deployment and extensibility. 

Also, SAP WebIDE enables seamless integration with other SAP Cloud Platform capabilities like SAP Fiori launchpad, Git code repository, SAP Fiori Cloud, and SAP HANA Cloud Platform mobile service for development and operations. SAP Web IDE also securely connects to the SAPUI5 ABAP Repository to enable the consumption of business data and app import/deployment. 

There are two kinds of WebIDE available - SAP WebIDE personal edition and SAP WebIDE Full-Stack. We encourage you to look at the article SAP WebIDE Personal Edition for configuration and setup of the offline version. In this article, we will focus on SAP WebIDE configuration or the WebIDE Full-Stack edition (including the SAP WebIDE setup).

 

SAP WebIDE Full Stack does not need a local installation as it is provided as a software as a service (SaaS). It is suitable for online access for web development, and, thus, it needs an internet connection. All projects created in SAP WebIDE full stack will be stored remotely on the cloud. 

SAP Web IDE relies on SAP Cloud Platform infrastructure for authentication and secure connectivity to SAP Gateway. SAP Web IDE Full-Stack could use any Identity provider (IdP), including customer-defined IdP’s and use the SAP Cloud Connector for secure connection to on-premise systems.

 

Setup & Configuration – SAP WebIDE Full-Stack edition

In this section, we would demonstrate how we can configure and set up the trial SAP WebIDE Full-Stack edition. The same steps can be used for productive use.

 

Step 1 – 

Visit https://account.hana.ondemand.com/ to log in or register.

Register for SAP Cloud Platform

 

Register as a new user for a trial account by just using your email id and phone number or log in using productive account details. 

 

In the next screen, we have a Trial Global Account created automatically and click the same as shown below. For the productive case, you would have a Global Account created by the BASIS Admin Team.  

Global Accounts

 

 

Step 2 – 

Click WebIDE and launch the same. WebIDE full stack is ready for use. 

SAP Cloud Platform

 

SAP Cloud Platform registration

 

 

Unlike Personal Edition, SAP WebIDE Full-Stack setup includes registration and launching the cloud-hosted WebIDE. 

 

Configure SAP backend with SAP WebIDE Full-Stack edition

Now that we understand that SAP WebIDE Full Stack is a SaaS and hosted over the internet without the need for any installation, the next step is to connect this to SAP backend. For that, firstly need to identify the type of SAP backend system. Is it a Cloud system or an on-premise system?

Configure backend

 

 

As shown in the architecture above, if your remote system is on-premise, you have set up the Cloud Connector and define a virtual host mapping for the system. Cloud Connector serves as a link between SAP Cloud Platform applications and on-premise systems. This is an SAP BASIS / Cloud connector admin activity that involves the installation of Cloud Connector, initial configuration, managing subaccounts, and configuration of access control). Apart from this additional step, the below steps remain the same.

 

Step 1 –

Open WebIDE Full Stack, go to the menu, click the tool, and launch the SAP Cloud Platform Cockpit to maintain the destination. Alternatively, log on with a user (who is an account member) to the SAP Cloud Platform cockpit.

SAP Cloud Platform Cockpit

 

 

Step 2 – 

With SAP Cloud Platform Cockpit, you would see connectivity in the left-hand plane, choose the destination and enter the details of your SAP back end system and additional properties, as shown below.           

Destination configuration

 

Property

Value

Name

Provide a name for the destination that includes the desired service.

Type

HTTP

Description

(Optional) Describe the destination

URL

://:

://: (if you are using SAP Cloud Platform connector)

Proxy Type

Select the Internet or On-premise, depending on the connection you need to provide for your application.

Authentication

Select No Authentication or Basic Authentication depending on the authentication you need for the connection.

 

Addition Properties (mandatory ones are listed below):

Additional Property

Value

WebIDEUsage

odata_abap - for the OData functionality of Gateway (corresponds to URL path /sap/opu/odata)
ui5_execute_abap - for executing SAPUI5 applications from the SAPUI5 ABAP Repository (corresponds to URL path /sap/bc/ui5_ui5)
dev_abap - for extensibility scenarios and developing or deploying to SAPUI5 ABAP Repository (corresponds to URL path /sap/bc/adt)
 

WebIDEEnabled

TRUE

WebIDESystem

 

sap-client

 

 

To summarize, SAP WebIDE Full-Stack requires log-in credentials (Trial or Productive) to launch WebIDE, BASIS configuration for cloud connector (for on-premise systems), and maintenance of destination to link the SAP system. With this, you should be ready to use the WebIDE Full Stack to build SAPUI5 or FIORI applications and use the data from the linked SAP system.

 


Author Photo

Ronak is an ABAP/UI5/FIORI Consultant with more than 8 years of experience, with a demonstrated history of working in the SAP consulting industry. He has worked across various SAP modules like MM, SD, FICO, P2P and has helped client by developing a scalable technical ABAP solution. Over the past 8 years he has built expertise in server-side ABAP technology and advanced ABAP skills like CDS, AMDP, OData and in client-side UX technology like UI5 Framework (HTML/CSS/ JavaScript) and FIORI. He also has experience in SAP Upgrade from ECC to HANA (1709/1909).
More Blogs by Ronak Hingorani:
sap webide
SAP WebIDE Personal Edition Setup and Configuration

Introduction SAP WebIDE is a web-based development tool to build SAPUI5 and FIORI applications. WebIDE is an open source code editor development environment for a single user. There are two kinds of ...

fiori elements
Application Development with FIORI Elements

Introduction SAP Fiori Elements, formerly known as smart templates, has been around since 2015 (when SAP S/4HANA come out) and provides a framework for the most common application patterns.  If ...

restful abap
RESTful ABAP Programming Model (RAP)

Introduction The programming language for SAP, ABAP (Advanced Business Application Programming), is as old as SAP software, and it has been growing and evolving with each SAP release. SAP re-evaluated ...