In this Post we will see how to create a very simple List as shown below :-

 

Step1:- Goto the cloud9 IDE from Here . Then create a basic framework for the List as mentioned below to  start coding

Inside the script tag let us add the core library to load it into our application

<script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table">
</script>

Step2:- Let us create an object  oPage inside the tag along with we will also pass the parameters

var oPage = new sap.m.Page({

title: "List Page",
content: [
oList
]

});

Create the app object :-

var oApp = sap.m.App({

pages: [oPage]

}).placeAt("content");

Now create a div of the content inside the body

<div id="content">
</div>

 

Next, let us create the oData object and oModel for the list along with we will also pass the key parameters to them as Name and Place

var oData = {
Name:"Dinosaur",
Place: "Mountain"
};

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);

Now we will create the list item and do the data binding in title and description.

var oItem1 = new sap.m.StandardListItem({

title: "{/Name}",
description:"{/Place}"
})

Step3:- Lastly we will create a List  and will put the standard list item inside the list

var oList = new sap.m.List({

headerText: "Animals",
items: [
oItem1
]
});

Ye ! Here comes the output :-

Thank You ! Stay tuned for more. 🙂