Fiori Fragments


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 


Application Structure:







<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>

genericFrag.fragment.xml

<rohit:FragmentDefinition xmlns="sap.m"
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();
}
}
});


data.json


{ "Records":[
{
"id":"01",
"name":"Ganesh",
"course":"SAP Development"
},
{
"id":"02",
"name":"Chotu",
"course":"Web Development"
},
{
"id":"03",
"name":"Rani",
"course":"Java Development"
},
{
"id":"04",
"name":"Raj",
"course":"SQL Development"
}
]
}


output







Comments