I have taken three input fields in a view.If user click on input field(F4) then fragment will open with data.Here,I am using the concept of fragment.I have created only one fragment but calling same fragment for all input
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="FragmentReuseblity.view" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:f="sap.ui.layout.form">
<Page title="Reusability of Fragment" id="page_id" class="sapUiSizeCompact">
<content>
<f:SimpleForm editable="false" layout="ResponsiveGridLayout"
labelSpanL="4" labelSpanM="4" emptySpanL="4" emptySpanM="4"
columnsL="1" columnsM="1">
<Label text="Id" design="Bold" />
<Input showValueHelp="true" valueHelpRequest="Open_Fragment_Handle1"
id="Stid" valueHelpOnly="true" placeholder="Enter id" />
<Label text="Name" design="Bold" />
<Input showValueHelp="true" valueHelpRequest="Open_Fragment_Handle2"
id="nameId" valueHelpOnly="true" placeholder="Enter Name" />
<Label text="Course" design="Bold" />
<Input showValueHelp="true" valueHelpRequest="Open_Fragment_Handle3"
id="courseId" valueHelpOnly="true" placeholder="Enter course" />
</f:SimpleForm>
</content>
</Page>
</core:View>
xmlns="sap.m" controllerName="FragmentReuseblity.view" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:f="sap.ui.layout.form">
<Page title="Reusability of Fragment" id="page_id" class="sapUiSizeCompact">
<content>
<f:SimpleForm editable="false" layout="ResponsiveGridLayout"
labelSpanL="4" labelSpanM="4" emptySpanL="4" emptySpanM="4"
columnsL="1" columnsM="1">
<Label text="Id" design="Bold" />
<Input showValueHelp="true" valueHelpRequest="Open_Fragment_Handle1"
id="Stid" valueHelpOnly="true" placeholder="Enter id" />
<Label text="Name" design="Bold" />
<Input showValueHelp="true" valueHelpRequest="Open_Fragment_Handle2"
id="nameId" valueHelpOnly="true" placeholder="Enter Name" />
<Label text="Course" design="Bold" />
<Input showValueHelp="true" valueHelpRequest="Open_Fragment_Handle3"
id="courseId" valueHelpOnly="true" placeholder="Enter course" />
</f:SimpleForm>
</content>
</Page>
</core:View>
genericFrag.fragment.xml
<rohit:FragmentDefinition xmlns="sap.m"
xmlns:rohit="sap.ui.core">
<SelectDialog noDataText="No Data Found" confirm="handleConfirm">
</SelectDialog>
</rohit:FragmentDefinition>
xmlns:rohit="sap.ui.core">
<SelectDialog noDataText="No Data Found" confirm="handleConfirm">
</SelectDialog>
</rohit:FragmentDefinition>
Controller Part
sap.ui.core.mvc.Controller.extend("FragmentReuseblity.view.T1", {
onInit : function() {
this.json = new sap.ui.model.json.JSONModel();
// loading the data from model....
this.json.loadData("model/data.json", null, false);
this.getView().setModel(this.json);
},
// if user click on first F4 then this will call....
Open_Fragment_Handle1 : function(evt) {
this.inputId = this.byId("Stid");
this.click = "IdPress";
var propertName = "{id}";
var title = "Ids";
// called method....
this.genericMethod(title, propertName);
},
// if user click on second F4 then this will call....
Open_Fragment_Handle2 : function() {
this.inputId = this.byId("nameId");
var propertName = "{name}";
var title = "Names";
this.click = "NamesPress";
// called method....
this.genericMethod(title, propertName);
},
// if user click on third F4 then this will call....
Open_Fragment_Handle3 : function() {
this.inputId = this.byId("courseId");
var propertName = "{course}";
var title = "Courses";
this.click = "CoursesPress";
// called method....
this.genericMethod(title, propertName);
},
// Generic method for opening fragment with respective data (calling
// method)....
genericMethod : function(titleVal, propertName) {
var template = new sap.m.StandardListItem({
title : propertName
});
if (!this.frag) {
this.frag = new sap.ui.xmlfragment("FragmentReuseblity.view.common", this);
}
this.frag.setTitle(titleVal);
this.frag.bindAggregation("items", "/Records", template);
// setting model to fragment....
this.frag.setModel(this.json);
this.frag.open();
},
// when user will click on item of fragment then this will fire....
handleConfirm : function(evt) {
property = evt.getParameter("selectedItem").getBindingContext()
.getObject();
var conditionVal = this.click;
switch (conditionVal) {
case "IdPress":
this.inputId.setValue(property.id);
break;
case "NamesPress":
this.inputId.setValue(property.name);
break;
case "CoursesPress":
this.inputId.setValue(property.course);
break;
}
},
// This will fire when user close the application....
onExit : function() {
if (this.frag !== undefined) {
this.frag.destroy();
}
}
});
Comments
Post a Comment