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
// 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
nice vikas
ReplyDeletenice .Very useful .Thank you for sharing sap fiori online access
ReplyDeleteThanks Ramya......
Delete