difference between shell and the page in sapui5 ?

Both page and shell used the content element and the Page is showing full width for the app default when we load from the index,if we use the shell  it is taking some default alignments from left and right ,if we use the page there is no default left and right margins for the pages.

for shell ...in the index page


           <script>
var shell = new sap.m.Shell({
title : "Routing Concept",
showLogout : true,
headerRightText : "Right Text",
app : new sap.ui.core.ComponentContainer({
name : "yourprojectName"
})
})
shell.placeAt("content");

</script>




for the Page...in the index page



            <script>
sap.ui.localResources("viewfoldername");
var app = new sap.m.App({initialPage:"idSampleApp1"});
var page = sap.ui.view({id:"idSampleApp1",                viewName:"themainviewtonavigate", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
    </script>

how to get the click option for the list item or Table row in sapUi5 ?

in the columnList make sure that the type and the press

<ColumnListItem id="list"  type="Navigation"
  press="handleLineItemPress" >


in js file



handleLineItemPress : function(oEvent) {

sap.m.MessageToast.show("hello   data   "
+ oEvent.getSource().getCells()[1].getText(), {
duration : 3000
});

},

how to remove the header /Tiltle bar of the page in sap ui5 ?

use the <Page  showHeader="false" ></Page> ,if the showHeader is the False then we can hide the Title bar or Header of the Page.

why sap.ui.getCore().setModel() is used in sapui5?

this is used mainly for the storing the data in page and access the data in another page.like global access.


var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(mData);
this.getView().setModel(oModel);
//set the objects here
sap.ui.getCore().setModel(oModel, "FirstData");
 sap.ui.getCore().setModel(oModel, "SecondData");



//acces in any control...like following


var globalModel_one = sap.ui.getCore().getModel("FirstData");
this.getView().byId("table").setModel(globalModel_one);

here table  is the id of the Table..

the structure should like


<Table id="table" items="{/ProductCollection}" mode="Delete" delete="odelete">
<columns>
<Column>
<Text text="First Name" />
</Column>
<Column>
<Text text="Last Name" />
</Column>

</columns>
<items>
<ColumnListItem id="list">
<cells>
<Link id="link" text="{UoM}" press="handlePress" />

</cells>
<cells>

<Text text="{UoM}" />
</cells>


</ColumnListItem>
</items>

</Table>

how to add the json data from the simple local .json file in sapui5 ?

step 1: create a folder on web content ..such that webcontent/yourjsonfile/kkk.json

Step2:

in your controller oninit()

just add the 

var oBusy = new sap.m.BusyDialog();

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

oModel.attachRequestSent(function() {

oBusy.open();

});

oModel.loadData("myfoldername/kkk.json");

oModel.attachRequestCompleted(function() {

oBusy.close();

});

// oModel.setData(mData);

this.getView().setModel(oModel);

step 3:

<Table id="table" items="{/ProductCollection}" mode="Delete" delete="odelete">

<columns>

<Column>

<Text class="firstname_class" text="First Name" />

</Column>

<Column>

<Text class="lastname_class" text="Last Name" />

</Column>

</columns>

<items>

<ColumnListItem id="list">

<cells class="cellclassdata">

<Link id="link" text="{Category}" press="handlePress" />

</cells>

<cells>

<Text class="shipcity_class" text="{Category}" />

</cells>

</ColumnListItem>

</items>

</Table>

step4:

sample kkk.json 

{

"ProductCollection": [

{

"ProductId": "1239102",

"Name": "Power Projector 4713",

"Category": "Projector",

"SupplierName": "Titanium",

"Description": "A very powerful projector with special features for Internet usability, USB",

"WeightMeasure": 1467,

"WeightUnit": "g",

"Price": 856.49,

"CurrencyCode": "EUR",

"Status": "Available",

"Quantity": 3,

"UoM": "PC",

"Width": 51,

"Depth": 42,

"Height": 18,

"DimUnit": "cm",

"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-6100.jpg"

},

{

"ProductId": "2212-121-828",

"Name": "Gladiator MX",

"Category": "Graphics Card",

"SupplierName": "Technocom",

"Description": "Gladiator MX: DDR2 RoHS 128MB Supporting 512MB Clock rate: 350 MHz Memory Clock: 533 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 32-bit Highlighted Features: DVI Out, TV Out , HDTV",

"WeightMeasure": 321,

"WeightUnit": "g",

"Price": 81.7,

"CurrencyCode": "EUR",

"Status": "Discontinued",

"Quantity": 10,

"UoM": "PC",

"Width": 34,

"Depth": 14,

"Height": 2,

"DimUnit": "cm",

"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1071.jpg"

}

]

}

how to append the simple json data to the table in sapui5 ?

your xml should conatin the table element

<Table id="table" items="{/items}" mode="Delete" delete="odelete">

<columns>

<Column>

<Text text="First Name" />

</Column>

<Column>

<Text text="Last Name" />

</Column>

</columns>

<items>

<ColumnListItem id="list">

<cells>

<Link id="link" text="{text1}" press="handlePress" />

</cells>

<cells>

<Text text="{text2}" />

</cells>

</ColumnListItem>

</items>

</Table>

and your controller should load the model data in oninit()

var data = {

"items" : [ {

"text1" : "Rajendra",

"text2" : "Asuri",

"text3" : "M",

"text4" : "001"

}, {

"text1" : "Lakshmana Rao",

"text2" : "Gondi",

"text3" : "M",

"text4" : "002"

}, {

"text1" : "Lakshmi",

"text2" : "Gondi",

"text3" : "F",

"text4" : "003"

} ]

};

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

this.getView().byId("table").setModel(oModel);

how to add data to the json data to the combo box in sapui5 ?

use this method in the init method of your  controller.

var mData = {

"combotype":"ComboText",

"rajendra" : [{

"Name" :"Jan",

"Value":"1"

},

{

"Name" :"Feb",

"Value":"2"

},

{

"Name" :"March",

"Value":"3"

}]

};

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

oModel.setData(mData);

this.getView().setModel(oModel);

and your xml view should contain 

<ComboBox   class ="Combo_box1" items="{/rajendra}" >

<items>

<core:Item key="{Name}" text="{Value}" />

</items>

</ComboBox>

How to read the json data in sapui5 ?

use this method in the init method of your  controller.


var mData = {

"combotype":"ComboText",
"rajendra" : [{
"Name" :"Jan",
"Value":"1"
},
{
"Name" :"Feb",
"Value":"2"
},
{
"Name" :"March",
"Value":"3"
}]

};

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(mData);
this.getView().setModel(oModel);




and your xml view should contain


<ComboBox   class ="Combo_box1" items="{/rajendra}" >
<items>
<core:Item key="{Name}" text="{Value}" />
</items>
</ComboBox>

How the Data Binding in sap ui5?

In UI5 data binding is very simple comparative all other bindings.


there are only 4 steps we need to follow.

1_ ready the Json Data.

2_create the JsonModel.

3_add the Json Data to the JsonModel.

4_set the Json Model object globally to the Core.


this is the simple Binding.

EX:

step1:
var jsondata={info:"Rajendra  Mobility Developer"};

step2:

var jsonmodel=new sap.ui.model.json.JsonModel();

step3:

jsonmodel.setData(jsondata);

step4:

 sap.ui.getcore().setmodel(jsonmodel); // we can acces this core info anywhere in the application

how can i show the Toast messge in SAPUI5 ?

THIS IS THE SIMPLE STATEMENT FOR SHOWING THE TOAST/BLINK MESSAGE

sap.m.MessageToast.show("hello toast", {duration: 3000});

Life cycle of the Controller.js in SAPUI5 ?

Controller.js execution starts from  onInit(),and then OnBeforeRendering(),and then OnAfterRendering(),and then OnExist().


you can check the flow of Controller.js by putting the alert message in every method.


EX:
onInit: function() {alert("onit");},
onBeforeRendering: function() {alert("onBefore");}
onAfterRendering: function() {alert("onAfter");},
onExit: function() {alert("onEXist");}

which is the better why for developing the UI in SAPUI5 ? why ?

we have lot of suggestions for doing the  User Interface in SAPUI5 ,they are JAVA SCRIPT, XML, HTML,JSON formats,
if you have prior knowledge on JavaScript,its better go with the JavaScript,but if you are new or starting level for sapui5 better  go with the XML ,its gives more flexible and used to quick learn for the Fiori.

what is the best editor for developing the sap ui5?

Eclipse is always best Editor,for the every development department.by adding the corresponding Plugins. 

for the sap Ui5, including Eclipse more suggestions are  WEB IDE and Hana Studio.

what is sap ui5 ?

SAPUI5 (SAP user interface for HTML 5) is a collection of libraries that developers can use to build desktop and mobile applications that run in a browser. With SAP's SAPUI5JavaScript toolkit, developers can build SAP web applications using HTML5 web development standards.