Create your First SAPUI5 application in WebIDE

Open WebIDE.

On the menu, click on File -> New -> Project From Template


















Select SAPUI5 application and click Next





























Provide the Project Name and Namespace. Click Next.





























Let the View Type be XML. Give a meaningful View Name. I have given SOList. Click Finish.





























A SAPUI5 prject is created. Expand the folder to view the application structure. It strictly follows the MVC architecture. Also double click on index.html file to view the code generated by the WebIDE.



















index.html

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">

<title>zdemoproj</title>

<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"zdemoproj": ""}'>
</script>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "zdemoproj"
})
}).placeAt("content");
});
</script>
</head>

<body class="sapUiBody" id="content">
</body>

</html>

The code highlighted in yellow color is the bootstrap of SAPUI5 application.

Run SAPUI5 application by clicking the RUN button. It displays a blank application with Title.