Click here and follow my SAP UI5/FIORI snippets and information Page
This is view Binding of Dialog 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:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form">
<Page title="Dialog" id="page_IDD">
<content>
<f:SimpleForm id="SimpleFormChange354" minWidth="1024"
maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"
labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4"
columnsL="1" columnsM="1" class="editableForm">
<f:content>
<Label text="" />
<Input showValueHelp="true" valueHelpOnly="true"
placeholder="Select Email-Id"
placeholder="Select Email-Id"
valueHelpRequest="handlOpenDialog" />
</f:content>
</f:SimpleForm>
</content>
</Page>
</core:View>
Controller Part
sap.ui.controller("View.S1", {
onInit:function()
{
this.json = new sap.ui.model.json.JSONModel();
this.json.loadData("model/data.json", null, false);
},
//Click of input this event will fire....
handlOpenDialog:function(event)
{ this.evt=event.getSource();
if(!this.dialog)
{
this.dialog=new sap.ui.xmlfragment("View.DIA",this)
this.dialog.setModel(this.json);
}
this.dialog.open();
},
//Click on cancel this event will fire.....
handlecloseFrag:function()
{ this.dialog.close();
},
//click on list Item this event will fire.........
onListSelect:function(ovt)
{ var listItem=ovt.getParameter("listItem").getBindingContext().getObject();
this.evt.setValue(listItem.email);
this.dialog.close();}
});
DIA.fragment.xml
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Dialog contentWidth="400px" contentHeight="350px" title="Records">
<subHeader>
<Toolbar>
<SearchField></SearchField>
</Toolbar>
</subHeader>
<content>
<List items="{/Records}" mode="SingleSelectMaster" select="onListSelect">
<StandardListItem title="{name}" description="{email}">
</StandardListItem>
</List>
</content>
<endButton>
<Button text="Cancel" press="handlecloseFrag"/>
</endButton>
</Dialog>
</core:FragmentDefinition>
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Dialog contentWidth="400px" contentHeight="350px" title="Records">
<subHeader>
<Toolbar>
<SearchField></SearchField>
</Toolbar>
</subHeader>
<content>
<List items="{/Records}" mode="SingleSelectMaster" select="onListSelect">
<StandardListItem title="{name}" description="{email}">
</StandardListItem>
</List>
</content>
<endButton>
<Button text="Cancel" press="handlecloseFrag"/>
</endButton>
</Dialog>
</core:FragmentDefinition>
data.json
{ "Records":[{
"name":"First",
"email":"vikas@gmail.com"
},
{
"name":"Second",
"email":"raju@gmail.com"
},
{
"name":"Third",
"email":"pooja@gmail.com"
},
{
"name":"Fourth",
"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>
<script>
sap.ui.localResources("View");
var app = new sap.m.App({initialPage:"idS11"});
var page = sap.ui.view({id:"idS11", 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
No comments:
Post a Comment