SAP Web IDE (Integrated Development Environment) is a web-based tool that empowers users to rapidly create and extend applications for browser and mobile devices. It simplifies the end-to-end application lifecycle: prototyping, development, packaging, deployment, and customer extensions for SAP Fiori and SAPUI5 applications.

SAP Web IDE offers highly efficient tools to easily build and extend apps applying SAP Fiori UX and generic SAPUI5 apps using wizards, templates, sample applications, drag and drop tools, code editor and much more.

SAP Web IDE is available on SAP HANA Cloud Platform and can be accessed via SAP Store for productive or trial usage.

SAP has brought its own IDE into play, while many users are still stuck on conventional IDE like eclipse, which by the way is the best platform for the beginners.  But for developers, who already have taken their first step towards development in sap ui5, I would personally recommend using web IDE, since it allows following proper guidelines and following best practices while coding.

Applications developed with SAP Web IDE can run on different platforms like SAP HANA Cloud Platform, SAP ABAP using Business Server Pages (BSP), or SAP Mobile Platform (SMP).

SAP Web IDE comes with integrated deployment options for

1) SAP HANA Cloud Platform

2) SAPUI5 ABAP Repository on a SAP ABAP Server
3) SAP Fiori launchpad
4) SAP HANA Cloud Platform mobile services
5) SAP Mobile Platform.
    Personally, the best feature of SAP web IDE is the SAP Web IDE Hybrid Application Toolkit (HAT) add-on provides support for developing hybrid web applications using SAP Web IDE. The add-on also supports testing and debugging the applications through a local hybrid development environment. This add-on supports the Cordova core plugins as well as plugins from the SMP Kapsel SDK.
    The toolkit supports hybrid application development for Android and iOS.

    Features of SAP web IDE

    Free-style coding
    SAP Web IDE supports free-style coding by providing robust editors with capabilities of code completion (XML, property files, JavaScript and SAPUI5), code validation, pre- and user-defined code templates, and many more. Advanced Search on basis of file name across the workspace allows the users with a better coding experience.

    Layout Editor (WYSIWYG) tooling
    It allows Drag and drop editor which provides a user-friendly visual editor including control galleries to easily build and customize applications.

    Wizards, Templates and Sample Applications
    Project templates provided by a wizard-based gallery allows you to create new applications with only a few clicks, following specific best practices. In addition you can create projects based on Sample Applications. Sample Applications are complete applications with all coding and mock data. They provide best-practice coding and comprehensive comments.

    Extensibility support
    SAP Web IDE provides the ability to extend existing SAP Fiori applications in a nice and easy manner through a visual extensibility editor to graphically choose an element you would like to extend. SAP Fiori, cloud edition leverages SAP Web Ide to extend and customize SAP Fiori apps.

    Instant preview
    SAP Web IDE includes an instant preview so you can launch the application in the browser at different resolutions and in different languages, either with real or mock data.

    Mock data support
    Mock data can be automatically generated or manually created to run the application independently for front-end/back-end development de-coupling, testing and demoing purposes.

    Support for several environments
    Seamlessly run on any device - automatically renders for phone, tablet, and desktop. Integrated deployment to SAP platforms: HANA Cloud Platform (HCP), SAP ABAP, Fiori launchpad (FLP), HANA Cloud Platform mobile Services (HCPms) and SAP Mobile Platform (SMP).

    Extensible and modular architecture for “adding your own plug-ins”
    SAP Web IDE has an extensible and modular architecture built up of plug-ins. SAP web IDE streamlines the ability to add your own plug-in/template via wizards and templates.

    Benefits of using SAP web IDE

    Reduced cost and complexity
    SAP Web IDE is offered as a cloud solution hosted on SAP HANA Cloud Platform, so no initial installation is required, and local IT infrastructure is untouched. Developers can access development projects anytime, anywhere - all that is needed is a PC with a browser. SAP Web IDE also provides you the ability to develop your application once and deploy to on premise (SAPUI5 ABAP repository), Cloud (HCP, Fiori launchpad), HANA Cloud Platform mobile services (HCPms) and SAP Mobile Platform (SMP). You can then run your application on any device - mobile, tablet, and desktop.

    Increased productivity
    SAP Web IDE aims to increase development productivity by delivering a holistic development experience, providing efficient tools e.g. templates, wizards, sample applications, visual editors, code completion, code snippets, mock data, instant preview, integrated deployment and SAP best practices to rapidly build test and deploy applications.

    Empower developers, business experts and designers and reduced training effort required
    SAP Web IDE comes with a user experience adjusted to both, developers and non-technical people. Wizard Templates, Sample Applications and Layout Editor (WYSIWYG) tooling can be used as jump starter to create new SAPUI5 applications following the Fiori UX guidelines and help to understand SAPUI5 concepts.

    Screen Shots

    Here I am providing some screen shots of Web IDE, to help you understand better.

    This is the first screen of Sap Web IDE, where you could start a new project from template or build a new extension project

    Code editor with code completion with an API reference pane.

    It includes, creating the project from the existing templates. You could also choose fiori like template or even master detail template.
    Create hybrid apps (also known as Kapsel apps) using Apache Cordova and the SAP Mobile Platform SDK

    It includes a code editor and Search & Replace capabilities linked to the code editor.


    This was all about SAP Web IDE introduction, in the next blog I will show you how to create your first application with SAP Web IDE. Follow the link for Hello world example.

    For any queries, mail me at If you loved my tutorials, comment down below your views. It always inspires me for making better blogs and stay tuned for more tutorials!!

    Next Post »