Check the version of SAPUI5 loaded in SAP Web IDE

Open SAP Web IDE and press CTRL+SHIFT+ALT+P.

The following dialog box will pop up giving all the required details.


You can choose to load a particular version of SAPUI5 if  you require it.


Getting started with SAPUI5 in SAP Web IDE

  • Open the SAP Web IDE. Wait for it to load and initialize.


  • Select the Development perspective on the left-hand side bar.


  • Select the Workspace folder and click on File->New->Folder
  • Enter myproject as the name.


  • Create a new file neo-app.json in your project folder.
  • Paste the following code inside the file and save.
  "welcomeFile": "index.html",
  "routes": [
      "path": "/resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "version": "snapshot",
        "entryPath": "/resources"
      "description": "SAPUI5 Resources"
      "path": "/test-resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/test-resources"
      "description": "SAPUI5 Test Resources"

The welcomeFile configuration will indicate which initial file to load.

The routes key will define 2 entries: one from where to load the SAPUI5 resource and one for integrating test resources for the Fiori Launchpad.

Create an index.html file with the following code.

<!DOCTYPE html>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="utf-8">
		<title>Welcome to SAPUI5 in the clould</title>
			data-sap-ui-preload="async" >
			sap.ui.getCore().attachInit(function () {
				new sap.m.Label({
					text : "SAPUI5 in the SAP Web IDE."
	<body class="sapUiBody" id="content">
  • Run the app or the index.html file as a web application.


Import SAP Fiori app from AS back-end into SAP Web IDE

In SAP Web IDE’s homepage, choose Import Application.
Select the ABAP back-end server.
In the search field, enter SHOP.
Select the application EPMRA_SHOP.
Run the application by choosing Run-> Run-as ->SAP Fiori Launchpad Sandbox.


“Cloud Connectivity Configuration” is not visible in Web IDE

If you are following the tutorials on, you will note that “Cloud Connectivity Configuration” does not appear on the right-click in WEB IDE. The name was changed to HTML5 Application Descriptor.

You have to place the application folder directly under the Workspace for things to work out as expected.