There are no secrets to success. It is the result of preparation, hard work, and learning from failure.

Monday, 16 May 2016

Controller Binding of SelectDialog with JSON

Click here and follow my SAP UI5/FIORI snippets and information Page
This is controller Binding of SelectDialog with json,below I have shown application structure,view part,controller part, json part and index part of the application.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="view.s1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.ui.layout.form">
<Page title="Fragment with Json" id="pageid">
<content>
<Input width="30%" showValueHelp="true" valueHelpRequest="Open_Fragment_Handle" 
id="inPutI-D" valueHelpOnly="true"/>
</content>
</Page>
</core:View>

Controller Part


jQuery.sap.require("sap.ui.layout.Grid");
sap.ui.controller("view.s1", {
onInit : function() {
this.json = new sap.ui.model.json.JSONModel();
this.json.loadData("model/data.json", null, false);
this.getView().setModel(this.json);
},
// When you click on Input field then this event will fire....
Open_Fragment_Handle:function(evt)
{
var PDaithat=this;
PDaithat.Event=evt.getSource();
// First Way
this.tem=new sap.m.StandardListItem({
title:"{name}",
description:"{email}"
});
if(!this.frag)
{
this.frag=new sap.m.SelectDialog({
title:"Records",
noDataText:"No Data Found",
busy:true,
confirm:this.handleConfirm,
       OR
confirm:[this.handleConfirm,this]});
this.frag.bindAggregation("items","/Records",this.tem);
this.frag.setModel(this.json);
}
this.frag.open();
  // Second Way
if(!this.frag)
{
this.frag=new sap.m.SelectDialog({
title:"Records",
noDataText:"No Data Found",
busy:true,
confirm:this.handleConfirm,
         OR
confirm:[this.handleConfirm,this],
items:{
path:"/Records",
template:new sap.m.StandardListItem({
title:"{name}",
description:"{email}"
})
}
})
this.frag.setModel(this.json);
}
this.frag.open();
},
//when you click on line Item of fragment then this event will fire......
handleConfirm:function(evt)
{
var PDaithat=this;
var property=evt.getParameter("selectedItem").getBindingContext().getObject();
PDaithat.getView().byId("inPutI-D").setValue(property.name);
OR
PDaithat.Event.setValue(property.name);
},
// This will fire when you close the application....
onExit:function()
{
if(this.frag!==undefined)
{
this.frag.destroy();
}},
});

data.json

{ "Records":[{ 
"name":"vikas",
"email":"vikas@gmail.com"
},
"name":"Raju",
"email":"raju@gmail.com"
},
"name":"pooja",
"email":"pooja@gmail.com"
},
"name":"Rahu",
"email":"Rahu@gmail.com"
}
]}

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("view");
var app = new sap.m.App({initialPage:"idview1"});
var page = sap.ui.view({id:"idview1", viewName:"view.s1",type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>


Result




View Binding of SelectDialog with JSON

Click here and follow my SAP UI5/FIORI snippets and information Page
This is view Binding of SelectDialog with json,below I have shown application structure,view part,controller part, json part ,fragment and index part of the application.Go through it and please let me know in case of any issue/doubt.

Application Structure


View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="view.s1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.ui.layout.form">
<Page title="Fragment with Json" id="pageid">
<content>
<Input width="30%" showValueHelp="true" valueHelpRequest="Open_Fragment_Handle" 
id="inPutI-D" valueHelpOnly="true"/>
</content>
</Page>
</core:View>

Controller Part



jQuery.sap.require("sap.ui.layout.Grid");
sap.ui.controller("view.s1", {
onInit : function() {
this.json = new sap.ui.model.json.JSONModel();
this.json.loadData("model/data.json", null, false);
this.getView().setModel(this.json);
},

// When you click on Input field then this event will fire....
Open_Fragment_Handle:function()
{if(!this.frag)
{
this.frag=new sap.ui.xmlfragment("view.record",this);
this.frag.setModel(this.json);
this.frag.addStyleClass("sapUiSizeCompact");
}
this.frag.open();},

//when you click on line Item of fragment then this event will fire......
handleConfirm:function(evt)
{ var property=evt.getParameter("selectedItem").getBindingContext().getObject();
this.getView().byId("inPutI-D").setValue(property.name);
},

// This will fire when you close the application....
onExit:function()
{if(this.frag!==undefined)
{
this.frag.destroy();
}},});


record.fragment.xml



<core:FragmentDefinition

xmlns="sap.m"

xmlns:core="sap.ui.core">

<SelectDialog  title="Records" noDataText="No Data Found" busy="true" confirm="handleConfirm"  items="{/Records}">
<StandardListItem title="{name}" 
description="{email}">
</StandardListItem>
</SelectDialog>
</core:FragmentDefinition>

data.json

{ "Records":[{ 
"name":"vikas",
"email":"vikas@gmail.com"
},
"name":"Raju",
"email":"raju@gmail.com"
},
"name":"pooja",
"email":"pooja@gmail.com"
},
"name":"Rahu",
"email":"Rahu@gmail.com"
}
]}

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("view");
var app = new sap.m.App({initialPage:"idview1"});
var page = sap.ui.view({id:"idview1", viewName:"view.s1",type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>

Result



Introduction to Fragment

Click here and follow my SAP UI5/FIORI snippets and information Page

Why fragment came into picture ?

Many times we need to show a pop up screens (Dialogs, Message Boxes etc.) to user at runtime. So in this case creating a complete view and its controller is not desirable. Hence Fragment came into the picture.

What is Fragment ?

 Fragments are light-weight UI parts,which can be re-used, defined similar to Views but do not have any controller or other behavior code involved. In case code is required and for event handler methods,they should be able to connect to existing controllers of the "owning" View.


For example - If we want to show unique details for each line then we need to create one fragment and call that fragment for each line and display the unique details. Please have a look at below screenshots for better understanding.