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





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




(Optional) Describe the destination



://: (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.


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


Addition Properties (mandatory ones are listed below):

Additional Property



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)








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.


$(document).ready(function(){ $("img").addClass("lazy"); }); !function(t,e,o,i){var r=t(e);t.fn.lazyload=function(o){var i,n=this,a={threshold:0,failure_limit:0,event:"scroll.lazyload",effect:"show",container:e,data_attribute:"original",data_srcset:"srcset",skip_invisible:!1,appear:null,load:null,placeholder:"data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="};function f(){var e=0;n.each(function(){var o=t(this);if(!a.skip_invisible||o.is(":visible"))if(t.abovethetop(this,a)||t.leftofbegin(this,a));else if(t.belowthefold(this,a)||t.rightoffold(this,a)){if(++e>a.failure_limit)return!1}else o.trigger("appear"),e=0})}return o&&(void 0!==o.failurelimit&&(o.failure_limit=o.failurelimit,delete o.failurelimit),void 0!==o.effectspeed&&(o.effect_speed=o.effectspeed,delete o.effectspeed),t.extend(a,o)),i=void 0===a.container||a.container===e?r:t(a.container),0===a.event.indexOf("scroll")&&i.off(a.event).on(a.event,function(){return f()}),this.each(function(){var e=this,o=t(e);e.loaded=!1,void 0!==o.attr("src")&&!1!==o.attr("src")||o.is("img")&&o.attr("src",a.placeholder),o.one("appear",function(){if(!this.loaded){if(a.appear){var i=n.length;a.appear.call(e,i,a)}t("").one("load",function(){var i=o.attr("data-"+a.data_attribute),r=o.attr("data-"+a.data_srcset);i!=o.attr("src")&&(o.hide(),o.is("img")&&(o.attr("src",i),null!=r&&o.attr("srcset",r)),o.is("video")?o.attr("poster",i):o.css("background-image","url('"+i+"')"),o[a.effect](a.effect_speed)),e.loaded=!0;var f=t.grep(n,function(t){return!t.loaded});if(n=t(f),a.load){var l=n.length;a.load.call(e,l,a)}}).attr({src:o.attr("data-"+a.data_attribute),srcset:o.attr("data-"+a.data_srcset)||""})}}),0!==a.event.indexOf("scroll")&&o.off(a.event).on(a.event,function(){e.loaded||o.trigger("appear")})}),r.off("resize.lazyload").bind("resize.lazyload",function(){f()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&r.on("pageshow",function(e){e.originalEvent&&e.originalEvent.persisted&&n.each(function(){t(this).trigger("appear")})}),t(function(){f()}),this},t.belowthefold=function(o,i){return(void 0===i.container||i.container===e?(e.innerHeight?e.innerHeight:r.height())+r.scrollTop():t(i.container).offset().top+t(i.container).height())<=t(o).offset().top-i.threshold},t.rightoffold=function(o,i){return(void 0===i.container||i.container===e?r.width()+r.scrollLeft():t(i.container).offset().left+t(i.container).width())<=t(o).offset().left-i.threshold},t.abovethetop=function(o,i){return(void 0===i.container||i.container===e?r.scrollTop():t(i.container).offset().top)>=t(o).offset().top+i.threshold+t(o).height()},t.leftofbegin=function(o,i){return(void 0===i.container||i.container===e?r.scrollLeft():t(i.container).offset().left)>=t(o).offset().left+i.threshold+t(o).width()},t.inviewport=function(e,o){return!(t.rightoffold(e,o)||t.leftofbegin(e,o)||t.belowthefold(e,o)||t.abovethetop(e,o))},t.extend(t.expr[":"],{"below-the-fold":function(e){return t.belowthefold(e,{threshold:0})},"above-the-top":function(e){return!t.belowthefold(e,{threshold:0})},"right-of-screen":function(e){return t.rightoffold(e,{threshold:0})},"left-of-screen":function(e){return!t.rightoffold(e,{threshold:0})},"in-viewport":function(e){return t.inviewport(e,{threshold:0})},"above-the-fold":function(e){return!t.belowthefold(e,{threshold:0})},"right-of-fold":function(e){return t.rightoffold(e,{threshold:0})},"left-of-fold":function(e){return!t.rightoffold(e,{threshold:0})}})}(jQuery,window,document); $("img.lazy").lazyload(); console.log(typeof($("img").lazyload) === "function")